A Guide to Optimal Image Compression in WordPress

Written by Mark Forrester on January 9, 2014 Blog.

image compression guideMany bloggers put so much of their focus on writing up decent posts that they lose sight of some arguably essential details.

Like images. If they do remember to include high-quality, thought-provoking images, they miss out on the opportunity to optimize these images for the best end-user experience. This means compressing those images so they load in a flash. Without losing discernible quality, of course.

It can feel like a delicate dance balancing file size with image quality, but it doesn’t have to be. There are several tools out there that can help you to automate the process. But before we get onto that, let’s start by taking a look at the file types you will typically use for images.

JPG vs. PNG

The most commonly used image files online are those with the extension JPG.

They’re preferred by many due to the fact that they can apply heavy layers of compression (thus reducing file size dramatically) without a major effect on the end product. JPGs eliminate redundancies that tend to cause file size bloat. This means they load faster, which is great for your visitors and for SEO.

However, when it comes down to the details, JPGs are a tad lackluster. They are considered “lossy.” This means two things:

  1. Compression algorithms are applied to the image that reduce the file size but also affect its quality
  2. When the image is duplicated or saved, the quality degrades just a little bit. The more saves you make, the more the image quality declines, resulting in shadows and distortion along hard edges and lines.

These issues aren’t necessarily a problem if you don’t need to modify an image before uploading it and/or it has a very high resolution. However, a lot of image editing software defaults to medium quality. This means that your JPGs will be on the blurry side from the get-go.

Then there are PNGs. These images typically have much larger file sizes and are very high quality. Unfortunately, this means they load a lot slower for users, which can be bad. They’re lossless though, so you can duplicate and save the image as much as you want without losing any quality whatsoever.

One thing you’ll notice when comparing a JPG and PNG side by side is that the JPG tends to blur when there is text or signage involved. PNGs maintain a sharpness and clarity that a JPG just can’t match. They also allow for transparent backgrounds, making them ideal for icons and logos.

So when should you use what? Here are a couple of simple rules of thumb to abide by:

  • Use JPGs for high quality photos and when you don’t need to make a lot of modifications to an image before uploading it (limit saves).
  • Use PNGs for photos with text, illustrations, signs, logos, and icons, and any image you want to have transparency.

Most importantly, don’t forget to check the file size once you’re done. There are no hard and fast rules for image file size limits, but for the most part I try to keep images under 100-150kb (and ideally far less).

In conclusion, picking the right format for the right circumstance should mitigate site load time problems while still maintaining the standard of quality you want. And that can’t be a bad thing.

Compressing Images Before You Upload

Besides selecting the right file type for your situation, you also need to perform some additional compression activities if you want to speed up your site and make the end user’s experience as pleasant as possible. If you want to handle compression before uploading your image files to WordPress, there are a few things you can do.

As we’ve already said, if you’re working with a JPG file, it will be lossy. Unnecessary data will be removed during the compression process, leaving a smaller file of reduced quality. PNGs compression is lossless; i.e. compression doesn’t result in any lost data so the quality always remains the same.

When compressing images on your hard drive, take the following steps:

  1. Duplicate the file. If you make a mistake, you’ll always have the original to go back to.
  2. Reduce the scale of the image. Scale it down to your desired size, crop it, and do whatever other modifications you want to make.
  3. Compress your image with a photo editor. Depending on the image editing software you use, you may need to follow a different series of steps. Here are a few tutorials for GIMP, Photoshop, and Pixelmator to get you started.
  4. Compress your image with a photo compression tool. Using a tool designed specifically for compressing images for the web can get you the best results. Kraken.io, Yahoo! Smush.it, and RIOT are just a few examples. These tools allow you to adjust different parameters to get the optimal file size without sacrificing quality.

You should try out a few tools to see which produces the best results. And remember: the best results here means the smallest file size while still maintaining the best quality possible.

Compressing Images After You Upload

Some people like to keep their image modifications server side and we can respect that. Doing everything in WordPress is awfully handy.

You can do several things to compress your images after you’ve uploaded them to WordPress. First of all, you can just choose one of the preset options before you insert the image into a post. You can usually select from Full Size, Medium, and Thumbnail. The original image size is still on your site’s server but a smaller version is called up when a visitor views your post, reducing load time. This isn’t an exact science, however, and you still might end up with some pretty hefty image files.

Your next course of action is to modify how WordPress handles image compression altogether.

If you want to prevent WordPress from compressing files or increase how much it compresses files, you can make a change to functions.php in your Theme. There’s a good tutorial for doing this at WPMU.org, but in a nutshell, just add the following to your functions.php file:

add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );

As you might guess, the number (80) is the percentage level of compression automatically applied to the image.

It’s important to note that following this method won’t compress images you’ve uploaded to WordPress in the past. It’ll only apply to new images.

Since many people don’t like messing with PHP at all, there are numerous plugins available that make these changes for you and offer greater flexibility. A few examples include:

  • WP Smush.it. This plugin allows for many different types of compression, including image format conversion and dumping unused colors from indexed images (PNGs). Installing and activating this plugin means it will compress all images you upload automatically, including those already on your site.
  • EWWW Image Optimizer. This plugin is robust, compressing and optimizing your images as soon as you upload them. When you first activate it, the plugin will optimize old images as well. It works by reducing file size and doesn’t affect image quality.
  • Lazy Load. As its name suggests, this plugin only loads images as they’re needed (i.e. when they are viewable on the screen). This can dramatically reduce load times and is very effective when optimizing for mobile. It doesn’t optimize individual images so much as it does optimize your visitors’ experience viewing them.

Conclusion

If you’re concerned with your site’s load time — as you should be — focusing some effort on optimizing your images to find a healthy balance between size and quality, will ensure you’re well on your way to improving your visitor’s experience.

Now it’s your turn. What are your favorite tools for compressing images for WordPress? What piece of advice has been the most invaluable to you as a WordPress user? Let us know in the comments section!

Image source: Michael Cory

cta-banner-10-product-page-v2_2x

8 Responses

  1. Drivingralle
    January 9, 2014 at 10:33 pm #

    There is one more nice tool: optimus.io

  2. David Jamieson
    January 10, 2014 at 6:07 am #

    EWWW Optimiser is terrific! Does the job and is easy to use 🙂

  3. Chris Finnegan
    January 10, 2014 at 4:31 pm #

    Hey Tom,
    I like your “rules of thumb” on when to use what format. I direct clients to pixlr.com for online image editing but I’m sure there’ heaps of great online tools available now!

    Cheers
    Chris

  4. Murray
    January 11, 2014 at 10:52 am #

    Love the article, some great snippets I can use with my more techie clients.

    I recently read an article on Smashing magazine which has drastically reduced my load times on one of my larger ecommerce sites. Reducing 15,000 image files by over 200mb. It is for the techie, but a couple of great tools for everyone.

    http://www.smashingmagazine.com/2013/12/17/imageoptim-cli-batch-compression-tool/

  5. Dhiraj Das
    January 14, 2014 at 4:31 am #

    EWWW Image Optimizer is great, however best best way I found is to compress the files externally before uploading it to site. TinyPNG is great for PNG files

  6. Ryan
    January 19, 2014 at 5:33 am #

    I didn’t realize there were so many great image compression plugins out there. I usually use a combination of picmonkey and jpeg-optimizer when I don’t have access to Photoshop.

  7. liken
    January 19, 2014 at 7:06 am #

    Hi, Tom Ewer. I am so shocked when reading this article. I do also work on online business but just several months recently with little experience. So, this article is actually useful for me that help me beware of whether I should give it a try or not. Thanks for sharing. Look forwards to reading more useful information from you.

  8. Christy
    January 20, 2014 at 6:20 pm #

    Hi Tom! Nice post. Say, how can I optimize the images in my RSS feeds? I have the Memorable theme, so some of my images are 843px wide. I would like to make them a max of 600px wide for my RSS feeds so they don’t get cropped or blow out emails.