Images are most of your page
On a typical site, images outweigh code several times over. Treat them as a first-class performance concern.
The heaviest thing you ship
Open the network panel on almost any marketing site and sort by size. The top of the list is nearly always images: a hero photograph, a few product shots, a background texture nobody remembers adding. On the median page, images account for more bytes than JavaScript, CSS and HTML combined.
Choose the right format
Modern formats deliver the same visual quality at a fraction of the size:
- AVIF produces the smallest files for photographs, often half the size of a comparable JPEG.
- WebP is nearly as efficient and encodes much faster.
- SVG is right for logos, icons and simple illustrations, and it scales to any size for free.
- PNG still has a place for screenshots with sharp text, though WebP lossless often beats it.
Serve modern formats with a fallback using the picture element, or let an image service negotiate the format from the request's Accept header.
Serve the right size
A 3000 pixel wide photograph displayed in a 400 pixel column wastes most of its bytes. Responsive images solve this with srcset and sizes: you describe the candidates and how wide the image will be at each breakpoint, and the browser picks the smallest file that will look sharp on the current screen.
Getting sizes right is the step most teams skip. Without it, the browser assumes the image fills the viewport and downloads a candidate far larger than needed.
Load what is visible first
Images below the fold should wait. The native loading="lazy" attribute defers them until the visitor scrolls near, with no script required. The opposite is true for the main image at the top of the page: never lazy load it, and consider fetchpriority="high" so the browser requests it before less important resources.
Reserve the space
An image without dimensions causes the content below it to jump when it loads. Always set width and height attributes, or an aspect-ratio in CSS. The browser then reserves the right box before a single byte of the image arrives, and the layout stays still.
Compress with intent
Quality settings are not one size fits all. A busy photograph hides compression artifacts well; a flat gradient shows banding at the slightest provocation. Look at the result at actual size on a real device rather than trusting a single default.
Audit regularly
Images creep. A new campaign adds a 2 megabyte banner, a blog post embeds an uncompressed screenshot, a designer swaps an icon for a PNG. A monthly check of the heaviest images on your top pages catches most of it before visitors notice.