Image optimisation is important, for appering in image based searches and for on-site page load times. An important factor to consider when weighing the SEO value of your site.
Using large images affects the user experience and image SEO, and it will cause Google to penalise your website ranking.
Low quality images will appear fuzzy, which will make your site look less polished and likely cause disengagement of users.
Our best-practice approach to image optimisation
- Images resized for viewpoints
- The use of image ‘Titles’ and ‘Alt’ Tags
- Image types and the next-gen formats
- Image meta stripping
Optimised Images Resized For Viewpoints
Images can have a huge impact on loading times, A large responcive image 1920 x 1080 (HD) displayed as a thumbnail still has to load the complete large image file. Three or four of these types of oversized images will vastly increase your page time. Appreciate the fact that 40% of users will abandon a site if it takes longer than 3 seconds to load!
Image Alt and Title Tags
What is an image Alt Text?
Alt text (alternative text), also known as “alt attributes”, “alt descriptions”, are used within HTML to describe the appearance and function of an image on a page.
1. Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. Rule of thumb, improved accessibility = improved SEO
2. Alt tags will be displayed in place of an image if an image file cannot be loaded.
3. Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.
Image title attribute doesn’t (at present) have any impact on keyword rankings because search engines don’t crawl them. Having said that, image titles are displayed when your mouse hovers over an image in some browsers so it does improve user experience and accessibility.
Image Types and Next Gen Images
For images, the right format doesn’t exist; it depends on the kind of image and how you want to use it. As a rule of thumb
- JPEG’s for larger photos or illustrations: it will give you good results in terms of colors and clarity with a relatively small file size;
- PNG if you need to preserve background transparency, however PNG’s tend to be much larger file sizes so work best with smaller pictures and icons
- GIF’s set to 256 colours, this older format is usually preserved for short animation, aka the animated gif.
Next-Gen Image Formats
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.
Source: Developers Google
Stripping Meta Data From Images
Most images hold metadata stored within a file, which may include when the file was created and last edited.
Image files actually contain several file types within them. Different types of metadata are stored in different types of files. For example, in addition to visual data, JPEG images might also contain:
- EXIF files, which hold information about the camera settings and manufacturer
- IPTC files, which hold user-added metadata
- 8BIM files, which are added by Photoshop
- ICC files, which contain information about embedded color profiles
Recommended image meta stripping tools