[Support request] Serving Scaled Images

[Dimitar]

Hi there,

I am having a little trouble with images, fighting all day. I have a few issues and things I don’t quite get. But my main issue is this:

On the page, in the provided link the header image is not scaled correctly according to GTMetrix: “is resized in HTML or CSS from 1536×768 to 664×332. Serving a scaled image could save 74.5KiB (81% reduction).”

Looking at the code on my site the following block loads the image (replaced original URL with dummy values):

<img width="2048" height="1024" src="https://mysite.com/wp-content/uploads/image-name.png" class="attachment-full size-full" alt="Some image" srcset="https://mysite.com/wp-content/uploads/image-name.png 2048w, https://mysite.com/wp-content/uploads/image-name-300x150.png 300w, https://mysite.com/wp-content/uploads/image-name-1024x512.png 1024w, https://mysite.com/wp-content/uploads/image-name-768x384.png 768w, https://mysite.com/wp-content/uploads/image-name-1536x768.png 1536w" sizes="(max-width: 2048px) 100vw, 2048px">

Then according to GTMetrix the image is scaled to 664×332 meaning it has width 664px. But looking at srcset shouldn’t image between 300 px and 768px load an image with size 768x384px and not 1536×768.

A couple of additional questions if you can answer me:

1) From where all those different image sizes come as WordPress is generating only 3 additional sizes? Is it from Generatepress?
2) When I uploaded a properly compressed png image and WordPress resizes it the smaller images are larger (in terms of memory) compared to the original one. I’ve tried setting:

function av_return_100(){ return 100; }
add_filter('jpeg_quality', 'av_return_100');
add_filter('wp_editor_set_quality', 'av_return_100');

But this didn’t help. Is there anyway to assure that WordPress resizing does not mess up my compression and smaller images are smaller in memory also?

[David]

Hi there,

the issue is the width="2048" height="1024" attributes of the image. It those sizes that the Browser selects the best src-set size image to use. As you’re using Elementor to add the image you would need to adjust the sizes within the Elementor editor.

GP doesn’t add any other media thumbnail sizes. Might be worth asking Elementor if they do.

To stop WP from compressing images you can add this PHP Snippet:

add_filter('jpeg_quality', function($arg){return 100;});

You will need to use the Regenerate Thumbnails plugin to apply it to existing images.

[Dimitar]

Hi David,

Thanks a lot for the reply, but I couldn’t understand what you meant. Do you mean that the width="2048" height="1024" attributes force loading of the original image with dimensions 2048×1024? And those attributes should not be present in order for srcset to work?

[David]

SRCSET will still work.
The problem you were having is in Elementor the 2048px image was selected. Which adds the above attributes. Now if that image was sitting on a completely empty page, the browser would select the best match srcset image to fit the viewport and resolution.

However your 2048px image was resized to fit inside a much smaller container using some CSS – which can ‘confuse’ the browser and so it uses the full size image.

So the art is to select the WP image size that best suits the container it will sit in.

[Dimitar]

Thanks a lot, David for the further explanation!

So you mean I need to select an image size that fits the container initially. Then SRCSET will work properly. I think if I understood you right, this does the trick as a quick test proved it.

Regarding WordPress compression. I’ve added the following lines via Code Snippets:

add_filter('jpeg_quality', function($arg){return 100;});
add_filter('wp_editor_set_quality', function($arg){return 100;});

But still, when I upload an image to WordPress the resized versions are larger than the original in terms of memory size. Any idea what could be the reason behind that? Is it possible that the added filters are not executed properly, can I verify that in any way?

Thanks!

[Tom]

Hi there,

This might explain the larger file size: https://wordpress.stackexchange.com/questions/303845/cropped-image-file-size-larger-than-original-is-it-normal

[Dimitar]

Thanks, Tom for the link. I’ve stumbled upon this before. I’ve tried all sorts of values for $quality from 0 to 100 but without a change in image size. I guess there is no to do… this is quite frustrating for people that optimize their images properly beforehand. It removes all efforts of image optimization and serving scaled images…

[Tom]

Resizing images with PHP is definitely not ideal, unfortunately. If possible, it’s best to resize yourself before uploading.

[Dimitar]

That would be the solution at the end. I’ve tried what I could do to automate it, but no luck. Thanks a lot for your input.

And to put an end to this thread could you please confirm if my understanding of David’s proposed solution is correct?

So you mean I need to select an image size that fits the container initially. Then SRCSET will work properly. I think if I understood you right, this does the trick as a quick test proved it.

[Tom]

David is the browser guy – I’m not an expert when it comes to srcset, unfortunately. If it works in your tests then I assume it’s the way to go 🙂

[Margaret]

Hello, I am also having an issue with image sizes.

Google Search Console is giving me the following error: “LCP issue: longer than 4s (mobile).” Google PageSpeed Insights says that the “Largest Contentful Paint element” is the featured image at the top of the page.

When I inspect that image, I can see that width=”2048″ and height=”869″, and srcset includes the same image URL at 2048w, 300w, 1200w, 768w, and 1536w. In my custom css, I have the featured image width set to 100vw.

Is there a way that the browser can load only the size of the image needed, rather than loading every size? My overall goal is to solve the LCP issue and achieve faster page speed.

Thank you!

[Margaret]

In case this is relevant — the pages I am referring to are regular pages, not blog posts.

[David]

Hi there,

can you raise a new topic where you can share a link to your site so we can take a look.

[Margaret]

Yes, I just opened a new topic #1367253. Thanks!

[David]

Thanks – received and replied 🙂

[Author]

Posts