Why images slow pages
A photo straight from a phone camera can be several megabytes. When the page shows it 800 pixels wide, most of that data goes to waste. The largest image on the first screen is often the Largest Contentful Paint element, so its size directly sets your LCP score.
Six image rules we follow
- Resize. Serve no more pixels than the layout shows, with a smaller version for phones.
- Use modern formats. WebP and AVIF are much smaller than JPEG at similar quality.
- Compress. Find the lowest quality where nobody notices the difference.
- Set width and height. The browser reserves space, so the page does not jump.
- Prioritize the hero image. Load the main first-screen image early, never lazily.
- Lazy-load the rest. Images below the first screen load as the visitor scrolls.
Google's web.dev guidance covers each of these, and they fix most image problems on business sites.
Responsive images
The same photo should not go to a phone and a desktop monitor at the same size. Responsive image markup lists several sizes, and the browser picks the right one for each screen. A phone then downloads a fraction of the data.
Good example. A landscaper's gallery uses WebP images at three sizes, lazy-loads everything below the first row and sets dimensions on every photo.
Bad example. The same gallery loads forty full-size camera photos at once, and the page jumps as each one arrives.
Images still need to look good
Speed should not mean blurry photos. Real photos of your team and work build trust. Compress carefully and check results on a sharp phone screen.
We convert every image on our sites to WebP at the right sizes, with alt text and copyright details built in. Read what image alt text is. Our web design team handles image optimization as part of every build.