Well optimised images can make your website faster, more accessible, and more likely to rank higher in search results.

But how do you ensure your images are working for you? In this guide, we’ll walk you through the best practices for optimising images, enhancing both performance and search rankings.

Choosing the Right File Format

The file format you choose for your images matters more than you might think. Each format offers different advantages for speed and quality. Selecting the wrong one can slow down your site or reduce image clarity.

• JPEG is ideal for complex images and photos. It strikes a good balance between file size and quality.
• PNG works well when you need transparent backgrounds (i.e. logos or icons). However, PNGs are larger than JPEGs.
• WebP is a newer format that provides high quality and small file sizes – perfect for most web images. There are plenty of online JPEG/PNG to WebP converters available.

Compressing Images for Faster Loading

Large images can slow down your website, negatively affecting both user experience and search engine rankings. Compressing images reduces file size while keeping the image quality acceptable.

There are two types of compression:

• Lossy: Removes some image data to shrink the file size (used in JPEGs). Best for blog images and photos where a small reduction in quality isn’t noticeable.
• Lossless: Keeps all the image data but compresses the file as much as possible (used in PNGs). This is ideal when quality is a priority.

Using Descriptive File Names and Alt Text

File names and alt text help search engines understand your images. Without them, your images won’t contribute as effectively to SEO. The key is to be descriptive but concise.

• File names: Use words that describe the image and include relevant keywords. For example, “red-shoe.jpg” is better than “IMG_1234.jpg”.
• Alt text: This provides a textual description of the image, used by screen readers and search engines. Include keywords but don’t overstuff.

Image Resizing and Dimension Management

Uploading large, high-resolution images when not necessary can slow down your site. Resize your images to the dimensions needed for display.

• Resize before uploading: Don’t upload a 2000px wide image if it will only display at 500px on your website. Resize it to 500px before uploading.
• Use responsive images: With tools like srcset and the picture element, you can serve different image sizes depending on the device being used.

Mobile Optimisation

More than half of all internet traffic comes from mobile devices. Ensuring your images are mobile-friendly is crucial for SEO and user experience.

• Use responsive images that adjust based on the screen size.
• Compress your images so they load quickly, even on slower mobile networks.
• Lazy loading: Only load images when they come into view, improving initial page load speed.

Lazy Loading and Page Speed

Page speed is a major ranking factor for Google. Lazy loading is an effective technique to boost performance by only loading images when they become visible.

• To implement lazy loading, add the loading="lazy" attribute to your image tags.
• This reduces the initial load time, especially for pages with many images.

Structured Data and Sitemaps

Helping search engines understand your images can improve their chances of being displayed in search results. Use structured data and image sitemaps to boost SEO.

• Structured data (Schema Markup): Adds context to images, making them more likely to appear in rich search results.
• Image sitemaps: Submit a sitemap to Google Search Console to help search engines discover your images.

Sample Schema Markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://thiswebsite.com/image-path", 
  "name": "Female President in the Oval Office",
  "description": "A drawing of a female president sitting behind the desk in the Oval Office, surrounded by classic decor such as the American flag, bookshelves, and a large window.",
  "author": {
    "@type": "Person",
    "name": "Artist Name"
  },
  "datePublished": "2024-10-16",
  "license": "https://thiswebsite.com/image-license",
  "representativeOfPage": true,
  "thumbnailUrl": "https://thiswebsite.com/thumbnail-path",
  "width": "1024",
  "height": "1024"
}
</script>

Good and Poor Alt Text

Imagine you write an article about a president. How would you write the Alt text for the image?

Poor alt text for an image of a president would fail to describe the image adequately or provide irrelevant, vague, or overly generic information. Here are some examples of poor alt text:

Good Alt Text

For an image of a president, the alt text should be descriptive, concise, and relevant to the context in which the image is being used. Here are a couple of examples depending on the situation:

1. Alt Text: Portrait of President [insert Name] in the Oval Office – This provides enough context to describe the image.
2. Alt Text: President [insert Name] delivering a speech at the United Nations – This version is short, descriptive, and focuses on the president’s task in a professional context.
3. Alt Text: President [insert Name] shaking hands with [insert Name] to formalise a peace agreement – adding context to their diplomatic negotiations.

Poor Alt Text

1. Alt Text: “Image12345.jpg” – This is unhelpful because it doesn’t describe the image at all and adds no value for SEO or accessibility.
2. Alt Text: “The current President sitting for a president image with president photographer in the official presidents office”. – The example above is excessive as it tries to cram in too many keywords.
3. Alt Text: “Man giving speech”. – This fails to specify who the person is, where they are, or what’s happening, which diminishes the context.
4. Alt Text: “The president is wearing a blue suit, standing behind a podium, delivering a speech, and there are people in the background clapping while he speaks at an outdoor event”. – This is too descriptive and adds unnecessary details that don’t contribute to the primary understanding of the image.

Conclusion

Image optimisation is an essential part of creating a user-friendly, high-ranking website. By following best practices like choosing the right format, compressing images, using descriptive file names and alt text, and implementing responsive design, you can significantly enhance your site’s SEO and performance.