The ultimate guide to image optimisation with WordPress

There is a lot of emphasis based on website performance; whether you’re trying to cache database queries or reduce the amount of scripts that are loaded on a page – you’re doing this to increase performance to therefore increase usability and ultimately increase conversions for your (or your clients’) business.

On average images comprise over 2/3rds of the size of a page request. This gives us a wide birth in order to look at different ways in order to optimise images and potentially reduce this proportion and decrease the total page size.

01-httparchive-opt

Another reason to focus your efforts on images is that there are a lot of ‘quick wins’ to increase performance, no matter your level of web development expertise. There are also more advanced techniques we can cover which can give us further performance gains. Here is a list of techniques we’re going to cover:

  1. File size
  2. File format
  3. Image sizes/proportions
  4. Delivery Method
  5. Appearance
  6. Responsive Images

 

1. File Size

Ultimately, file size is the most important attribute of an image that we can look to when optimising. It’s the easiest, the quickest and potentially has the largest gains, so let’s start here.

Compression

When images are created (especially photographs) there is a lot of data included with that image that is not needed on the web. Images can often contain 50% of data we don’t need for the web so compressing images can have, possibly, the largest impact on reducing your page load times.

kraken

I use Kraken.io (referral link) to compress the images as they are uploaded to the site. Across all my sites my average savings on an image is 44% and I’ve saved 1.07GB of file size. Pretty big numbers. There’s also a free plugin called EWWW Image Optimizer.

Baseline size

Although storage space has become very cheap over the last 10 years we should still try to optimise the maximum size of images stored on the server. Imagine a client uploads a picture straight from a camera’s SD card. The image resolution is likely to be massive and the image size is likely to exceed 5mb. What place does an image that is 3300px x 2550px have on our website?

Not only does it take up more space but it also means if we want to compress or manipulate the images it will take longer as it’s working with a larger file. Screen sizes are increasing all the time, but it doesn’t make sense to have these raw files on our web server. In order to set a limit on these files I use the Imsanity plugin.

2. File Format

It’s important that your image has the suitable file format. There are more in depth articles about which file format you should use but by creating just a few simple rules you can pick the correct image format in 99% of scenarios.

PNG

JPG

SVG

SVG’s aren’t enabled by default in WordPress. To add them to the existing mime types then use the following code in your functions.php

<?php
function stomp_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'stomp_mime_types');
view raw Enable SVG.php hosted with ❤ by GitHub

WEBP

GIF

 

3. Image Sizes/Proportions

The image that is uploaded via the media uploader is usually not going to be the size and/or proportions you want it to be on your site. There are different ways you can produce the correct image for placeholders on your site.

add_image_size()

Consider the scenario where you have an image that is 1000px x 1000px but you only want an image that’s 500px x 500px. WordPress automatically creates a thumbnail (150px x 150px) and a medium image (300px x 300px) but as those are likely to be too small you can specify your own image sizes to use.

<?php add_image_size( 'front-page-blog', 500, 500 ); ?>
view raw add_image_size hosted with ❤ by GitHub

You might also want to force the proportions of your image. If you upload an image that’s square (1000px x 1000px) and the image needs to be rectangle (800px x 600px) then you will need to crop the image. You can do this the following way.

<?php add_image_size( 'blog-image-cropped', 800, 600, true ); ?>
view raw add_image_size crop hosted with ❤ by GitHub

WordPress also allows you to choose the position in which the image is cropped. There’s an excellent article that shows you how you’d go about this. There are also tools to automatically pick the crop position – this is useful for images with key points of interest in them such as people’s faces.

Note: WordPress only does this for images uploaded after specifying the code above. In order for WordPress to recreate the images you’ll have to use a plugin such as Regenerate Thumbnails.

Creating Images on the fly

If you’re using lots of different image sizes then you may not want to create 10 copies of each image on the server. Instead you could create these images on-the-fly and only when they are needed. You do not need to specify image sizes in advance, you only create the images you need and you don’t have to regenerate the thumbnails.

TimThumb used to be a widely used method of doing this but after a few major security flaws I think all confidence has been lost in this project. I personally haven’t used it for years and most likely won’t touch it ever again. I’m happy to be persuaded otherwise but there are other methods I now use and are more secure.

A plugin that I use is WP Thumb. It’s built using PHPThumb and allows you to specify on an image by image basis. It’s actively developed by Human Made and can be found both in the WP Plugin Repository and on Github.

4. Delivery Method

The way you deliver the images to users is also important. Each image that is downloaded requires a http request. Each http request means connecting to the server, downloading the image and closing the connection. That means if you have to download 10 images you’re opening the connection 10 times which is obviously inefficient.

Sprites

If you are serving lots of small images it might be worth adding them all into one image sprite and loading them all into together.

At the time of writing the above paragraph is still a technique I widely encourage but it’s also worth keeping an eye on http2 which is much more efficient at downloading multiple files. You can see a demo of the comparison of http/1.1 vs http2.

banner-772x250

Icon fonts

Instead of loading images for small images on your site you might be able to take advantage of Icons fonts. Popular icon fonts such as Font Awesome means you only have to load a font to produce hundreds of images (usually icons) on your site. This is not only a huge win from a performance view but fonts are much more flexible than images in terms of having different variations (size, colour etc).

Content Delivery Network (CDN)

Using a CDN means you can distribute assets such as image from a geographically local server. If your user is in, or near New York you can serve your images from a New York server – speeding the time of delivery up. A good plugin I use to work with Amazon’s CDN Cloudfront is the WP Offload S3 plugin. You can also use Photon which is part of Jetpack which is a free alternative.

5. Appearance

I had trouble naming this section as it’s a little bit miscellaneous but I think there are some valid points made and some good tips nonetheless.

Lazy Loading

On larger pages users may not even scroll to the bottom of the page. Why then would you want waste bandwidth in loading the images when they are not needed? The answer is you probably don’t and you can leverage this by installing a plugin such as BJ Lazy Load which will handle this for you. For a little bit more control of what images are actually lazily loaded then you could implement it using something such as lazysizes.

Whenever you do implement lazy loading make sure you test it. The aim is to speed up the loading of your page by reducing the page size but it can cause a bad user experience with images loading in left, right and centre. As a rule I only use this for the main content (i.e. not headers/sidebars/footers) so the structure of the site is loaded but images are only loaded when they are needed within the content.

Sliders

There are many articles about how sliders can be good or bad for your site. The first question to ask is, do you need the slider in the first place? What is being put in slide 5? If it’s been relegated that much is it really that important.

If you do choose to use a slider of some kind then using techniques such as only loading the first two slides until the users scrolls is an excellent way to keep down the file sizes (similar to lazy loading) and solutions such as Flexloader for Flexslider does the trick.

6. Responsive Images

Responsive images are a topic within themselves, but the most important thing is that you know that they are available to use and have a positive effect on the speed of your site, especially on mobile.

At the moment there is no support for responsive images in WordPress however that is set to change in WordPress 4.4 when the RICG Responsive images plugin is merged in. In the meantime you can install and activate the plugin. What the plugin does is, instead of adding the normal img tag into your WordPress content editor it now adds an img srcset. It does this automatically when you add an image so there’s not much you need to do but it’s worth knowing what it does.

If you have an image that is 800px on the desktop then the chances are that you don’t need the same sized image on a mobile phone. Therefore there is a srcset for desktop and a mobile image (again automatically generated by WordPress) so the correct one is loaded. It also takes retina devices in consideration as because the browser decides which image to use then there is also potential for loading smaller images on devices with a slow internet connection.

There is also the <picture> element which can also achieve the same results as listed above but you can also art direct your images. There’s so much to learn with responsive images in general, and there are some great examples of them in action so I’m keeping this section brief as it’s an article in itself.

Knowing about something is half the battle.

About this article

Work with me on your project Get started