Image Optimization: A Complete Guide to Lighter, Faster Images

Images account for more than half of the total weight on a typical web page. They are also the most common cause of slow loads and layout shift. The good news is that image optimization is a well-understood problem with a clear set of steps. This guide walks through each one, from choosing a format to writing alt text.

1. Choose the right format

Format choice is the first and biggest lever. Photographs belong in JPEG or the modern WebP and AVIF formats, which deliver the same quality at a fraction of the size. Graphics with flat colors, logos, and simple illustrations belong in SVG, which is resolution-independent and tiny. Avoid PNG for photographs — its file sizes are several times larger than necessary.

That single format swap cut the file size by 90 percent with no visible difference. Serve WebP or AVIF where browsers support them, with a JPEG fallback for older ones.

2. Compress without destroying quality

Compression removes data the eye cannot easily perceive. Lossy compression is fine for photographs; lossless is better for graphics where crisp edges matter. Aim for a quality setting that looks good on a normal screen — usually around 70 to 80 for photographs. There is no benefit to shipping a 95-quality image that is twice the size of an 80-quality one that looks identical.

3. Size images to their display dimensions

An image displayed at 400 pixels wide should not be served at 2000 pixels wide. Downscale the source image to the largest size it will actually be shown at (including retina displays, so roughly double the CSS width for crispness). Serving an oversized image forces the browser to download far more data than it needs and then shrink it on the fly.

Always set width and height attributes on image tags. These attributes let the browser reserve the correct space before the image loads, which prevents cumulative layout shift — the jarring jump that happens when an image pops into place.

4. Use responsive srcset for varied screens

A phone does not need the same image as a 4K monitor. The srcset attribute lets you provide multiple sizes of an image and let the browser pick the right one for the current screen and network. This keeps mobile page weight low while preserving quality on large displays.

5. Lazy-load below-the-fold images

Images that sit below the visible area do not need to load immediately. The loading="lazy" attribute tells the browser to defer fetching them until the user scrolls near them. This frees up bandwidth for the content the visitor actually sees first, improving the perceived speed of the page.

6. Write meaningful alt text

Optimization is not only about bytes. Alt text describes an image for screen readers and search engines, both of which cannot interpret pixels. Describe what the image communicates in context. A decorative background can use empty alt, but any image that carries information should have a concise, meaningful description.

Putting it together

• Save photographs as WebP or AVIF with a JPEG fallback.
• Save logos and flat graphics as SVG.
• Compress to the lowest quality that still looks good.
• Downscale to the display size and set width and height attributes.
• Provide multiple sizes with srcset for responsive screens.
• Lazy-load images below the fold.
• Write alt text for every meaningful image.

Run your page through SiteLens AI to see your total page weight, then work through this list. Most sites can cut their image weight by 60 to 80 percent with no loss in visual quality — and that single change often does more for your Speed score than anything else.