You might be missing out on an easy opportunity to improve your company’s website performance: image optimisation.
Google recommends image optimisation as one of the top three fixes for slow page load time. Images make a staggering difference and often account for most of the bytes downloaded on a page.
Including at least one image in a post can potentially double share rates, and help readers to retain more information than text alone. Images deliver the core message of your content.
Removing images from your site isn’t viable, but reducing their weight is.
Following web design best practices, a single page should never be larger than one megabyte.
There are three simple ways to optimise your images before uploading them to your site:
To reduce your image size, you can either use a premium image editing tool like Photoshop, or open-source software like Gimp. There are also in-browser tools available, for example, picresize.com.
When exporting images with Photoshop, use the “Save for Web” command to reduce the file size. This will compress the image.
Adjust the image to the lowest file size you can manage without compromising the image quality. There is a preview window that will help you to achieve the right balance while making this decision.
Thorough image optimisation involves removing hidden information from pictures. Many images, especially those you have taken in-house, contain unnecessary metadata: geo information, camera specs, colour profiles and so on. You can use photo editing software to strip extraneous information.
Can’t get your hands on Photoshop? For Mac users, there is a free program available called ImageOptim which will compress images, remove metadata and take out superfluous colour profiles. For Windows and Linux, the website offers alternative software.
When saving any image, you will need to specify a file type. So, what is the best file extension for optimised web images?
The three most popular image file types on the internet are: JPEG (.jpg), GIF (.gif), and PNG (.png). These form 96% of the web’s image traffic.
Is your image highly detailed, like a photograph, or something more simple and graphical, like an infographic or logo? A photograph is best delivered online as a JPEG. Logos, infographics and any images that are rendered with sharp lines are probably best served as a PNG (or .SVG)
JPEG is a lossy format. The compression process removes detail from the image, causing blurring and pixelation. This results in significantly smaller file sizes, at a cost.
Best practices:
PNGs support more colours than GIFs and don't degrade over time with re-saves, unlike JPEGs.
A PNG-24 image can be over three times larger in file size than a PNG-8, simply due to the colours used. Experiment with both save types and determine which is most suitable for you.
GIF images are lower quality than other image types. The upside is that they support animation.
All image editing softwares worth their salt can save images in the file formats discussed above.
Don't forget to optimise other versions of your image.
Thumbnails can hamper page speed, especially if they have not been resized correctly. Before uploading them, make sure you have resized your image to match the final display size.
It is also good practice to make sure your alt-text varies slightly from that which you used for the original image.
If you are publishing images that you would like to be discoverable on their own, such as product images, you may want to consider creating an image sitemap.
Google will receive extra metadata regarding the images contained on your website.
This information may include the type of image, subject matter, caption, title, geographic location, and license. The process also enables site owners to create an image hierarchy, which will have an impact on what shows up in image search results.
There are several sites you can use to test your site speed, and many of them provide good guidance on how to fix a lot of the issues.
You can test your site speed with this tool by Google. Reducing page load will reduce bounce rates and keep your buyer personas on your site for longer.
Run through your website periodically to check up on your images; sometimes image optimisation falls through the cracks.
There are some further image optimisation tactics you can adopt to improve the overall user experience on your site.
Creating descriptive, keyword-rich file names is a necessity. Search engines crawl your image file names as well as the content on your page.
With the help of artificial intelligence, search engines are getting better at understanding visual content like image and video. But it is best practice to use simple, descriptive language to provide your images with context.
Imagine how your customers search. What naming conventions would they use to find your image? They probably won’t be typing DCM10989.jpg if they’re on the hunt for a picture of a cat.
You can dig into your website analytics to see what keyword search patterns your customers follow. Identify common language and replicate it in your file naming process. However, be wary of keyword stuffing - your description should be genuinely relevant to the picture.
Strategically renaming your image files can help your pages and images to rank higher on search engine results.
Alt-text describes images when a browser can't properly render them. It also improves accessibility by providing context for people using screen readers. You can normally see image alt attribute text when you hover over an image.
Here are some best practices for writing alt-text:
Alt attribute text adds SEO value to your B2B website - relevant keywords will help you rank better in search engine results.
Optimising your images is one of the best ways to speed up page performances and improve your search engine optimisation - allowing your buyer personas to find and engage with you more easily.