How to optimise images for better B2B website speed

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.

Reduce your image file size

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:

1. Reduce the resolution: lowering the quality of an image greatly reduces file size
2. Compress the picture and remove unnecessary metadata
3. Crop a pic or resize it. If you upload a 1000 x 1000 picture and it only displays at 100 x 100 pixels, your file is ten times larger than it needs to be.

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.

Choose the right file type

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:

• If an image is black and white, convert it to a greyscale colour space before saving.
• The ideal screen image resolution is 72 pixels per inch.
• Reduce ‘quality’ to 85 or lower. For quality values higher than 85, the image file quickly becomes larger, with negligible visual improvement.
• JPEGs cannot display translucent elements. If there are areas in your image that you wish to be see-through, opt for a PNG format instead. 

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.

Optimise your thumbnails

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.

Should you be using an image sitemap?

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.

Test your site speed

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.

Rename your image file

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.

Optimise your Alt-text

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:

• Use plain language
• Describe the image context
• Don’t keyword stuff
• Don't use alt attributes for web design features (for example, an arrow graphic)
• For product images, include model numbers or serial numbers
• If you are showing multiple angles of the same image include that information in the alt text. This will help searchers looking for a specific view

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.