How to optimize website images

On a typical page, images outweigh everything else put together — and the biggest one is often the Largest Contentful Paint element your visitors are actively waiting on. The classic offender is a 4,000-pixel photo doing duty in a 300-pixel card. Fixing images means working on three things together: the source file, the delivery markup, and the loading priority.

1. Choose the rendered dimensions

Determine the largest size each image actually displays at supported breakpoints. Do not upload a multi-megapixel photo for a small card. Keep a high-quality original outside the website pipeline, then generate delivery variants.

2. Choose format by content

• Use JPEG, WebP, or AVIF for photographs, depending on browser and pipeline support.
• Use PNG when lossless pixels or alpha behavior requires it.
• Use SVG for suitable vector artwork from a trusted source.
• Avoid encoding text into images when real text can provide better accessibility and responsiveness.

Modern formats can reduce size, but test visual quality and decode behavior rather than choosing by extension alone.

3. Compress at a visible-quality target

Compare several quality settings at the intended display size. Inspect faces, text, gradients, and sharp edges. Strip unnecessary metadata unless rights, attribution, or workflow requirements need it.

Automate the same process during upload or build so editors do not have to remember manual steps.

4. Provide responsive sources

Let the browser select an appropriate file:

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="1280"
  height="720"
  alt="A technician reviewing a server dashboard"
>

The sizes value should describe the layout, not the source file. Include width and height so the browser reserves the aspect ratio and reduces layout shift.

5. Set loading priority

Use lazy loading for below-the-fold images:

loading="lazy"

Do not lazy-load the likely LCP image. Ensure it appears in initial HTML and consider fetchpriority="high" only when evidence shows it is the main loading priority. Overusing preload or high priority makes all resources compete.

6. Cache and deliver efficiently

Use versioned filenames with long cache lifetimes. A CDN can reduce network distance, and an image service can generate variants, but confirm its transformations, cache keys, privacy terms, and fallback behavior.

7. Measure on real pages

Inspect the network waterfall, transferred bytes, chosen srcset candidate, LCP element, and CLS. Test slow mobile conditions and high-density screens. Verify alternative text, focus behavior for linked images, and that meaningful text is not lost when images fail.

Sources and further reading

• web.dev: Responsive images
• web.dev: Optimize LCP
• MDN: img element