The web image optimization playbook

Pick the right format first

Format has the biggest effect on file size. Photos belong in a lossy format like WebP or JPG. Flat graphics and screenshots with sharp edges belong in PNG, or in WebP where it is supported.

Picking the right format before you touch the quality slider often saves more bytes than any amount of tuning later.

AVIF can compress photos very well, but it is slower to encode and not every tool supports it. SVG is a better starting point for logos and icons that can stay as vectors. Choose based on the image and where it will be shown, not on which format is popular.

Keep an editable or lossless master outside the files you deploy. Web copies are disposable. You should be able to make them again when browser support, layout sizes or quality needs change.

Resize before you compress

A 4000 pixel photo shown at 800 pixels wastes most of its data. Resize to the largest size the layout shows before you do anything else.

Scaling down costs almost nothing in visible quality, and it makes compression work much better.

Responsive layouts often need several widths, not one image that tries to fit all. Use the srcset and sizes attributes on the img element, or your framework's image component. Then a narrow phone won't download the desktop version.

Allow for high-density screens, but don't export every image at full camera resolution. Twice the display size is usually enough for interface images. Test photos against the real layout and how far people are likely to zoom.

Compress to the sweet spot

Once the format and size are right, compression is the last step. For photos, 80 to 85 percent quality looks the same as the original and makes the file much smaller.

Preview at full size. Only go lower if the file really needs to be smaller.

Each encoder has its own quality scale, so compare the output instead of reusing one number across tools. Look at fine texture, sharp edges, gradients and dark areas. Blocks, halos and banding show up there first.

Automatic file size targets can help, but set a minimum quality too. A hero image, a thumbnail and a background texture need different quality levels, even if they share a format.

Serve modern formats

Once your images are resized and compressed, send WebP or AVIF to browsers that support them. Fall back to JPG or PNG for the rest.

Most of your visitors get smaller downloads, and the images look the same.

Set width and height attributes on each image. The browser can then hold the right space before the image arrives. Lazy load images below the fold. Let the main image at the top load right away instead of putting it behind a blanket lazy-load rule.

Use long-lived immutable caching for fingerprinted filenames. When an image changes, publish it under a new hash. Returning visitors can then reuse their copy without asking the server again.

Test the page, not only the image

A small file can still slow a page down. It might be found late, load at the wrong priority or decode while the main thread is busy. Test a production build on a typical phone. Check Largest Contentful Paint, layout shift and the order of network requests.

Real user data has the final say, because real devices, networks, caches and screen sizes differ from a lab test. Use lab tests to find a problem. Then watch the field numbers to confirm the fix helps real visitors.