Quick answer
Optimise website images by exporting them at the largest size they will actually display, converting to AVIF or WebP, serving responsive sizes with srcset, lazy loading everything below the fold, and always setting explicit width and height plus descriptive alt text.
Right size before you compress
A 4,000-pixel-wide photo displayed in a 600-pixel column wastes most of its data. Export at the maximum displayed width, then double it only for retina hero imagery.
Use modern formats
AVIF is typically 40–60% smaller than JPEG at the same visible quality, with WebP as a fallback. Keep PNG only for logos and graphics needing transparency, and prefer SVG for icons and line art.
Serve the right size to each device
A responsive srcset lets phones download a small file while desktops get the large one. Combine it with the sizes attribute so the browser picks correctly before layout.
- loading="lazy" on everything below the fold
- fetchpriority="high" on the hero image only
- decoding="async" on non-critical images
- Explicit width and height to prevent layout shift
Alt text does two jobs
Alt text makes images usable for screen-reader users and gives search engines context. Describe what the image shows in a short, natural sentence. Leave alt empty for purely decorative images rather than stuffing keywords.
Frequently asked questions
- Should every image be lazy loaded?
- No. Lazy loading your hero image delays LCP. Load the first visible image eagerly and lazy load the rest.
- What file size should website images be?
- Aim for under 150KB for content images and under 250KB for full-width hero images.
Related pages
Free website review
Send us your website and we will tell you what is holding it back — speed, structure, content or conversion.