Image Optimisation and SEO - Dimensions
Image Optimisation and SEO - Dimensions. In Part 1 we covered the use of file names and the "alt" tag. In part 2, we'll talk about the effects of file size, file type and the dimensions of the image on the usability of your site.
There are a number of reasons to be concerned about the filetype, size and dimensions of your images.
- Google uses page load time as a factor in their ranking algorithm.
- People leave sites that load slowly (Bounce)
- Amazon have claimed that the cost of people leaving their site due to slow page loading is $1.6 billion a year in list sales
In E-Commerce, reducing the bounce rate on your site is very important. People leave pages that load slowly. You can't control every aspect of the loading speed, but you can optimise your site to reduce the factors that might contribute.
The challenge here is to get the smallest file size possible without sacrificing the quality of the picture. Smaller images load faster and the best format in this respect is the jpeg. Gif's are smaller but sacrifice quality, png are a possible alternative, but jpeg remains the best mix of size and detail.
One point to remember, the 72 dpi myth - images intended for print will generally be output at 300 dpi as this will produce large high def files suitable for printing. For the web specify the image size in pixels, the ppi setting is irrelevant on computer monitors where the size of the whole display is measured in pixels. You cannot alter the number of pixels displayed on a computer screen by setting an attribute in the picture.
There are three image formats in common use on the internet, JPEG, PNG and GIF. For the reasons described in the previous paragraph, JPEG is the best image type to use in e-commerce.
Gifs are often used for icons, decorative borders and graphics because the actual size of the image requires less definition and the format supports very small file sizes and therefore loads very quickly.
PNG is a relative newcomer and has the advantage of supporting transparent backgrounds. For this reason it is quite popular in e-commerce. There are two variants, PNG-24 and PNG-8. PNG-24 supports higher quality at a cost of considerably larger file size.
Dimensions are subtly different to size. In HTML, I can specify the dimensions that I want an image displayed at. However, the original image will still need to be downloaded. If I upload an image of 1200 x 1200 px, and specify in my HTML that it will be displayed at 400 x 400 px then that is what the viewer will see, but it is the browser doing the transformation and the loading time is dependent on that 1200 x 1200 image.
It is better, if I want an image displayed at 400 x 400, to resize that image in Photoshop and upload it as a version. That way, the page will load faster.
Some E-Commerce applications such as Shopify, will compress the image automatically, Platforms such as WordPress will resize the image on upload so that there are thumbnails, full size and medium size versions on the server.
Thumbnails can be an issue. E-commerce pages with lots of products can load slowly. To minimise page load time, the thumbnail for each product should be as small as possible. As the detail is not usually visible in a thumbnail, it is worth considering GIF as a format. Generally a click on the thumbnail will open up the image in a larger size. That needs to be a link to a JPEG, so that detail can be seen.
An aside about Google - the image you want to be found in a search is the full sized image - do not fill in the alt tag on the thumbnail and if possible make sure it has a different name - simply append "thumb" to the filename so as not to confuse the indexer.
Site maps are very important to Google and other search engines - especially as they will list images a crawler may miss - those in popups for example. Refreshing your sitemap after every major site update will ensure that Google updates its indexes accurately.
Some rules of thumb
- Jpegs for images needing detail
- Gifs for thumbnails
- Size images according to the dimensions required
- Don't use the alt tag on thumbnails
- Refresh your sitemap periodically