Glossary · Performance

Image Optimization

Image optimization reduces image bytes without visible quality loss through modern formats, correct sizing, compression and caching to speed up pages.

Updated October 6, 2026

Image optimization is the practice of delivering images at the smallest file size that still looks right on the user's screen. It combines format choice, compression level, correct dimensions and delivery settings.

Why it matters

Images are usually the heaviest part of a page and often the LCP element, so they strongly affect loading speed and data cost. Typical wins include switching photos from JPEG to WebP or AVIF, resizing a 4000 px original to the 1200 px the layout needs, and using SVG for logos and icons.

Example

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="600"
       alt="Hero" fetchpriority="high">
</picture>

Width and height prevent layout shift. A below-the-fold image would use loading="lazy"; the hero image should not.

Common mistakes

  • Serving desktop-sized images to phones; use srcset and sizes.
  • Using PNG for photographs, or JPEG for flat graphics and text.
  • Stripping so much quality that artifacts appear. Check visually.
  • Lazy loading the LCP image.
  • Missing long cache headers on fingerprinted images.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceBrotli CompressionBrotli is a compression algorithm from Google that usually shrinks text assets 15-25 percent more than gzip and is supported by all modern browsers.Glossary · PerformanceCDN (Content Delivery Network)A CDN is a geographically distributed network of servers that caches your content close to visitors, reducing latency and shielding your origin from load.Glossary · PerformanceFont Loading (FOIT and FOUT)Font loading behavior decides what users see while web fonts download: invisible text (FOIT), or fallback text that swaps to the web font (FOUT).Guide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min readGuide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min readGuide · Hosting & CDNCloudflare Cache Rules and Purge: What Gets Cached and How to Clear ItHow Cloudflare decides what to cache, how to read cf-cache-status, build cache rules, set TTLs, and purge by URL, tag, prefix or everything without hurting performance.7 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.