Image optimisation is an often-overlooked aspect of SEO. It fits into both technical SEO and on-page SEO, and can be just as important as text, in indicating what the page is about.
Technical SEO for images
Website speed is an important factor when considering SEO. Google will promote websites with the best user experience, and websites that are simply too slow will receive algorithmic penalties, as of the introduction of Web Core Vitals.
Moreover, users that experience slow pages will tend to bounce, and exit the website without interacting with it further, which signals to Google that the website is of poor quality. If this happens your site will be hit again, algorithmically, and you will have a hard time ranking.
Generally small improvements are unlikely to make big changes if the website is already very fast, however if the site is slow, you may be under the threshold for your specific niche, and so will likely suffer.
Images are one of the biggest elements on any page in line with videos and map embeds. Hero images that stretch the whole page are especially heavy and will likely significantly slow the page.
How to reduce image size
To reduce image size you need to use images with the exact dimensions that you need. The smaller the image the smaller its size, hence only use what’s required!
Generally, a rule of thumb is that hero images need to be 1920 x 1080. Small images are often 1200 x 800. Many tools allow you to change the size of an image. Our favourite is Photoshop, but this can be done just as easily on free software.
Images also have a DPI value which indicates how many pixels there are per inch, and is a measure of resolution. The smaller this value is the smaller the image size will be. For online images 72 DPI is sufficient.
The next thing to consider is the image file type. Largely 3 formats are discussed in online images – JPEG, PNG and WebP. These formats have slightly different properties and the same image in the different formats will have a different size.
PNG images are the largest type of image, but they are required if you want an image without a background. JPEG images are an easy to work format that is much smaller than PNG but doesn’t allow clear backgrounds. WebP is a new online format that is even smaller than JPEG but that’s harder to work with if you ever need to redownload images and modify them! Generally JPEG format is sufficient if you want to reduce the size of images, and this is what most webmasters use.
The last thing to consider is compression. Usually exporting even from such tools as Photoshop doesn’t give the best compression. There are other tools that can compress images automatically. One of the best is TinyPNG. Just upload your image and it will compress it in seconds.
WordPress plugins such as Smush can also do this if you’ve already uploaded your images. Lossy is typically the compression that works best with these types of plugins. Often these plguins also have options to convert images to WebP, although its recommended that the option to retain the original JPEG / PNG image is selected.
Web Core Vitals and Image size
The Largest Content Paint and the Cumulative Layout Shift can both be affected by image size. LCP refers to the largest website component, which is usually an image.
CLS refers to the layout shift that occurs as website components are loading, which can create a poor user experience where things shift and move, and the user may accidently click on something unintentionally. To prevent CLS it’s important to set the exact dimensions of images required, rather than leaving them on ‘auto’ for the browser to decide.
Lazy loading, caching and CDNs
Even with reduction in size, images can significantly slow a website down. It’s important to allow cached versions of the website, that is, stored and ready to go versions, to be delivered from the closest possible location to the request. This is done through caching plugins such as WP Rocket and CDNs such as Cloudflare.
Lazy loading is a feature found in most caching plugins. Enabling this feature will allow website elements, including images, to load in the background without slowing the entire page down. In fact, the images below the fold won’t load at all until the user scrolls down, which can save a ton of load time.
On-page Image SEO
Images have 4 main components that should be considered for SEO. The file name, the image title, the alt text and the geotag. Generally the image file name, title and alt text can all be the same. These need to contain the keywords specific to the page, and each image should use unique keywords.
1. Image file name
The file name is the name with which the image is uploaded to the website, make sure you change this before uploading.
2. Image title
When you upload an image, you can change the image title in the media library.
3. Alt text
The alt text is the text used if an image doesn’t load. It can also be of assistance to blind web users. Again, this can be changed after uploading an image, in the media library.
4. Geotagging
The image Geotag, is a location-based set of coordinates that help determine where an image was taken. These coordinates can be modified using tools such as GeoImgr.
Example of image optimisation done right
- Image size adjusted to 1920 x 1080 as this will be the hero image for the banner
- DPI set to 72
- Format changed to JPEG
- Passed through TinyPNG for compression
- Geotagged to Melbourne using GeoImgr
- File name changed to ‘Physiotherapy Melbourne’
- Uploaded to media library
- Image title changed to ‘Physiotherapy Melbourne’
- Image alt text changed to ‘Physiotherapy Melbourne’
