WordPress Images Blurry or Cropped? Fixing Image Sizes

The photo looked sharp on your computer. On the website it is soft and slightly fuzzy, as if someone smeared it. Or the top of a person’s head has been sliced off in the blog grid. Or your product photos are all different heights, so the shop page looks like a staircase. None of it is an error message, but it makes the whole site look careless.

Almost every one of these comes down to one idea: WordPress rarely shows the exact file you uploaded. It shows a copy, resized to a size that your settings, your theme or a plugin chose. When images look wrong, the job is to work out which copy is being shown and who decided on it.

How WordPress decides what size to show

When you upload an image, WordPress keeps the original and creates resized versions. The default ones are set under Settings, then Media:

• Thumbnail, 150 by 150 pixels by default, with a box ticked to crop it to exactly those dimensions.
• Medium, up to 300 by 300 pixels.
• Large, up to 1024 by 1024 pixels.

WordPress also creates a 768-pixel-wide “medium_large” size that does not appear on that screen. Your theme, page builder and WooCommerce usually register several more, each with its own width, height and crop rule. In addition, since version 5.3, an upload bigger than 2560 pixels on its longest side is scaled down to that size, and the scaled version becomes the main image.

When a page is displayed, the theme or block asks for a named size. WordPress also adds a srcset list to the image so the browser can pick a larger or smaller copy depending on the screen. So the image you see depends on the size the theme requested, what copies exist, and what the browser decided to download.

Blurry images: the usual reasons

The theme or block is asking for a small size and stretching it

This is the most common cause. An image block set to “Medium” inside a wide column will show a 300-pixel image enlarged to fill the space. In the block editor, select the image and check the “Resolution” or image size option in the sidebar. Page builders have a similar setting on the image widget. Choosing “Large” or “Full Size” often fixes the blur instantly.

The original was too small to begin with

If you upload an 800-pixel image into a 1400-pixel-wide hero area, no setting can add detail that is not there. High-density phone and laptop screens make this more noticeable, because they need roughly twice the pixels to look crisp.

Compression is set too aggressively

Optimisation plugins often offer several compression levels. The strongest one saves the most space and can visibly soften photos, especially faces, text in images and gradients. Try a gentler setting on a test image and compare. Our post on optimising images without wrecking them explains the trade-off.

The size you need was never generated

If a theme was changed after the images were uploaded, the new theme’s sizes do not exist for old images. WordPress then falls back to the nearest available copy, which may be too small or the wrong shape.

Cropped or squashed images

Cropping is usually deliberate, just not deliberate by you. A theme that wants every card in a blog grid to be the same shape registers a size with a hard crop, and WordPress cuts each image to fit, from the centre by default. Portraits lose heads; wide banners lose their edges.

Your options depend on where the crop comes from:

• Theme settings: many themes have an option for featured image ratio or “crop thumbnails” in the Customizer. Check there first.
• WooCommerce product images: under Appearance, then Customize, then WooCommerce, then Product Images, you can choose a 1:1 crop, a custom ratio or uncropped. Changing this changes the shop grid for every product, so pick the ratio your photos are actually shot in.
• Individual images: the WordPress image editor (open an image in the Media Library and click Edit Image) lets you crop or scale manually and apply the change to all sizes, just the thumbnail, or everything except the thumbnail.
• CSS: squashed images, where the shape is distorted rather than cut, are usually caused by styling that forces a width and height. That is a layout fault, and if it is happening across the site, our help for broken WordPress layouts is the better starting point.

Uneven product grids are usually the opposite problem: photos shot at different ratios and no crop applied. Either crop the photos consistently before upload, or set a fixed ratio in the WooCommerce settings and accept that edges will be trimmed. If the store has other problems besides photos, our WooCommerce support covers the shop as a whole.

Finding out which copy a page is really showing

Before changing any setting, check what the page is actually loading. It takes a minute and saves a lot of guesswork.

1. On the live page, right-click the image and choose the option to open the image in a new tab.
2. Look at the end of the file name in the address bar. A name like team-photo-300x200.jpg means the browser is showing a 300 by 200 copy. A name with no dimensions is the original, and -scaled means the 2560-pixel version.
3. Compare that with how wide the image appears on screen. If a 300-pixel copy is filling a space twice that wide, you have found your blur.
4. For more detail, right-click the image and choose Inspect. The srcset attribute lists every copy offered to the browser. If the list only contains small sizes, the larger ones were never created or never offered.

That one check usually tells you whether the fix belongs in the block or builder setting, the theme, or a regeneration.

Regenerating sizes: why changes do not seem to work

Here is the step most people miss. Changing the sizes in Settings, then Media, or switching themes, only affects images uploaded after the change. Every existing image keeps the copies it was given at upload time.

To rebuild those copies, you regenerate thumbnails. The long-standing free plugin for this is Regenerate Thumbnails, which can process all images or selected ones. Developers with server access often use the WP-CLI command wp media regenerate instead, which is faster on big libraries.

Before regenerating, a few precautions:

1. Back up the uploads folder and database first. Regeneration rewrites files in bulk, and you want a way back if it goes wrong part way.
2. Run it at a quiet time. On shared hosting, regenerating a large library uses a lot of processing power and can slow the site for visitors.
3. Check whether your optimisation plugin needs to re-compress the new copies afterwards. Regenerated files are uncompressed by default.
4. Expect the uploads folder to grow if your theme registers many sizes. If storage is tight, deal with unused images first, as covered in our guide to clearing out the media library.
5. Clear your caching plugin and any CDN cache afterwards, or visitors may keep seeing the old copies for a while.

Images fine on desktop, wrong on phones

If images look right on a laptop but are cut off, tiny or overflowing on a phone, the cause is usually the theme’s responsive styling or a page builder’s mobile settings, not the image sizes themselves. Many builders let you set a different image, size or crop for mobile, and it is easy for one of those to be left on an odd value. If the whole phone layout is off, not just images, our fix for WordPress sites that break on mobile is closer to what you need.

Logos and graphics are a special case

Logos, icons and images containing text show blur far more than photographs, because sharp edges have nowhere to hide. A few points specific to them:

• Many themes let you set a logo height or width in the Customizer or theme options, separately from the image itself. If the logo looks soft, upload a version at least twice the displayed size and let the theme scale it down.
• Save logos and graphics as PNG or SVG rather than JPEG. JPEG compression smudges flat colour and fine lines. WordPress does not allow SVG uploads by default for security reasons, so it needs a plugin that sanitises the files, and it is reasonable to stick with PNG if you are unsure.
• Keep text out of photos where you can. A heading typed into the page stays sharp on every screen; a heading baked into a banner image depends on which copy the browser picks.

Habits that keep images looking right

• Shoot or crop photos for a section in the same ratio, especially products and team photos.
• Upload images comfortably larger than they display, but not camera originals. Around twice the displayed width works well for sharp screens.
• When you change themes, plan for a regeneration and a look through key pages before calling the job done.
• Pick one optimisation plugin and one compression level, and stick with them.
• Write down any custom image sizes a developer adds, so the next person knows they exist.

Image trouble is one of the quieter problems in our guide to WordPress errors, because nothing actually throws an error. If you have regenerated, checked the block settings and the result is still wrong, the size is probably being forced in theme or builder code. Our WordPress bug fixing service can trace where that size is set, change it safely on a copy first, and leave you a short note of what was adjusted.

Next in this series: WordPress Login Redirect Loop: Why the Login Page Reloads