optimize-images-wordpress-performance-large

How to optimize images to improve WordPress site performance

Joanne Amos's Layout avatar

In the digital world, people aren’t known for their patience. Speed is a critical element in the success of your website – the faster your site runs, the more clicks, shares, and conversions you can expect.

Web pages continue to grow in their complexity, however, making websites heavier and therefore slower to load. And images can be the biggest culprit.

But those same images give your site character and personality. They complement your products and services and are great for encouraging engagement.

So how can you balance the need for speed with the use of vivid imagery on your website?

With the use of image optimization.

optimize-images-wordpress-performance-edit

The benefits of image optimization

There are several benefits to speeding up your site with image optimization.

A 2011 study by Kissmetrics determined that 40% of people will abandon a website if it takes longer than three seconds to load, while a delay of a single second can result in a 7% reduction in conversions.

“Slow-loading sites will hurt your business. ”

Speeding your site up will help prevent a high bounce rate and keep people around long enough to make a conversion.

Your newfound speediness will also improve your SEO, which will endear you to Google, which loves speedy sites and will reward you by placing you higher up the SERPs.

optimize-images-wordpress-performance-google

And there are other practical benefits of image optimization, too. It will be faster to create backups for your site, your media will use less bandwidth, and your site will require less storage space on your server.

So what are you waiting for? Here are five tips for optimizing your images for better performance.

1. Be selective with your images

First, have a thorough review of all the images on your website. Are they all necessary? Are they in line with your branding and the company image you wish to promote? Do they serve a purpose?

Be ruthless. Anything that doesn’t support your company branding or work to tell your story or promote your products and services should be removed.

2. Crop your images

Cropping images will shave off vital pixels, naturally reducing the image file size. This will speed things up, as it reduces the amount of data that needs to be transferred.

Cropping images also gives your site an aesthetic boost, as you can use the technique to remove any unwanted elements from an image. Done well, a cropped image will help to focus the eye on the most important elements of the image so it has more of a visual punch.

3. Choose the correct image size and proportions

When uploading an image to WordPress, it’s too easy to take the image from your media library and drop it into place, without adjusting the image. This is a surefire way to lose bandwidth.

WordPress blogs have a size associated with the main block of content, so when you add an image, it will naturally be scaled to fit that size. That means it’s pointless to add an image that’s larger than the maximum size.

So ensure your image is the right size and proportion before adding it to the site.

optimize-images-wordpress-performance-size

There is a built-in option for this on Macs. Simply open the image using the Preview option in the Dock or Finder, click on Tools > Adjust Size and change it to the required size.

If you’re using a Windows PC, you can download a free program called Paint.net and adjust your image size there. Or of course, you can usually accomplish this task in Photoshop or any other image-editing software you might use.

4. Choose the correct file type

Once you have your image in the correct size, save it to the optimal file type. There are a number of different file formats that can be used for images online. But you shouldn’t randomly choose a format – each works differently, so choose the correct format for your needs.

  • JPEGs were created to compress photographic images. They work best for photographs and images with significant data such as multiple colors or complicated graphics.
  • GIFs are the oldest file type still in use, but they’re relevant to certain situations. They only support 256 colors, so they’re no use for photos, paintings, or illustrations. But they’re great for animations, and they can have transparent backgrounds.
  • PNGs also support transparent backgrounds, but they can incorporate a wide range of colors. They’re no good for photographs, but they’re great for images with few colors, or large blocks of color.

optimize-images-wordpress-performance-file

5. Use a good image optimization program

Once you’ve done your bit, it’s time to turn to technology. There are a number of excellent image optimization programs, both standalone apps and WordPress plugins, which will reduce your image size.

  • TinyPNG: This web-based app optimizes your images using smart lossy compression, reducing your file size by decreasing the number of colors used. It’s free and quick to use, with a near-invisible difference in the quality of the image. Works for PNG and JPEG.
  • ImageOptim: ImageOptim is a free Mac app that compresses images by removing unnecessary bloat, while preserving as much image quality as possible.
  • FileOptimizer: This Windows app uses various optimization and recompression techniques to reduce image size, while retaining quality.
  • JPEGmini: Available for Mac or Windows, this paid-for software enables you to reduce your file size while retaining quality and format. You can check it out via a free trial.
  • RIOT: RIOT stands for Radical Image Optimization Tool. This free tool works with Mac or Windows to reduce image size, and you can choose the correct format for saving.
  • Compress JPEG and PNG Images: Another WordPress plugin, from the TinyPNG team. It may not have a snappy name, but it does exactly what it says on the tin!
  • EWWW Image Optimizer Cloud: This WordPress plugin automatically optimizes images as you upload them to your blog. It works with JPEG, PNG, and GIF.

“Image optimization is a balancing act between finding a small file size and maintaining quality. ”

The speed of your website has a large impact on its effectiveness, so if you’re not using image optimization, start doing so now – your users will thank you for it!

What tips do you have for optimizing images for your WordPress site, and which are your favorite programs? Tell us below.

Comments ( 3 )

  1. Luke Cavanagh

    September 16, 2016

    Other solid plugin options to look at would be Imagify and ImageRecycle.

  2. Jonas

    September 19, 2016

    Great article! Thanks for sharing!

    You recommend using WP Smush, but on the page linked to below it says that WP Smush is a plugin that is not allowed on Flywheel. Can you confirm if or if it is not possible/recommended to you use WP Smush on Flywheel? -and could you possibly also recommend other image optimisation plugins that are allowed on Flywheel – for instance, is 'Compress JPEG & PNG images' definitely fine to use?

    https://getflywheel.com/wordpress-support/what-plugins-are-not-allowed/

    Many thanks!

    • WP

      September 23, 2016

      At least the free version works.
      And they seem to allow it too, otherweise they would have deleted the plugin while transfering.

  3. Josh Young

    September 28, 2016

    If you're not looking for batch optimization a great tool for on the fly compression:

    https://compressor.io

    Results are pretty awesome! Cheers.

Join the discussion