How to Fix Blurry Images in WordPress

Quick fix: find the actual rendered width of the image in your browser's inspector, then check the width of the file being served. If the file is narrower than the space it fills, WordPress is scaling a small size up and the fix is to supply a larger source — not to sharpen the original.

Find out which file is being served

Right-click the image and choose Inspect. In the Elements panel, hover the <img> tag: the browser shows both the intrinsic size of the file and the rendered size on screen.

That last case cannot be fixed inside WordPress. An image enlarged in an editor before upload has no detail to recover.

Understand the 2560-pixel scaling limit

WordPress scales down any upload larger than 2560 pixels on its longest side and uses the scaled copy across the site. The original is preserved with -scaled in the filename.

For most sites this is helpful. For photography, product zoom or full-width hero images it can be limiting. Raise or remove the threshold deliberately:

<?php
// In a small plugin or the child theme's functions.php.
add_filter('big_image_size_threshold', fn () => 3840);

Returning false disables scaling entirely. Do that only if you also control upload sizes, because 8 MB originals on every page will undo your performance work.

Control the compression quality

WordPress re-encodes generated sizes. Raising quality trades file size for fidelity:

<?php
add_filter('wp_editor_set_quality', fn () => 90);

Values above about 92 add weight with little visible benefit. Test on a real photograph with gradients — skies and skin tones show compression artefacts first.

Also check that an optimisation plugin is not compressing a second time. Two lossy passes at 82% look considerably worse than one at 90%. Pick one place to compress and turn the other off.

Register image sizes that match your layout

Blur usually starts when a theme displays an image in a slot no registered size fits, so WordPress supplies the nearest smaller file and CSS stretches it.

Register a size that matches the real slot:

<?php
add_action('after_setup_theme', function () {
    // 1600 wide for a 800px slot: enough detail for 2x screens.
    add_image_size('card-wide', 1600, 900, true);
});

Then regenerate so existing uploads gain the new size:

wp media regenerate --yes

The hard-crop flag (true) guarantees the aspect ratio, which also prevents the squashed-looking images people often describe as blurry.

Serve sharp images on retina screens

WordPress already outputs srcset and sizes for content images, so browsers on dense screens pick a larger file automatically — provided a larger file exists. Three things break it:

• the upload is too small for any high-density variant to be generated;
• the theme prints a bare <img src> in a template instead of using wp_get_attachment_image();
• a page builder outputs a fixed size chosen at design time.

For a background image set in CSS, srcset does not apply at all. Use image-set() or point the rule at a file sized for the largest realistic display.

Special cases

Logos and icons. Use SVG where you control the source. A vector logo is sharp at every density and usually smaller than the PNG. Restrict SVG uploads to trusted administrators, since SVG can carry script.

Screenshots and text in images. PNG or WebP handles flat colour and text far better than JPEG, which smears fine lettering.

Product images in WooCommerce. Sizes are configured under Appearance → Customize → WooCommerce → Product Images. Change them there, then regenerate thumbnails.

Images through a CDN or optimisation service. Check the service's own quality setting. A CDN set to aggressive lossy mode overrides everything you configured in WordPress.

Verify the result

Reload with the cache purged, then inspect the same image again. You want the intrinsic width to be at least the rendered width on a standard display, and roughly double it on a retina one. Compare file sizes as you go — sharper images are heavier, and the point is to find the smallest file that still looks right rather than the largest one you can serve. If pages get slower, the fix belongs in how to speed up a WordPress site, not in lowering quality again.