4 Key WordPress Image Optimization Tips

Images are often the best part of a WordPress website. They catch the eye, set the mood, and invite the emotions to take part in what can otherwise be a boring experience.

However, image files are often the biggest files on the server, and they tend to affect page upload speeds more than anything else. With new display technologies such as Retina becoming more and more popular, and mobile device usage on the rise, it pays to keep your image quality up and your file size down.

To help face these challenges, this post will look at four valuable suggestions to make the best choices when it comes to image optimization.

1. Keep the Original File

This is an excellent habit to cultivate, starting now.

In order to best optimize images, you will need to experiment with different compression options. With that in mind, always remember to keep the original image file safe. Once a file is compressed you can’t always undo the change.

It might sound obvious, but this one simple tip might save hours of work.

2. Choose the Correct Format

Below is a table comparing the four most popular graphic file formats. It shows the most important details, pros and cons, and the best format to use for typical graphic elements on the page.

Here’s an example of how you might consider using different image file types:

JPEG file size 186KB (compressed from 1.02MB)

PNG file size 624KB (compressed  from 1.02MB)

By looking at this comparison you will see that JPEGs are usually your best bet for photos when you’re on a bandwidth budget. In the above examples there is almost no visible difference in the images, but the PNG is much larger than the JPEG. However, keep in mind that every single time you edit and save a JPEG, you lose a little bit of the original image quality.

Vectors look great on any scale while raster images will pixelate

If your image contains typography, or is a screenshot or some other form of computer-generated image – especially vectors – it is generally better to opt for SVG or PNG. And while might never use GIFs, but they are the file type of choice when it comes to using animated images.

New File Formats on the Way

Google is currently developing WebP, a new image format the provides both lossless and lossy compression.

They claim file size reductions of 26% compared to PNGs, with no loss of quality. It also works on most new browsers. The tech is based on the VP8 video compression techniques, and independent tests have reported a number of issues, including color loss. Nonetheless, as Google continues to work out the bugs, this will be a graphics format to keep your eye on.

3. Use the Best Retina Format

Retina technology arrived on the scene with huge picture quality benefits, but also created a couple of problems for us along the way. Typical monitors use 72ppi (pixels per inch), whereas a Retina display ranges from 150 to 300ppi. This makes images and fonts crisper and more beautiful, but also makes for larger image files and reduced page loading time, especially with mobile devices.

The good news is that the human eye actually picks up little difference in quality on Retina devices after compression. A huge JPEG (inches, not kilobytes) saved at a high compression rate can look better than a smaller image at reduced compression when re-sized for your page.

Another way to solve the problem is to create a second version of each of your image files at double the size. A 100 x 100 px image at 80ppi will need to become 200 x 200 px, then re-sized back to 100 x 100 in your page, or alternatively increased to 160ppi.

Still with me? If not, a plugin like WP Retina 2X can do a lot of the work for you. You will need to add “@2x” to the second file name (example.png will become example@2x.png).

Here’s another great resource: Retina.js instructs the visitor’s browser to check each image on the page to see if there is a high resolution version on the server (with ‘@2x’ in the name), and swaps the image in place.

Also keep in mind is that WordPress automatically compresses JPEG images to 90% of the original. To disable this, add the following snippet to your theme’s functions.php file:

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

4. Choose the Best Compression Tools for WordPress

WordPress spoils us for choice when it comes to automating image compression. Here are just a few of the many great compression tools available online.

TinyPNG

This is probably the best tool to use to take the hard work out of compressing PNG images. You simply upload your images to the site and download the compressed versions for free. You’re able to upload up to 20 images with a maximum size of  5MB each.

There are also great TinyPNG plugins available for WordPress (here’s my favorite). And here’s the kicker: the compression results in TinyPNG are better than the Photoshop standard. With Photoshop you need to posterize the image to optimize the background blending results in order to match the regular results from TinyPNG.

There is also a version by the same designers that compresses JPEGs, called Tinyjpg.

WP Smush.it

This is another great WordPress plugin – with a long history – that reduces image sizes and speeds up page load time.

EWW Image Optimizer

This option works well too, but you need to take note of the warnings. For example, once you’ve compressed a GIF, you can no longer edit it.

ImageOptim (for Mac)

ImageOptim is a great desktop tool that seamlessly integrates some of the best optimization tools available. It’s ‘lossless’ and you can use it in conjunction with other compression tools, and best of all, it’s open-source (i.e. free).

Use your other compression tools first, then drop files in the ImageOptim folder to further reduce size.

Conclusion

Getting the best out of images in your design takes a little know-how and some good organization. It is always going to come down to a compromise between the quality of the image and the size of the file.

Using the tips we have looked at in this post, you will be able to make the best format choice, and continue to use high-quality, Retina-ready images for maximum impact in your design. And trust me – your hard work on image optimization will make a huge difference to your site!