WordPress Images: Fixing Sizes, Formats and Lazy Loading

What WordPress already does with images

Knowing the built-in behaviour saves you from installing plugins to do things WordPress already does, and helps you spot where it has been switched off.

• Several sizes per upload. Each image is copied into the sizes set under Settings, then Media (thumbnail, medium and large), plus medium_large at 768 pixels wide, two larger sizes added in version 5.3, and any sizes your theme or plugins register with add_image_size().
• A cap on huge uploads. Since 5.3, images wider or taller than 2560 pixels are scaled down and saved with -scaled in the file name, with the original kept. The limit is adjustable with the big_image_size_threshold filter.
• Responsive markup. Images output through the editor or wp_get_attachment_image() get srcset, sizes, width and height automatically.
• Lazy loading and priority. Core adds loading="lazy" to images, and in recent versions tries to leave the first images eager and adds fetchpriority="high" to the one it judges most likely to be the Largest Contentful Paint element.
• Modern format uploads. WebP uploads are supported from 5.8 and AVIF from 6.5, provided the server's image library can handle them.
• Compression. Generated sizes are re-encoded, with a default JPEG quality of 82 that can be changed with the wp_editor_set_quality filter.

Which WordPress cause sits behind each finding

The fix, step by step

Child theme snippets

Add these to a child theme's functions.php or a small site-specific plugin, never to the parent theme, where updates would remove them. The example sizes suit a fictional theme for Harbourside Bakery with a 760 pixel content column and 400 pixel archive cards.

<?php
// Sizes the theme actually uses.
add_action( 'after_setup_theme', function () {
    add_image_size( 'card', 400, 300, true );      // archive cards, cropped
    add_image_size( 'card-2x', 800, 600, true );   // cards on high-density screens
} );

// Lower the big image cap from 2560 to 2048 pixels.
add_filter( 'big_image_size_threshold', function () {
    return 2048;
} );

// Stop generating sizes nothing on the site uses.
add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
    unset( $sizes['1536x1536'], $sizes['2048x2048'] );
    return $sizes;
} );

// Describe the real content column in sizes for post images.
add_filter( 'wp_calculate_image_sizes', function ( $sizes, $size ) {
    return '(min-width: 800px) 760px, calc(100vw - 2rem)';
}, 10, 2 );

Be careful with the last filter: it changes sizes for every image output through core. If your templates have images at several widths, check the $size argument or apply the rule only in content, and give cards and headers their own values when you output them.

Outputting a featured image correctly

<?php
// Before: hard-coded full-size URL, no srcset, no dimensions.
echo '<img src="' . esc_url( get_the_post_thumbnail_url( null, 'full' ) ) . '">';

// After: core builds srcset, sizes, width, height and loading.
the_post_thumbnail( 'large', array(
    'sizes' => '(min-width: 800px) 760px, calc(100vw - 2rem)',
) );

Regenerating with WP-CLI

# Create missing sizes for all images, skipping ones already present
wp media regenerate --only-missing --yes

# Or regenerate only images attached in the last batch of IDs
wp media regenerate 1201 1202 1203 --yes

Choosing between optimisation plugins

The popular plugins overlap heavily, and their feature lists and plans change, so compare the current versions rather than relying on old reviews. The questions that actually separate them for your site are these:

• Where does compression happen? Local processing uses your server's CPU and image library, which can be slow on cheap shared hosting and limited by the formats the library supports. Cloud processing is lighter on the server but usually metered by credits or plan.
• How are modern formats delivered? Through picture tags, server rewrites or a CDN. Each works; the right one depends on your hosting and caching setup. Rewrites and CDNs keep the HTML simple, while picture tags work on almost any host.
• Does it touch every size? Some plans or settings compress only the original or only a limited number of sizes. Check the setting that controls thumbnails.
• Can you undo it? Keeping originals lets you re-compress later at a different quality, at the cost of disk space.
• What else does it do? Many plugins bundle lazy loading, CDNs or CSS optimisation. Turn off overlapping features so only one plugin does each job.

Hosting matters too. Some managed WordPress hosts compress images or serve them through their own CDN, and some block certain plugins. Check your host's documentation before adding a plugin that duplicates a service you already have.

WooCommerce and page builders

WooCommerce

WooCommerce registers its own sizes for product thumbnails, the single product image and gallery thumbnails, set under Appearance, Customise, WooCommerce, Product Images on classic themes, or declared by block themes. After changing them, regenerate thumbnails. The single product image is usually the main image on product pages, so check it is not lazy-loaded and that gallery images after the first are. Zoom and lightbox features load the full-size file; keep those originals reasonably sized.

Elementor, Divi and other builders

Builders have their own image widgets and background settings. Choose a registered size in each image widget rather than Full, and check whether the builder adds its own lazy loading on top of core. Section backgrounds set in a builder are CSS backgrounds, so they get neither srcset nor native lazy loading; for a hero, an image widget is usually faster than a background.

Edge cases

• Images in the uploads folder served without caching. Check that your server or CDN sends a long cache-control for /wp-content/uploads/. See the image CDN guide for headers.
• Multisite. Size settings and plugins may be network-wide or per site. Regenerate per site with the --url option in WP-CLI.
• Offloaded media. If uploads are moved to cloud storage by a plugin, regeneration and conversion must happen before offloading, or through the offload plugin's own tools.
• Images in custom fields. Fields that store a URL rather than an attachment ID cannot produce srcset. Change the field to return the image ID and output it with wp_get_attachment_image().
• Headless WordPress. When a front end such as Next.js renders the site, WordPress's image markup is not used. Image fixes move to the front end; see our Next.js images guide.

Keeping a WordPress media library healthy

• Give editors a short checklist: export photos no wider than your largest layout needs, name files descriptively, and choose the right size when inserting.
• Keep one owner per job: one plugin for compression and formats, core or one plugin for lazy loading, one CDN.
• Review after theme changes: a new theme brings new column widths and new registered sizes, so regenerate and re-audit.
• Check plugin updates: image and performance plugins sometimes switch features on in updates. Re-run the Image Optimisation audit on key templates after updating them.