Image Optimization for Websites: Formats, Sizes and Alt Text

Image optimization means serving each image in a suitable format, at the size it's displayed, compressed as far as quality allows, and described with alt text for people who can't see it. Done well, it cuts page weight and speeds up the main content without visible loss. This guide is part of our website design best practices guide.

You'll need an image editor or converter that exports WebP and AVIF, and Chrome DevTools. An image CDN or a build step that resizes images automatically saves time on larger sites.

Choose the right format

The format decides most of the file size before you touch quality settings. MDN's image format guide sums up where each one fits:

For most photos, AVIF or WebP will be the smallest file at the same visual quality. Keep a JPEG or PNG as the last fallback in a picture element. Google Images can index all of these formats when they're in an img element.

Steps

1. 01
   List the images on your key templates.

   Start with the templates that get the most traffic, such as the home page, service pages and blog posts. Run Lighthouse and note its image diagnostics: images larger than their display size, older formats and off-screen images loaded early. In DevTools, filter the Network panel by images to see each file's size. Mark which image is the LCP element on each template.

2. 02
   Pick a format for each image.

   Use the table above. Photos and textured images go to AVIF or WebP. Logos, icons and line drawings go to SVG. Screenshots with sharp text may stay crisper as PNG or lossless WebP. Don't put important text inside a photo; use real HTML text over it, so it can be read, translated and resized.

3. 03
   Export each image at the sizes it's displayed.

   Check the largest width each image is shown at on desktop and on a phone, in CSS pixels. Export a small set of widths that covers those sizes, including versions for high-density screens. A handful of widths usually covers it. Don't upload a camera original and let CSS shrink it, because the browser still downloads the full file.

4. 04
   Serve the right size with srcset and sizes.

   List the available widths in srcset and tell the browser how wide the image will be in the layout with sizes. The browser then picks the smallest file that will look sharp on that screen:

   html

   <img src="/images/team-800.jpg"
        srcset="/images/team-480.jpg 480w, /images/team-800.jpg 800w,
                /images/team-1600.jpg 1600w"
        sizes="(min-width: 960px) 800px, 100vw"
        width="800" height="533" alt="Our editor reviewing a cut">

5. 05
   Use picture for format fallbacks and art direction.

   Wrap the image in a picture element to offer AVIF first, then WebP, with the img as the final fallback. Google notes that the img fallback with a src attribute is required. You can also use media conditions to serve a tighter crop on phones, which is art direction:

   html

   <picture>
     <source type="image/avif" srcset="/images/studio.avif">
     <source type="image/webp" srcset="/images/studio.webp">
     <img src="/images/studio.jpg" width="1200" height="800"
          alt="Lighting set up for an interview in the studio">
   </picture>

6. 06
   Compress to the lowest quality that still looks right.

   Most encoders let you set a quality level. Lower it step by step and compare the result at full size on a large screen, looking at skin, skies and gradients, where artefacts show first. Strip metadata such as camera details unless you need it. Save the settings that work so every image on the site is exported the same way.

7. 07
   Set width and height on every image.

   Width and height attributes let the browser reserve the right space before the file arrives, which prevents layout shift. Use the image's real proportions. CSS can still make it responsive with `max-width: 100%` and `height: auto`, and the browser keeps the aspect ratio from the attributes.

8. 08
   Lazy-load images below the fold, and only those.

   Add `loading="lazy"` to images that start off-screen, such as gallery items and images further down a post. Never add it to the hero or any image visible on first load. On the LCP image, give it high priority instead, as covered in how to improve Largest Contentful Paint.

9. 09
   Write alt text and use descriptive file names.

   Give every meaningful image alt text that says what it shows in context, and give decorative images an empty alt. Name files in plain words, such as `interview-lighting-setup.jpg`, not `IMG_4821.jpg`. Place images near the text they relate to. Google uses all three to understand the image, and the alt text is what screen readers announce.

To check the results across the whole site, follow our website speed test guide.

If you'd rather have image pipelines set up for you, our in-house web team builds sites with responsive images and performance planned in.

Writing alt text that helps

Alt text is the text alternative for an image. Screen readers announce it, and browsers show it if the image fails to load. WCAG's Non-text Content criterion, Level A, asks for a text alternative that serves the same purpose as the image. In practice, the right alt text depends on what the image is for.

Decorative images still need the attribute. Leave out alt entirely and some screen readers announce the file name instead. An empty `alt=""` tells them to skip the image.

Describe purpose, not appearance, for links and buttons. W3C's images tutorial gives the example of "print this page" rather than "image of a printer". A magnifying-glass icon is "Search", not "magnifying glass".

Keep it short and specific. Skip "image of" or "photo of", because screen readers already say it's an image. Don't stuff keywords: Google warns that it makes the experience worse and can be seen as spam.

Check text placed over images. Headings over a hero photo still need enough contrast. WCAG's Contrast (Minimum) criterion asks for 4.5:1 for normal text, so add an overlay or move the text if part of the photo is too light.

GIFs, video and other heavy media

Animated GIFs are one of the heaviest ways to show motion. For anything longer than a simple loop, a short muted video file or an animated WebP is usually much lighter, and MDN suggests these formats over GIF for motion. Give any video a poster image, and treat that poster like any other image: right format, right size and set dimensions.

Background videos and long animations also need a way to pause, and should respect the reduced-motion setting on the visitor's device. Compressing the video itself is a separate job from image optimization. We cover that in how to compress video for websites.

Troubleshooting

Images look blurry on high-resolution screens

Cause: the browser picked a file narrower than the image's display width multiplied by the screen's pixel density. That usually means srcset doesn't include a large enough version, or the sizes attribute tells the browser the image is smaller than it really is in the layout. Over-compression can also soften fine detail and edges.

Fix: measure the image's actual display width at each breakpoint and correct the sizes attribute to match. Add a wider file to srcset so high-density screens have a sharp option, roughly twice the display width. Then compare quality settings at full size on a high-resolution screen, raising quality slightly if edges or text look soft. Use SVG for logos and icons so they stay sharp at any density.

The browser downloads the large image on mobile

Cause: the img has no srcset, the sizes attribute is missing or says 100vw where the image is much smaller, or the image is set as a CSS background that ignores srcset. Another common cause is a desktop image hidden on mobile with CSS, which the browser often still downloads before deciding not to show it.

Fix: open the Network panel at a phone width and check which file loads. Add srcset with suitable widths, and set sizes to match the layout at each breakpoint. Swap CSS background images for img elements where the image carries content. For different crops on mobile and desktop, use a picture element with media conditions, so each device fetches only its own file.

Images don't appear in Google Images

Cause: Google indexes images referenced in the src of an img element, including inside picture, but it doesn't index CSS background images. Images can also be blocked by robots.txt, loaded only by scripts that Google can't render, or sit on pages that aren't indexed themselves. Generic file names and empty alt text give Google little to go on.

Fix: use img elements with a src attribute for images you want found, with an img fallback inside any picture element. Check in Search Console's URL Inspection that the page is indexed and the image is visible in the rendered HTML. Make sure image URLs aren't blocked in robots.txt. Add descriptive file names and alt text, and place each image near related text on the page.