Managing media is one of those experiences that keeps getting better out of the box in WordPress. But it is also one of the hardest parts of running any website. Images, video, and audio often account for a large majority of your page weight, and ensuring that it is optimized can go a long way towards making your site faster, cleaner and more approachable users. Fortunately, there are several plugins out there that can help you with this. Here are five.
Imsanity
Imsanity is a plugin with one task in mind. To limit the size of images that are uploaded to WordPress. Sometimes, when you hand a site off to a client, they will simply upload the largest image they have straight into WordPress, even if it’s a 300dpi image straight from their DSLR camera. And they should. We shouldn’t expect clients to resize and optimize images themselves.
Imsanity solves at least one part of this problem. It allows you to limit the width and height (in pixels) of images that are uploaded. If an image is larger than the size you choose, it will be resized automatically before it is uploaded. You can also specify different sizes for images uploaded through posts, and those uploaded in the Media Library. The plugin features a bulk resize option for resizing existing images according to your new specifications.
EWWW Image Optimizer
If Imsanity is able to help you optimize uploaded images in size, EWWW Image Optimizer adds an extra level of optimization with compression. The plugin hooks into the media uploader, and uses various server side tools to optimize the imported image. You can set the level of compression that you want for each image type (PNG, JPG, GIF), and it comes with a few extra features for managing your image assets. The most valuable type of optimization is lossless compression, which strips extra information within images, shaving precious bytes off your image size with no loss of quality. After using EWWW Image Optimizer, your images will be a lot more compact, and should speed up your site quite a bit.
It’s worth noting that certain tools have to be set up on your server in order for this plugin to work. Most hosts should have this set up, but EWWW will let you know if it’s not able to perform optimizations. If that’s the case, try WPSmush.it, which performs similar compression but on an external server.
PictureFill.WP
For those that are up on web standards, you may have heard of the new specifications regarding images in HTML. The picture element has been added to the spec, along with an extension of the img tag. Both are meant to accommodate responsive images, meaning that images are served at different sizes according to the device used to look at a given website. This saves extra bandwidth on smaller screens, and ensures that even the largest of screens are still addressed.
Thanks to WordPress’ automatic image sizes, it’s simple enough to get this new HTML markup into your posts. But the Picturefill Javascript library ensures that even browsers that don’t support this new specification will still support responsive images properly. I wrote a whole article on how to get Picturefill and responsive images working with WordPress, but your best bet is simply to use the Picturefill.WP plugin.
Picturefill.WP uses baked in WordPress media to get responsive images working on your site. It uses up to date web standards and the latest version of the Picturefill Javascript library. It also works on both new and already published posts, and smartly caches generated images. There are actually two versions of the plugin.
The version listed on WordPress.org still uses the old version of the Picturefill library and an old standard. However, there is an experimental version on GitHub that uses the latest version. It is still working some of the kinks out before it is merged into the main plugin, but I am currently using it on Tidy Repo and haven’t ran into any major problems. Definitely worth checking out.
Lazy Load for Videos
Optimizing images will go a long way towards increasing performance on your site, but you have to be mindful about videos as well. If you are embedding videos from a third party, like YouTube or Vimeo, then the player itself will come bundled along with Javascript files, stylesheets, and images that will load in right away, and block your page from loading.
Lazy Load for Videos solves for this. It stops external files from loading right away. Instead, it substitutes a static thumbnail image in place of a player. Only when a user has clicked “play” will all these external files load in, and the video will start playing. With Lazy Load for Videos switched on, your pages will load a lot quicker, especially if there are a few videos listed. And your users will hardly notice, their behavior will stay exactly the same. The plugin also allows you to customize the color and styling of embedded videos as an added bonus. It’s one of those plugins that’s easy to bolt on and start using, without too much set-up time.
PB oEmbed HTML5 Audio
The newest version of WordPress supports oEmbed for audio, meaning you can simply copy and paste a link to an mp3 file in your post, or use the audio shortcode, and a full audio player will be inserted automatically on to your post.
Rather than re-invent this convention, PB oEmbed extends WordPress functionality to add a few features. The most important is a full Flash fallback, so that the audio player works in older browsers that don’t support HTML5 audio. It also enables full cache support, so that the audio shortcode will work with plugins like W3 Total Cache and WP Super Cache. You’ll set up audio the same as you always did, it will just be a bit more powerful now.
Optimizing your media files in WordPress can go a long way towards a faster and smoother site. Just taking a few steps will ensure a much better experience for your users. These plugins will give you a great leg up on boosting performance and managing media.
How do you optimize your audio, image and video files? What plugins have you used that I might have left out? Let me know in the comments!
1 Comment