A Guide to Optimal Image Compression in WordPress

Many 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.

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.

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.

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.

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

About

Mark Forrester

I'm a proud co-founder of WooThemes, based at our headquarters in beautiful Cape Town. I'm also a keen photographer, goofy dad and avid sports fan.

Website|X