BugWP logo BugWP
Back to Community
Home / Community / Core → Developing with wordpress

Why Your WordPress Images Load the Wrong Size (And How to Fix It)

24 threads Sep 16, 2025 Core → Developing with wordpress

Content

Have you carefully selected an image size in the WordPress block editor, only to find your site loads a much larger file on the frontend? This is a common frustration that leads to slow page loads, especially on mobile devices. This guide will explain why it happens and walk you through the steps to fix it.

Why Does This Happen?

WordPress uses a responsive images technique. When you use core functions like the_post_thumbnail(), WordPress doesn't just output a single src attribute. It generates a srcset attribute—a list of all available image sizes for that attachment—and a sizes attribute that tells the browser how much space the image will take up on the page. The browser then chooses the most appropriate image from the srcset to download.

The problem occurs when your theme or a plugin interferes with this process. A lazy loading script, a custom image output function, or an incorrect sizes attribute can prevent the browser from making the correct choice, causing it to fall back to a larger, less optimal image.

How to Troubleshoot and Fix Incorrect Image Sizes

Step 1: Identify the Core Issue

First, you need to determine if the issue is with the theme or a plugin.

  1. Temporarily switch to a default WordPress theme like Twenty Twenty-One.
  2. Deactivate all your plugins.

Check your site's frontend again. If the correct image sizes now load, you know a theme or plugin is causing the conflict. Reactivate your plugins one by one, checking the site after each, to identify the culprit. If the problem persists with a default theme and no plugins, the issue may lie in your custom image size registration.

Step 2: Check Your Custom Image Size Registration

If you've added a custom image size in your theme's functions.php file, ensure it is correctly defined. A common mistake is not setting the fourth $crop parameter properly. For a hard-cropped thumbnail, it should look like this:

add_image_size( 'mini-thumb', 100, 100, true ); // True for hard crop

You must also remember to make your custom size available in the admin dropdown menu by using the image_size_names_choose filter, as shown in the sample threads.

Step 3: Verify Your Theme's Image Output

If you are hardcoding images in your theme files (e.g., header.php, footer.php) by copying the image URL from the media library, WordPress cannot automatically add the srcset and sizes attributes. You must explicitly use WordPress functions to get this benefit.

Instead of hardcoding, use functions like wp_get_attachment_image() which automatically handle responsive images. For example:

echo wp_get_attachment_image( $attachment_id, 'your-size-slug' );

Step 4: Consider Caching

If you've made changes to your image sizes or theme, a caching plugin or server-level cache might be serving an old version of the page. Clear all your caches after making any changes to see the results.

Conclusion

Images loading the wrong size is typically a conflict between WordPress's intelligent responsive image system and code from a theme or plugin. By systematically testing with a default theme, checking your custom code, and ensuring you're using WordPress's built-in image functions, you can resolve the issue and ensure your visitors get fast-loading, appropriately sized images.

Related Support Threads Support