Image optimisation is a relatively minor aspect of SEO, but it’s certainly not one you should overlook. In this article, I’ll list seven methods that you can use to optimise your website’s images – and discuss whether image optimisation is actually worth spending budget on.
1. Size Your Photos Correctly
Obviously, you don’t want your website cluttered with grainy, poor-quality images, but, at the same time, you don’t want pictures that are unnecessarily large. The larger an image’s file size is, the slower it will load, which increases your page’s loading time.
Because website speed plays a role in SEO, it’s important that your images aren’t too big. If you know the dimensions of how your image is going to displayed, you can export it from Adobe Photoshop as those dimensions. For example, if you know your image has a max-width of 300 pixels, then you could export it by entering ‘300’ under ‘Image Size’ in the ‘Export’ window (the height will adjust automatically).
Keep in mind that there’s a line here between cost and impact. If you use the same image in 10 different places across your site, don’t waste time exporting and uploading 10 images that match the exact pixel sizes required for those locations. By the same token, don’t use a one-gigabyte image in all of those 10 locations if you only need a 150-kilobyte image for nine of them.
2. Use JPEGs Where Appropriate
Although you may need to use image formats like PNG (for instance, when you need an invisible background on an image), your default format should be JPEG. JPEG images are universally supported and have a relatively small file size, which makes them preferable to heavier formats like PNG or GIF.
Next-generation image formats like JPEG 2000, JPEG XR, and WebP are available, but aren’t universally supported. This means that some browsers won’t show images saved in these formats, requiring you to also provide backup JPEG images, which can be complex and unnecessarily time-consuming.
3. Use Keywords in Your File Names
When you save your images prior to upload (or even once you’ve uploaded them), change the file name to a relevant keyword. For example, if you’re a hardware store selling a wrench, don’t save it as IMG0001.jpg, or productimage.jpg.
Try something like “small-[BRAND-NAME]-wrench.jpg” – this incorporates the manufacturer’s name, the actual product, and the product variant (in this case, size). This makes it easier for search engines to understand what the image displays.
4. Include Accurate Alt Tags
An alt tag (alternate text tag) is a HTML attribute available for images. Most CMSs make it very easy to add alt tags to images – this is normally done when you add them to a page.
You’ll see a field somewhere asking you for ‘Alt Text’; in Shopify, for example, hovering over a Product image in the Product editor will pull up four icons – Edit Image, Preview, Edit Alt Text and Delete. In WordPress, inserting an image via the ‘Add Media’ button will produce a popup like this.
Your alt text serves two purposes: one, it helps search engines understand what the image shows, and, two, it helps people using screen-reading technology. Your alt tag should be a short phrase that describes what’s in the image.
It should be specific, rather than generic – “small [BRAND NAME] ratchet wrench” versus “a close-up of a wrench”. Avoid keyword stuffing, keep it relatively short, and avoid unnecessary words/phrases like ‘a’, ‘picture of’, ‘the’, and so on.
5. Lazy-Load Images
When you click on a web page and your browser starts to load that page, the browser has to load all of the resources required for that page. This includes external CSS files, external scripts, images and so on. The HTML code for an image looks something like this:
<img src="https://examplesite.com.au/media/2020/my-company-logo.png" alt="My Company Logo" width="100%" height="auto">
There might be other attributes present within the img element, like class, title and so on, but the important one here is the src attribute (source). The URL indicates the source location of the image – basically, this is telling the browser where it can find the image to display it.
As soon as your browser starts to load the page, it retrieves the image from that URL and displays it. This is done via a HTTP request. The main reason we compress images is to increase the speed of the requests and make the page display faster.
What lazy loading does is load the image when the image enters the viewport, rather than when the page first loads. It’s used for below-the-fold images (images you won’t see until you scroll down). The idea is that, rather than each image on the page loading at the same time (known as ‘eager loading’), they only load once you need to see them.
A few years ago, the only way to lazy-load images was using JavaScript (via a native script or a plugin). Today, though, you can use the loading attribute to specify whether an image is eager- or lazy-loaded. (If you don’t add a loading attribute, images will eager-load by default.) To make an image lazy-load, add the following HTML:
<img src="https://examplesite.com.au/media/2020/my-company-logo.png" alt="My Company Logo" width="100%" height="auto" loading="lazy">
6. Compress Your Images
An image’s encoding (how data is packaged within the file) plays an important role in its size. Compressing an image can help reduce file size – but it’s important to balance potential savings with losses in quality. Lossless compression, where image quality is almost perfectly retained, is the best type of compression to use.
To losslessly compress images in Adobe Photoshop, click File > Export > Save for Web (Legacy). Then choose Preset (JPEG High), tick ‘Optimized’ and save it.
If you don’t have Photoshop, there are plenty of online size optimisation services available. Some CMSs also have ways to further reduce file size upon upload. WordPress, for example, has a huge range of plugins dedicated to image size reduction, such as Smush, WP-Optimize, and Speed Optimizer.
Keep in mind that, although plugins are typically easier to use, they do come with potential dips in performance and security. Whenever practical, I prefer to optimise images myself pre-upload.
7. Use HTML Image Elements
It might seem obvious, but using HTML img elements matters for SEO. Google can’t index images displayed via CSS attributes such as background-image, so don’t expect that hero header background to show up in search.
Most CMSs automatically place images as img elements, so this isn’t generally something you need to worry about unless you’re doing a lot of manual coding.
How Important Is Image Optimisation for SEO?
Technical SEO is often plagued by unnecessary spending. Too many agencies use tools like PageSpeedInsights and Ahrefs to auto-generate reports showing a range of ‘issues’ (like missing OG tags, short meta-descriptions, and unused CSS), which are then be forwarded to clients who don’t really know to interpret them. The result: big chunks of budget go into fixing up time-sinks that have, at best, a minimal impact on real-world search performance.
So: is image optimisation one of those time-sinks? Or is it something that can deliver tangible performance benefits?
In my experience, it falls somewhere in the middle. Yes, all new images should be optimised before they’re uploaded, and, yes, fixing images on an existing page can deliver big improvements to loading time, but (unless you have hundreds of unoptimized images) a slow page or two probably isn’t the cause of your SEO woes.
We know that Google recently deprioritised Core Web Vitals, clarifying that page experience was a ranking signal, not a system. In other words: having a site that loads fast still matters, but it’s definitely not on the same priority level as creating helpful content.
With that in mind, I wouldn’t generally bother allocating resources to optimising images on old pages. (Creating new content is a much better use of time and budget.) Instead, deploy a dedicated content hygiene program that ensures all pages/posts are reviewed on a biannual or annual basis; when you need to update a given page, include image optimisation on your checklist. That spreads the cost of changes over a much longer timeframe, which is better for both your budget and your political capital.
Summary
Optimising images is an SEO best practice – for good reason. Smaller files are better for your website, for your users, and for the planet, and properly optimised images have a better chance of showing up in organic search.
Here’s how you can make sure your images are fully optimised:
- Size your photos correctly.
- Use JPEGs where appropriate.
- Use keywords in your file names.
- Include appropriate alt tags.
- Lazy-load images.
- Compress your images.
- Use HTML image elements.
Of course, it’s important not to prioritise image optimisation above the real driver of SEO outcomes: high-quality content that helps searchers get the answers they need.
Want advice about the quality of your website?
Request a free website analysis – no follow-up sales calls or emails, just a seven-page PDF with actionable recommendations.
Changelogs provide transparency into when and why we make changes to certain articles. We do not log minor stylistic changes or grammatical fixes.
13 October 2023
- Major article overhaul.
