Image optimisation: alt text, formats, sizing and lazy loading

Images do real work on a page. A photo of a product shows its colour and texture, a diagram explains a process faster than a paragraph, and a screenshot shows exactly where to click. Images are also usually the heaviest part of a page, and an unoptimised hero image is one of the most common reasons a page feels slow. Image optimisation is about getting the value without the cost.

Alt text

The alt attribute provides a text alternative for an image. Screen readers read it aloud to people who cannot see the image, browsers show it when the image fails to load, and Google uses it, along with the surrounding text, to understand what the image shows.

Good alt text describes the image in the context of the page, briefly and specifically.

<img src="red-ceramic-teapot.jpg" alt="Red ceramic teapot with a bamboo handle" width="800" height="600">

Decorative images, such as a divider line or a background flourish, should have an empty alt attribute (alt=""). That tells screen readers to skip them, which is better than reading out "decorative line" on every page.

File names and placement

Descriptive file names such as red-ceramic-teapot.jpg give Google a small extra hint and are easier for your team to manage than IMG_00234.jpg. Google's image SEO guidance also recommends using standard HTML <img> elements for important images. Images loaded only as CSS backgrounds are not indexed as images, so a product photo should be an <img>, while a decorative pattern can safely be a background.

Placement helps understanding. An image near relevant text, with a caption where useful, gives Google more context than the same image floating on its own.

Formats and compression

Modern formats such as WebP and AVIF usually produce much smaller files than JPEG or PNG at the same visual quality. Most modern browsers support them, and many content systems and CDNs can convert images automatically. Whatever the format, compress images at a sensible quality: most photos look identical to the eye at a fraction of their original size.

Serve the right size

A common mistake is uploading a 5,000-pixel photo and letting the browser shrink it to 400 pixels on a phone. The phone still downloads every pixel. Responsive images fix this by offering several sizes and letting the browser choose.

<img src="teapot-800.webp"
     srcset="teapot-400.webp 400w, teapot-800.webp 800w, teapot-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Red ceramic teapot with a bamboo handle" width="800" height="600">

The srcset lists the available files and their widths; sizes tells the browser how wide the image will be displayed. A phone picks the 400-pixel file and a large retina screen picks the 1,600-pixel one.

Always include width and height attributes (or set an aspect ratio in CSS). They let the browser reserve the right amount of space before the image arrives, which prevents the page from jumping as images load. That jumping is measured as Cumulative Layout Shift, one of the Core Web Vitals.

Lazy loading, and its one big exception

Lazy loading delays loading an image until the visitor scrolls near it. Modern browsers support it natively with loading="lazy", and it saves a lot of data on long pages with many images further down.

<img src="gallery-photo-12.webp" alt="Garden at dusk" loading="lazy" width="800" height="600">

The exception is any image visible when the page first loads, especially the hero image at the top. That image is often the Largest Contentful Paint element: the largest thing the visitor sees, and the moment the page feels loaded. Lazy-loading it delays exactly the image you want to appear first. Load it normally, and consider fetchpriority="high" so the browser fetches it early.