If you’re not optimizing images for your website, you are hurting your search ranking — and costing your business potential customers and clients.
The speed at which a page loads is a crucial factor in how it performs based on Google’s most recent updates. Sites are ranked more and more by user experience, which Google determines by user behaviour when accessing and engaging with your site. If someone visits your site and leaves quickly leaves without taking a second action (referred to as a “bounce”), this can tell Google that the site didn’t live up to expectations.
As you can imagine, a slow-loading site is going to cause potential visitors to give up.
This article was originally published on Forge & Smith in 2016. This article is for reference and archive as the information may be out of date. For the latest image optimization tips – get in touch!
How to optimize images
Start by checking your website speed load in Google Analytics or using Google PageSpeed Insight.
Images are the heaviest load items for most websites, so they need careful attention to ensure they don’t cause lengthy delays that will annoy mobile visitors. You can have high-quality text content, but if no one waits around long enough to read it, it becomes worthless.
Most digital marketing strategies include regular updates to news and blog content — you can get our site audit checklist and spreadsheet in this content strategy article). One of the best ways to enhance your old content and make it enticing is with visuals. But if the images are slowing down your site’s load time, they can do more harm than good.
The key isn’t to reduce the use of images or to stop using them altogether, but to optimize them! We’ve put together a checklist for optimizing images on your website.
1. Image dimensions
The first step is reviewing where the image will appear within the site — and what dimensions it requires. As we are dealing with responsive browser widths, it is the width of the image that is the most important (the height follows in proportion).
Most blogs will have different dimensions, so make sure you measure the image location! There are tools that will help you measure the actual screen pixel dimensions such as Page Ruler and Jing.
For the Forge and Smith blog, the largest width for in-text images is 780px wide. If you’re on a desktop, you can try extending your browser width — it will always cap out at 780px maximum (without zoom). On mobile devices the image scales down to 480px (or even smaller), but never larger.
Retina displays will show twice as many pixels (1560px for the image above). It is important to consider if the extra load time is worth the payoff of loading these crisper images.
2. Image format
There are two predominant image formats for the web that you should be using (animated GIF files aside):
- JPG: Generally the best format for most types of images, due to its compression options (covered in the next section).
- PNG: Great for Illustrations, or diagrams with lots of flat, solid colour blocks (such as infographics and icons).
As a general rule JPG is the best fallback, but you can also save a graphic in both versions and see which file size is smallest.
Special note: JPG format is now considered outdated by Google. PNG has many compression options now which make it ideal for all image formats. The new WEBP format is recommended by Google (note added January 2020).
3. Image compression
JPG images provide the best compression options for photographs. I use Photoshop to optimize images, but there are many free tools out there that achieve similar results.
There is a range of JPG compression settings with quality from 1 to 100 (notice the difference in colour and detail):
The trick here is to find the right balance between a good-looking image and a compressed file. I use a range between 60-80. Around 50 or below you will see image inconsistencies and artifacts.
4. File size
All of this optimizing is intended to reduce the file size, so before uploading make one final check that the image size is suitable. Anything over 400kb should raise a flag, and indicates that you probably haven’t optimized it.
Optimizing images for your website is an important step to ensure the best customer experience. A happy customer stays on your website longer and views more pages while visiting. These behaviours tell Google that your site is high-quality and helpful — and that it should be shown higher up in search results.
