Image Performance

Deliver an appropriate image for the visitor’s device without delaying the main visible content.

2 min read

  • Article
  • Beginner
  • 2 minutes read
  • Reviewed August 4, 2026
  • WordPress performance

Images are often the largest resources on a WordPress page.

Good image performance depends on selecting the right source, format, dimensions, compression and loading priority.

Match Display Dimensions

Do not deliver a full original upload when the template displays a small card.

WordPress can generate image sub-sizes and responsive srcset markup. Themes and blocks must request an appropriate size and provide a realistic sizes attribute.

Choose a Suitable Format

Common choices include JPEG, PNG, WebP, AVIF and SVG.

Select according to photographic detail, transparency, sharp graphics, animation, workflow support and browser compatibility.

Modern formats can reduce bytes, but quality and processing should be verified.

Compression

Compress to the lowest size that preserves acceptable visual quality.

Repeated re-encoding can degrade images. Keep a controlled original outside the delivery workflow when future edits are likely.

Lazy Loading

Lazy loading delays below-the-fold images until they approach the viewport.

Do not lazy-load the primary LCP image by default. The main visible image should be discoverable and prioritized early.

Dimensions and Layout Stability

Provide width and height or an aspect ratio.

The browser can reserve space before the file loads, reducing layout shifts.

Background Images

CSS background images are discovered differently from normal image elements and do not receive built-in responsive or lazy-loading behavior in the same way.

Use them for decoration, not for essential content that requires alt text.

Regeneration and Storage

Changing registered image sizes affects future uploads.

Existing media may need controlled regeneration. Review disk use, external storage and CDN synchronization before processing a large library.

Frequently Asked Questions

Should every image be lazy loaded?

No. Images visible immediately, especially the LCP candidate, usually need eager or priority loading.

Is an image CDN required?

No, but it can automate resizing, format conversion and edge delivery for larger sites.

Continue Learning

Previous: Content Delivery Networks

Next: Optimizing CSS and JavaScript