Image SEO: Alt Text, File Size, Formats and Lazy Loading

Images make pages easier to understand and more engaging. They can also bring visitors from Google Images and visual search features. But they are usually the heaviest part of a page, and unoptimised images are one of the most common reasons sites are slow.

Image SEO is about getting both sides right: making images understandable to search engines and accessible to everyone, while keeping them fast.

Write useful alt text

The alt attribute describes an image in words:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

Alt text has three jobs:

1. Accessibility – screen readers read it to people who cannot see the image
2. Fallback – browsers show it if the image fails to load
3. Understanding – search engines use it, together with the surrounding text, to work out what the image shows

How to write good alt text

• Describe what the image shows and why it is on the page
• Be specific: “red Brompton folding bike folded next to a desk” beats “bike”
• Keep it concise – usually under 125 characters
• Do not start with “image of” or “picture of”; screen readers already announce it as an image
• Use relevant keywords only where they describe the image naturally

Decorative images

Purely decorative images – dividers, background flourishes – should have an empty alt attribute: alt="". That tells screen readers to skip them. Leaving out the attribute entirely is an error; some screen readers will then read the file name.

Use descriptive file names

IMG_4821.jpg tells nobody anything. brompton-folding-bike-folded.jpg gives search engines another clue. Use lowercase words separated by hyphens.

Choose the right format

For most sites, serving WebP or AVIF with the <picture> element (and JPEG as a fallback if needed) is the biggest single improvement:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

Most CMSs, image plugins and CDNs can convert images to modern formats automatically.

Resize and compress

A common mistake is uploading a 4,000-pixel-wide photo straight from a camera and displaying it at 800 pixels wide. The browser still downloads the full file.

• Resize images to the largest size they are actually displayed at (double it for high-density screens if needed)
• Compress them – quality settings around 75–85% are usually indistinguishable from the original
• Aim for most content images to be under 150–200 KB, and hero images ideally under 300 KB

Serve responsive images

Phones do not need desktop-sized images. The srcset and sizes attributes let the browser choose the right file:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress and most modern frameworks generate these automatically.

Set width and height to prevent layout shift

If an image has no width and height attributes, the browser does not know how much space to reserve, so content jumps when the image loads. That hurts Cumulative Layout Shift (CLS), one of the Core Web Vitals. Always include the image’s dimensions (or use the CSS aspect-ratio property); responsive CSS can still scale it.

Lazy-load images below the fold

loading="lazy" tells the browser to load an image only when it is about to scroll into view:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Use it for images further down the page, but not for the main hero image. Lazy-loading the largest image in the first screen delays Largest Contentful Paint. For that image, consider fetchpriority="high" instead.

Help images get found

• Place images near relevant text, and add captions where useful – Google uses the surrounding content to understand images
• Use standard <img> elements rather than CSS backgrounds for meaningful images, so search engines can find them
• Add images to your XML sitemap, or an image sitemap, for large image libraries
• Include an image in structured data where relevant (Product, Article, Recipe)
• Set an og:image so shares on social networks show a strong preview

Image SEO checklist

• Descriptive alt text on every meaningful image; empty alt on decorative ones
• Descriptive, hyphenated file names
• WebP or AVIF format
• Resized to display size and compressed
• srcset for responsive delivery
• Width and height attributes set
• Lazy loading for below-the-fold images, not the hero
• Long cache lifetime set on the server or CDN

Image SEO for e-commerce

Product images do a lot of selling. For shops:

• Show several angles and the product in use. Google Images and shopping results favour clear, high-quality product photos.
• Use a consistent, clean main image for each product – it is often used in shopping results.
• Write alt text that identifies the product and variant: “Trail Runner X women’s running shoe in teal, side view.”
• Include images in Product structured data using absolute URLs.
• Zoomable images should load the large version only when needed, not on page load.

Image SEO for blogs and publishers

• Use original images where possible. Original photos, diagrams and charts can earn links and stand out in image search; stock photos are used on thousands of sites.
• Add captions when the image conveys information. Captions are among the most-read text on a page.
• Create shareable diagrams and infographics for complex topics, with the key information also written in text.
• Choose a strong featured image of at least 1200 pixels wide. Google Discover favours large, high-quality images and you can allow large previews with the max-image-preview:large robots setting.

Background images and CSS

Images set with CSS background-image are invisible to search engines as content and have no alt text. Use them for decoration only. If an image carries meaning – a product, a chart, a team photo – use an <img> element.

Image CDNs and automatic optimisation

Managing several sizes and formats by hand quickly becomes impractical. Image CDNs and services (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer and others) and many WordPress plugins can:

• Convert images to WebP or AVIF automatically
• Resize on the fly for each device
• Compress intelligently
• Cache images close to visitors

If you use one, check that image URLs stay stable and crawlable, and that the CDN does not block Googlebot.

Measuring the impact

Open Google Search Console’s Performance report and switch the search type to Image to see how many clicks and impressions your images receive and for which queries. Track Core Web Vitals in the same tool to confirm that image optimisation is improving Largest Contentful Paint and Cumulative Layout Shift.

Common mistakes

1. Uploading camera-sized photos and letting the browser shrink them
2. Missing alt attributes, or alt text stuffed with keywords
3. Lazy-loading the hero image
4. No width and height, causing layout shift
5. Text embedded in images instead of written in HTML – it is invisible to search engines and screen readers and cannot be translated
6. Blocking image folders in robots.txt

Key takeaways

• Write alt text that describes what an image shows and why it is there; use empty alt for decorative images.
• Serve WebP or AVIF, resized to the displayed size and compressed.
• Always set width and height to prevent layout shift.
• Lazy-load images below the fold but never the main hero image.
• Use real img elements for meaningful images, near relevant text, with descriptive file names.
• Check Search Console’s Image search data to measure the traffic images bring.

Frequently asked questions

Does alt text help rankings?

It helps images rank in Google Images and adds context to the page. Its main purpose is accessibility, and writing it for people usually works best for search engines too.

Should I use WebP or AVIF?

Both are well supported. AVIF often produces smaller files; WebP encodes faster and is more widely supported by older tools. Many sites serve AVIF with WebP as the fallback.

Do image file names matter?

A little. Descriptive file names are a small extra signal and make your media library easier to manage.

Is lazy loading good for SEO?

Yes, when used correctly. Native loading="lazy" is supported by Google. Just do not lazy-load images that are visible when the page first loads.