Does not differentiate different size usage when multiple sizes present

Hi @steerpike58

Thanks for writing us about the issue you faced.

When you upload an image to WordPress, it automatically generates several different variations (sizes) of that image. This behavior serves several important purposes: Reasons for Creating Image Variations

1. Responsive Design: Different devices and screen sizes require different image sizes for optimal viewing. WordPress generates multiple sizes to ensure images look good on all devices.
2. Performance: Smaller image sizes load faster and use less bandwidth, which is crucial for improving website performance and user experience.
3. Theme Requirements: Many WordPress themes and plugins specify particular image sizes for various elements like thumbnails, featured images, and sliders. Generating these sizes automatically ensures compatibility.
4. Media Management: Having different sizes available simplifies media management, allowing content creators to choose the best size for their specific needs without manually resizing images.

Consequences of Deleting Image Variations

If you delete any of these image variations, several issues may arise:

1. Broken Layouts: Themes and plugins that rely on specific image sizes might not display images correctly, leading to broken layouts or missing images.
2. Performance Issues: If a smaller, optimized image size is deleted, WordPress might fall back to using a larger image, which can negatively impact page load times and overall site performance.
3. Responsive Design Problems: Deleting image sizes can affect the responsiveness of your site, causing images to look pixelated or improperly scaled on different devices.
4. User Experience: Poor image quality and slower load times can degrade the user experience, potentially leading to higher bounce rates and lower engagement.

By understanding why WordPress generates multiple image sizes and the potential impact of deleting them, you can better manage your site’s media and maintain a high-quality, responsive, and performant website.

So if any of the variant is used or main media used, plugin will always consider as used.

To get rid of multiple variants, you can simple unregister sizes, then regenerate thumbnails, that will help to avoid unwanted variations and keep the media clean.

Thanks

Thanks for the informative response. I understand the theory behind the multiple size-variants of an image, but what I don’t understand is their usage. I understand the concept of responsive design and performance, but what I don’t see is WP making use of any of the smaller sizes.

Are you saying that WP will deliver a DIFFERENT version of an image depending on the device displaying the image? So for example, if I pull up my page on my phone, a different version of the image is being delivered by the server compared to when I display the same page on my desktop computer? I just did a test on my phone and from what I can tell, the phone got the same ‘scaled’ (2560x) version of an image.

I also used ‘inspect’ in my desktop browser to see exactly what image is being served to me, and even on the page full of ‘featured images’, they are all the ‘2560x’ version – so this doesn’t appear optimized to me.

But perhaps even more relevant – if I upload a 3000x or 4000x image, WP spits out all the different sized variants, but does not even reference the original in its internal tables. So that 4000x original is sitting there, in the file system, just taking up space.

Thanks for your question about how WordPress handles image sizes and their usage in different contexts. Let’s clarify how WordPress deals with image variants and address your concerns.

How WordPress Handles Image Sizes

When you upload an image to WordPress, it generates multiple variants of the image in different sizes (e.g., thumbnail, medium, large). This is done to support responsive design and optimize performance across various devices. The key sizes typically generated include:

– Thumbnail: Small images often used in widgets or as icons.

– Medium: Suitable for posts or pages where a moderate size image is needed.

– Large: Used for high-resolution displays or full-width images.

– Full-size: The original uploaded image, preserved for reference or use when high resolution is necessary.

Responsive Image Delivery

In theory, WordPress can serve different image sizes based on the device’s screen size, leveraging the srcset and sizes attributes in the HTML img tag. Here’s how it should work:

1. srcset Attribute: Lists multiple image sources with their corresponding sizes.

2. sizes Attribute: Defines the layout size of the image in different scenarios (e.g., screen width).

Example of an img tag with srcset and sizes:

<img src="image-2560x.jpg" srcset="image-300x.jpg 300w, image-768x.jpg 768w, image-1024x.jpg 1024w, image-2560x.jpg 2560w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 768px, 1024px">

Practical Usage and Testing

Despite the theory, you may notice that your WordPress site does not always serve the smaller variants as expected. Here are some potential reasons:

1. Theme Implementation: The theme you are using may not be correctly implementing srcset and sizes attributes. Check your theme’s code to ensure it’s using these attributes correctly.

2. Caching: Browser or server-side caching could serve a cached version of the image. Clear your caches to test the behaviour properly.

3. Media Settings: Verify your media settings in WordPress (Settings > Media) to ensure the dimensions for different sizes are set correctly.

4. Image Block Settings: In the WordPress editor, check if the image block settings allow you to specify which size variant to use.

Original Image Storage

When you upload a large image (e.g., 3000x or 4000x), WordPress indeed generates multiple variants and often does not reference the original in the media library. This is intended to save storage and ensure only necessary sizes are used. However, the original file remains on the server and can be deleted manually if needed, though it’s generally best to keep it for future flexibility.

In summary, WordPress is designed to serve different image sizes to optimize performance across devices, but this requires proper implementation in your theme. If you find that only the large ‘scaled’ versions are being served, it’s likely an issue with how your theme handles image sizes or potential caching problems. Ensuring your theme and plugins are correctly configured will help achieve the desired responsive behaviour.

• This reply was modified 5 months ago by slui.

Thanks again for the responsive and detailed reply. From what I’m reading, and seeing with my own testing, is that WP will generate at minimum FOUR variants – there are the thumbnail, medium, and large that are governed by the settings/Media page, and apparently at least one more that is referred to as “Medium-Large” that was added along the way to the core WP code, but never added to the ‘Settings/Media’ page – this is showing as 768x in my directory. So that’s 150x, 300x, 768x, and 1024x with everything at default. Then I see two additional sizes – 1536x and 2048x (this assumes your source image is > 2048, of course). Apparently these SIX images are now considered standard. Why doesn’t WP modify the very simple settings/Media page to reflect this? It’s a rather simplistic screen and wouldn’t be hard to change.

There’s also a concept called “web-optimized Maximum size”, and this is set by default to 2560x. This was introduced in WP 5.3 (this is based on what I’m reading on the issue – feel free to correct me). The image that is created by this latter process is given the suffix ‘-scaled’. So if you leave everything at default, and you upload an image that is, say, 2800x or 3000x, you will get EIGHT images – 150x, 300x, 768x, and 1024x,1536x, 2048x and 2560x (labeled -scaled). This is what you get ‘out of the box’ BEFORE themes come into play; they can change or add to this list. I see all these images in my test environment, which is using the freebie / minimalist ‘fewer’ theme. What’s really odd is, if I upload an image that is 4000x rather than 3000x, I only get 2 generated variants – 300x, 2560x, (‘-scaled’) plus the original 4000x!

So that now fully explains the ‘how’ of all the images I’m finding in the upload directory structure.

When I place an image in a simple post or page (using the block editor, no coding here), I don’t get to chose the ‘variant’; I only get to choose the base image. And I believe this is where the ‘srcset’ concept comes into play – I’m not really placing an actual ‘image’ on the post, I’m placing a reference to a list of images, with the idea that the best image will be chosen ‘at run time’ (when end-user visits the page. This I understand the concept of. Testing/validating this is happening is quite hard when you get to mobile and tablet devices, as they are less well-endowed with tools. I also note that my smartphone (S23+) has a screen resolution of circa 2500x, so in theory one could argue, it ‘deserves’ the biggest image available (the ‘-scaled’ version). So maybe all that is working as well as it can be expected to work.

The other thing I noticed is, when I place an image using the block editor, I DO get a chance to choose image size. Over on the right, after placing the image, I can choose the ‘resolution’ drop-down, and there I see: thumbnail, Medium, Large, Full Size options. I tested, and sure enough, they place the 150x, 300x, 1024x, and 2560x versions. There’s no choice for the ‘medium-large’, or the two ‘extra’ sizes mentioned above. So I would HOPE that, by specifying a size here, I’m constraining the max size that will ever be delivered. But I’m happy to go with the ‘Full Size’ since 2560x is no longer considered a large size by most device standards.

So my final concern/question here is in relation to ‘featured image’. When I choose a ‘featured image’, that image is likely to be used in TWO types of scenarios at least. I may have a full-sized featured image placement somewhere (the only image on the page, close to ‘full width’), and that would logically be using the 2560x variant (‘-scaled’). But another common use for ‘featured image’ is when displaying posts in a list or grid format, with a mixture of images and text. The image in this case is only occupying perhaps 1/6th of the screen width, which would suggest that the 768x variant (‘medium’) would be appropriate. But my ‘inspect’ tool in chrome is telling me that the 2560x version is being used for all these. Here’s a test page I’m using to place a ‘grid’ of 5 posts with featured image and title displayed; as you can see, they are VERY small, but I can see that behind the scenes each ‘cell’ is being fed a 2560x image.

View post on imgur.com

Thanks again for engaging in the discussion!

Update – further testing is showing that the featured image is actually using a smaller version of the image than the full-page view of the same image – so I do think things are working at least somewhat as expected.

I’m curious if you know why the 4000x images that I upload are getting fewer variants than the 3000x images. And also why WordPress has never updated the ‘settings’ page to reflect the greater number of image variants now built into the program.

Thanks again for your assistance; it has been helpful in arriving at a better understanding of the situation!

Dear @steerpike58

Thank you for a wonderful discussion. We are always happy to answer your questions and assist you with any concerns you may have.

As WordPress is a vast environment supported by a dynamic open-source community, sometimes issues arise that are not immediately clear. If something isn’t working as intended, it doesn’t necessarily mean it’s broken. Often, other plugins can influence behavior and may be the root cause of the issue you’re experiencing. We recommend checking all active plugins to ensure compatibility and smooth functionality.

If you have any further questions or need additional support, please don’t hesitate to reach out. We’re here to help!

Best regards,

Dear?@steerpike58
I am closing this ticket. If you have further question, please create a new ticket.
Thanks