Guide to great image optimisation

It’s a well known fact that a slow website can significantly impact its effectiveness, and that images (and other media) can be a major factor in the overall performance of your site.

If we think about your sites users (always our first priority), a poor experience resulting from downloading large images can effect customer acquisition, satisfaction, conversion, and retention. It’s a subject that needs careful attention and is perhaps more appreciated when we consider the bigger picture;

• SEO – it’s important that search engines can efficiently crawl your website in order to update their indexes, but also fast websites provide a better user experience and can achieve superior rankings than slow websites.
• Bandwidth – savings can be made on bandwidth usage fees charged by your agency or hosting provider.
• Usability – sites become faster and easier to use if pages load quickly, but also become easier for website editors to manage and maintain.
• Website Speed – As outlined your website’s loading time is a major factor in people either staying or leaving the site and never returning.

Optimisation tools

Adobe Photoshop is the industry standard image manipulation tool and has specific features built in to optimise images for use online, but it’s specialist and complicated software which comes at a price. There are however several free online tools which can do an equally good job of compressing and resizing your images.

• resize-photos.com is a free online tool for resizing and compressing images in .jpg, .png, .gif, .bmp or .psd formats.
• optimizilla.com enables you to optimise and compress JPEG and PNG images to the minimum possible size while keeping the required level of quality.
• tools.dynamicdrive.com/imageoptimizer/ lets you resize, compress and convert images between different formats.
• Squoosh an experimental web app from Google. Offers a quick and easy way to ‘Squoosh’ images down to smaller file sizes.

Image formats

This is a complex area and there are pros and cons of each different format, however, to keep it simple;

• PNG should only be used when a transparent image is required to sit over the top of another graphic, for example a logo which sits over a background image. Any PNG which isn’t transparent should be resaved as JPG.
• JPG is the most common format and is the easiest format to crunch to smaller size. Jpegs are the best format if the image contains a lot of colours and/or detail.
• GIF is now considered a legacy format and should only be used when images animate.
• TIFF, PSD, AI, EPS, WMF and EMF are not supported formats online and should not be used

Sizes

There are no set rules for sizing images for use online as every site is different, however there are some basic guidelines which include;

• If an image is used at 300px wide we recommend you add an image which is the same size, and don’t add an image which is 1000px wide and reduce the scale. Scale and size are very different.
• Don’t forget responsive, it might be that a section on your site displays in 4 columns on a desktop but one column on a mobile or tablet, so a 300px image on the desktop is displayed larger on a tablet and therefore needs to be added to the site at the larger size.
• You can’t scale up images without losing quality. If you add an image which is 400px wide and display it on the page at 600px wide it won’t look good.
• The average site width is 1000px wide and the maximum site width typically around 1600px, so if you need an image to fill the whole width of the screen, we’d recommend going for at least 1600px, maybe even 2000px
• In an ideal world, a 300px x 300px image would not exceed 80Kb and a full width image at 2000px x 450px no more than 500Kb.

Notes

• CMS’s can and often do optimise images as they’re added, however it’s best to fully optimise each image before it is uploaded.
• If you’re commissioning new photography, consider asking for a copy of the images from your photographer as web-optimised images at 72dpi – instead of the standard 300dpi used for print.

Best practice

• Use sensible filenames for your images and include your SEO target keywords, for example ‘DSC001.jpg’ isn’t useful for users, search engines or CMS users, however ‘cambridge-web-design-1.jpg’ is much more helpful. Also don’t use special characters or spaces in file names.
• Add image ‘Alt-tags’ for your images (text descriptions of your image) which explain clearly what the image is, for example instead of using ‘Pie chart image’ use something like ‘Pie chart showing 60% of CMS-driven websites are powered by WordPress’.
• Make sure your images are relevant to the page and are useful for the user.
• Ensure that you’re allowed to use your images and they’re not rights protected.
• If an image needs to be opened to view in more detail, consider using a small image for the button which links to the higher-quality version.

If you would like more advice on website image optimisation please feel free to contact Granite 5 on hello@granite5.com or call on 01223 208008.