Still the number one cause
Despite everything, oversized images remain the most common reason business sites are slow. A photograph straight from a camera is several megabytes and displays at 800 pixels wide.
The fix is unglamorous and reliable: resize, compress, use a modern format, and tell the browser the dimensions.
The four rules
- Resize to the display size, with a version for large screens and one for phones.
- Use modern formats — WebP or AVIF with a fallback. Typically half the size of a JPEG at the same quality.
- Set width and height in the markup, so the browser reserves space and the page does not jump as images load.
- Lazy-load below the fold, so the first screen does not wait for images nobody has scrolled to.
The width-and-height rule is the one people skip and the one that causes the most irritation. Layout that jumps while loading is what makes people tap the wrong thing.
The hero image deserves special treatment
The largest image on the first screen usually determines when the page feels loaded. It should be the priority download, correctly sized, and never lazy-loaded.
If it is a background image applied by CSS, the browser discovers it late. Preloading it, or using a real image element, measurably improves perceived speed.
Video, handled sensibly
- Never autoplay with sound — it is universally disliked
- Do not load a video player script until someone clicks play
- Use a poster image so the space is filled immediately
- Host on a video service rather than serving large files yourself
- Consider whether the video earns its weight at all on a landing page
Give your team a workflow
Most image problems are introduced after launch by whoever uploads content. Either process images automatically on upload, or give the team a simple, documented routine with the target dimensions.
Automatic processing is better, because a routine that depends on discipline decays within a few months.