Optimizing Images In WordPress For Speed

WordPress Image QualityI grew up in a small town in Costa Rica where I only had 6k/sec internet (56k would have been a dream come true) so when it comes to optimizing a site for speed I am very picky. I always shrive to keep sites loading as fast as possible. I think at one point WPExplorer.com had a 97-98 Google Page Speed rank. Of course now with social media buttons and stuff I’ve had to accommodate.

Besides the general coding of your WordPress theme the other factor that has a huge effect on the speediness of your site are images. These days WordPress themes are extremely “image-heavy” and of course I’ll take some of the blame because I love adding featured images wherever possible :)

This is just a quick post with some tips on how you can help optimize the images on your site to increase the loading times of your site. If you are a WordPress user or theme developer this post may help you out a bit. Feel free to post some more tips in the comments!

Optimizing WordPress Images Tips

Below are some general tips for keeping your images loading quickly on your site. Nothing too fancy, just some suggestions:

  • JPG’s tend to have lower file sizes then PNG’s
  • When using photoshop make sure to save your image “for the web”
  • Don’t use the width and height IMG tags to re-size your images, crop them whenever possible
  • Make sure to define the width and height attributes so the browser doesn’t have to do any work

Image Optimizing Plugins & Services

Below are several services and a couple WordPress plugins that can help you optimize your images to decrease their file size and/or speed up the loading of images on your site.

Smush it & The WP Smush.it Plugin

Yahoo Smush It

Smush.it is an awesome service created by Yahoo that allows you to upload images and it will strip out the unnecessary meta junk or flatten png’s to decrease their file size. You can visit their site to optimize your images, but even better they offer an API that performs the optimization (except for stripping JPEG meta data).

Alex Dunae has created the WP Smush.it plugin that makes use of the API so you can smush the images on your WordPress powered site automatically upon uploading.

It’s one of the best image optimizing plugins out there and you’ll want to have it on all

of your sites.

PunnyPNG

PunnyPNG is another bragged about image compressing service that I recommend to theme developers.

PunnyPNG will take it a step further from smush.it to further optimize your images and is ideal for the images in your theme files that are loaded on all your pages.

Using A CDN (Content Delivery Network)

Content Delivery Network

Probably the most effective way to increase the loading of images on your site is via CDN – Content Management System. A CDN is basically a network of computers that will keep copies of your data across various nodes of a network and it will serve your visitors the data from the closest location to the visitor. This can help significantly decrease the time it takes to load images on your site.

All the “top dogs” are using CDN services and it can make a really big difference in loading times. It can be pretty expensive though so most bloggers will probably not use one, especially if they don’t have a significant amount of traffic.

For Developers: Use The WordPress Featured Image Instead Of Timthumb

WordPress Featured ImagesA lot of theme developers (this was me back in the day) are using the TimThumb script to automatically re-size images. The problem with this script is that it runs whenever pages are loaded (as long as the images are not cached already) so it takes up time to run the script and save the cached image. Plus, it’s a database-intensive script especially if you have a lot of pages on your site and if you are hosted somewhere like the MediaTemple grid it will take up a huge portion of your monthly GPU Usage.

On the other hand by defining specific image sizes for featured images all your images will be cropped upon uploading (or when u run the Regenerate Thumbnails Plugin) and you won’t have to run any script simply to show an image on the site. WordPress also changes the quality of the re-sized images a little which can make the file size a bit smaller.

Changing JPEG Thumbnail Image Quality

I found this super awesome trick by Glyin Mooney over at Skidoosh.co.uk for changing the JPEG quality in WordPress…

Basically you can add a simple function to your functions.php file to define the default JPEG quality for your images. While a lot of people may use this to increase the quality to 100 (like he suggests in the post) you can also use it to lower the quality and speed up your site.

The current JPEG quality for re-sized thumbnails in WordPress is 90 simply add the following to change the value (lets say we want really sh*tty images at 60% the original quality)

add_filter('jpeg_quality', function($arg){return 60;});

Simply change the “return value” to the quality you want your images to be. And if you are getting an “unexpected T_FUNCTION” error then try the following function instead:

function jpeg_quality_callback($arg) { return (int)100; } add_filter('jpeg_quality', 'jpeg_quality_callback');

How Do You Keep Your WordPress Loading Fast?

Do you have any other great tips for optimizing your images used on your blog for speed? What other steps do you take to keep your website running fast and Google and your users happy?

Note: Awesome people leave comments :)

AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 1 comment
  1. Jake Paine says:

    I find optimizing images yourself prior to upload makes the biggest difference of all. That and appropriate cropping (if you haven’t set custom thumbnail sizes correctly in your function.php) – http://tinypng.org/ is absolutely unbelievable for compressing PNG’s works a dream!

Leave a Reply