Image Optimisation for SEO

Image optimisation is an important aspect of on-page SEO. Fortunately, it’s one of the easier aspects of on-page SEO to implement.

After reading this guide, I’m confident you’ll be able to optimise your website’s images in a manner that benefits both your audience and your SEO rankings, including:

• Choosing the right file types for different images on your website;
• Resizing/cropping images for smaller file sizes;
• Compressing images for smaller file sizes;
• Adding helpful file names and image alternative text that is also SEO friendly;
• Implementing lazy loading so your images don’t load unless they are going to be seen by the end user.
• Understanding when you’re a bit out of your depth and it might be time to contact a web developer or SEO expert for assistance.

Let’s get started.

Definition: What is Image Optimisation?

When I talk about image optimisation, we’re looking primarily at improving image accessibility and image loading speed.

The process of optimising images for SEO involves 3 main steps:

1. Preparing images into their ideal formats.

2. Compressing images so they have the smallest possible file size whilst maintaining an acceptable level of visual quality.

3. Uploading images to your website and adding the necessary information to make the images accessible to humans, and provide additional context to search engines.

The goal here is to enhance website performance, improve user experience, minimise bandwidth usage and impact search engine rankings. 

What Are The Benefits of Optimised Images?

Optimising website images has the following positive impacts on your site:

Improved Page Loading Speed

When images are properly optimised, their file sizes are reduced while maintaining an acceptable level of visual quality.

Smaller image files load faster, which directly contributes to quicker overall page loading times which comes with a slather of extra benefits.

Enhanced User Experience

Following on from the first point, a fast-loading website will significantly improve the user experience (especially on mobile phones).

When users visit a website, they really want (and expect) a seamless browsing experience. Images that load quickly enable users to access the desired content without frustrating delays.

A positive user experience leads to longer page visits, lower bounce rates, and higher chances of users completing a major action on your site such as buying a product, enquiring about a service or subscribing to a list.

Improved Interactions with Search Engines

A faster-loading website makes it easier for search engines like Google to crawl and come back in future to re-crawl the site.

Search engines have a limited amount of resources to dedicate toward the discovery and crawling of websites on the internet, so it’s beneficial to make your website as easy to crawl and index as possible.

The smaller your website’s overall filesize is, the more likely that search engine spiders will be able to successfully crawl and render the entire page with ease. This may also improve your overall search engine rankings.

Boosts Your Site’s Ability to Rank in Search Results

Search engines consider various factors when ranking websites in search results, and the loading speed of a page is one of them.

Google has indicated that site speed is a ranking factor.

Compressed images contribute to faster page loading times and improved ‘Core Web Vital’ signals which can help to increase your search rankings.

How Does This Help SEO?

Images that have optimised filenames, ALT text and image metadata will help webpages be more accessible for visually impaired users and also rank better in the search results.

This is because search engines can rank a page more accurately when they better understand the subject matter, context and relevance of your images + content.

Image Optimisation Techniques for SEO

Choose the Optimum Image File Format

Choose the appropriate file format for your images before uploading them to your website.

For photographs and images with many colours, use the JPEG/JPG format.

For images with transparency or simple graphics, use the PNG format.

For images that contain animation, use the GIF format.

The newer WebP format is also gaining popularity due to its superior compression and quality.

Leverage Image Compression

Compress images on your site to reduce their file size without significantly sacrificing quality. 

This helps improve page load times, which is important for user experience and SEO.

You can do this using a tool that leverages the lossy or lossless image compression algorithms to reduce image file size without losing visible image quality.

There are various web-based tools available to compress images, such as ShortPixel, TinyPNG, and Compressor.io.

If your website is running on WordPress, you can try one of the following plugins to achieve this: Imagify, WPsmush, or Optimole.

Advanced users who aren’t using WordPress may also opt to use Clouflare’s Image Optimization service.

Add Image Dimensions

It’s pointless having images on your website that are far larger than their maximum display size.

Using oversized images and relying on HTML or CSS to resize them can slow down page loading. Resize your images to the dimensions they will be displayed on your website.

Do this by looking at each image on your site and determining the absolute largest size (in width) that each image could be displayed. Once you know, download and resize each image to this size. The WordPress plugin Imagify can automate this process.

Specifying image dimensions in your HTML will help the browser with proper layout rendering. If you have a WordPress website, the plugin WP Rocket or Specify Image Dimensions Plugin can help with adding missing image dimensions to your HTML.

ALT Text (Alternative Text)

Alt text is a brief description of an image that is displayed when the image cannot be loaded or when a screen reader is used. It’s important for accessibility, as well as for SEO.

When adding ALT text, create text that accurately describes the image and includes relevant keywords if possible. You’ll be aware of keywords relevant to your page if you’ve done the necessary basic keyword research.

Please avoid keyword stuffing here because it will not help your SEO and will make for a poor user experience.

Descriptive File Names

Avoid using default or generic filenames for your images. Use descriptive and meaningful filenames for your images.

You can also include keywords in your filenames if they are relevant to the image and the page itself. Check out our guide on using keywords on your web pages for more information.

This provides search engines additional context about the image content and can help your images rank in Google Image Search.

Here are two examples:

• image123.jpg – instead use a filename like blue-widget-product.jpg
• michael.jpg – instead use something like michael-seo-specialist.jpg

Lazy Loading

Implement lazy loading for images, which means images are only loaded when they come into the user’s viewport as they scroll your site.

This can significantly improve initial page load times, especially for pages with numerous images.

Lazy Loading is meant to be native to WordPress these days, however, it can be implemented using plugins such as WPRocket, Lazy Loader or Autoptimize if required.

Content Delivery Network (CDN)

Consider using a CDN to host and distribute your images.

CDNs store your website’s images on various servers around the world. This improves loading time by reducing the physical distance between the user and the server.

A CDN is most helpful for business websites and online stores serving an international audience. 

Notable CDNs that you could implement for your website include Cloudflare’s CDN, WP Rocket CDN or Bunny.net CDN.

Make Use of Responsive Images

Implement responsive design principles to serve different image sizes based on the user’s device and screen size.

This part can be a little bit technical so you may need the help of a web designer/developer.

Responsive images can be achieved in a couple of different ways, such as:

• Using media queries in your CSS;
• Using the srcset attribute in your HTML markup;
• Adding images using the WordPress editor will natively leverage the srcset attribute for your images.

This ensures that mobile users are not burdened with having to download large, desktop-sized images for their tiny screens.

XML Image Sitemaps

Include images in your XML sitemap to help search engines discover and index them more efficiently.

This can improve the visibility of your images in the Google image search results. Here are a couple of tools you can use to add images to your XML sitemaps:

• Screaming Frog – generate image sitemaps for your website that you can download and then add to Google Search Console.
• If you are on WordPress, the SEO plugin called Yoast SEO is capable of automatically adding images to your XML sitemaps.

Image Optimisation Is An Easy Win For SEO

By following the aforementioned image optimisation techniques, you can strike a balance between visually appealing content, optimal page load times and search engine friendliness.

Optimising your website’s images is essential for creating a seamless user experience, reducing bounce rates, and improving your website’s crawlability and overall performance in the search engine rankings.

 

Need Help With Your SEO? Contact e-CBD

Enhance your online visibility and connect with potential customers with a robust SEO strategy delivered by our in-house team of digital marketing and SEO experts.

For further insights on effective on-page SEO techniques, reach out to a Gold Coast SEO Agency like e-CBD.

Contact us for a phone consultation or arrange a meeting to explore how we can enhance your online presence and improve your visibility in Google Search.

Reach us at (07) 5531 3810 or submit an online inquiry today.