Image Optimization in WordPress: Formats, Compression, and CDNs

Arafat Islam Sep 5, 2026 4 min read
Image Optimization in WordPress: Formats, Compression, and CDNs

On the average WordPress site, images account for more page weight than every other asset type combined — and it's usually the easiest category to meaningfully optimize, because most of the waste is unintentional (oversized originals, wrong formats, no lazy-loading strategy) rather than unavoidable.

Pick the right format for the content

  • WebP — broadly supported, meaningfully smaller than JPEG/PNG at equivalent visual quality for most photographic and graphic content. A reasonable default for most images today.
  • AVIF — often smaller still than WebP, with growing but not universal support; worth using with a fallback for browsers that don't support it.
  • JPEG — still reasonable for photographs where broad legacy compatibility matters more than squeezing out the last bytes.
  • PNG — reserve for images that genuinely need lossless quality or transparency (logos, icons, screenshots with text) — using PNG for photographs is a common and significant unnecessary size cost.
  • SVG — for icons, logos, and simple illustrations. Vector format, scales to any size with zero quality loss and typically tiny file size — but sanitize any user-uploaded SVGs, since they can contain embedded scripts.

Serve modern formats with a fallback (via the <picture> element or server-side content negotiation) rather than forcing every visitor's browser to support the newest format — WordPress's own media handling and most CDN image services do this automatically.

Size images for how they're actually displayed, not for the camera they came from

A 4000-pixel-wide photo displayed at 800 pixels wastes most of its data — the browser downloads full resolution and scales it down. Use WordPress's responsive image support (srcset/sizes, generated automatically from registered image sizes) so the browser requests an appropriately sized version for its actual viewport, rather than always fetching the largest registered size.

Compress without visibly degrading quality

Lossy compression at a well-chosen quality level (typically 75–85% for JPEG/WebP) is very often visually indistinguishable from the uncompressed original while cutting file size substantially. Most image optimization plugins or CDN image services handle this automatically on upload — verify yours is actually running, since a misconfigured plugin can silently stop optimizing after an update.

Lazy-loading: use it, except where it costs you

Lazy-loading (native loading="lazy", supported directly in HTML now) defers loading of off-screen images until they're about to enter the viewport — a real win for pages with many images. The one place to explicitly exclude it: your Largest Contentful Paint image (almost always the hero image or featured image above the fold). Lazy-loading that specific image delays the exact metric Core Web Vitals is timing — set it to load eagerly and ideally preload it instead.

Use a CDN or image optimization service, not just local compression

A CDN with image optimization built in (resizing, format conversion, and compression happening automatically at the edge, often on-the-fly per requesting device) removes the need to manually generate and manage every size/format combination yourself, and serves images from a location physically closer to each visitor — attacking network latency in addition to file size.

Don't forget alt text while you're touching every image anyway

Since an image-optimization pass usually means going through your media library, it's a natural point to also verify alt text is present and meaningful — it costs nothing in performance and matters for both accessibility and SEO. See our accessibility and SEO posts for the details on getting alt text right.

Audit the media library periodically for genuinely unused files

Old sites accumulate unused, duplicate, or orphaned media uploads over years of content changes — not a performance problem for page load directly, but real storage and backup-size overhead. A periodic audit (most WordPress media libraries have plugins for this) is worth doing as routine hygiene, backed up first before any bulk deletion.

The takeaway

Image optimization on WordPress is mostly about defaults: modern formats with fallbacks, correctly sized responsive images, sensible lossy compression, lazy-loading everywhere except your LCP element, and a CDN doing the heavy lifting automatically rather than manual per-image tuning. Get the defaults right once and most future uploads benefit without repeated manual work.