Image Optimization

Images are often the largest resource on a page. Changing format and dimensions can improve loading faster than switching themes or adding plugins. The effect shows up in Core Web Vitals, especially LCP.

Choose a format

JPEG is still safe for photos because it is widely supported. PNG fits graphics and transparency but is too large for photos. WebP is supported by almost every modern browser and is usually smaller than JPEG. AVIF compresses better, but encoding is slower and support is uneven.

SVG fits logos and icons because it stays sharp at any size. Do not use SVG for photos. Provide a WebP or JPEG fallback through the picture element when you use AVIF.

Dimensions matter more than format

Uploading a 4000-pixel image and displaying it 400 pixels wide still wastes bandwidth. The browser downloads the large file even though it looks small. Use srcset and sizes so the browser picks a suitable size.

<img
  src="/img/hero-800.jpg"
  srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Hosting dashboard"
  fetchpriority="high"
/>

The width and height attributes prevent layout shift. For a hero image, do not use lazy loading. The LCP image should load immediately with high priority.

Compression

cwebp -q 80 input.jpg -o output.webp is enough for a quick conversion. For AVIF, avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 is a starting point. Compare the result visually, not just by file size.

WordPress optimization plugins can generate WebP or AVIF. Test whether the plugin strips metadata or damages images. A CDN can also convert automatically, but make sure caching and the Vary: Accept header are configured correctly.

Keep originals outside the document root or in object storage. When an image is replaced, change the filename or add a hash so the CDN does not serve the old version.

What to avoid

Recompressing an already damaged file only makes quality worse. Upscaling a small image creates a large file that is still blurry. Large animated GIFs should be replaced with MP4 or WebM video.

Image optimization works best with a CDN, browser cache, and lazy loading.

FAQ