Referenced thumbnail file size is much larger than the actual thumbnails

[donlangeParticipant]

Hello Ernest,

Can you please help me configure the proper thumbnail size references for the two ASP Horizontal Results modules I have on the home page of https://chasebrothersllc.com? I am getting brutalized by the new GTmetrix which appears to now use Google Web Vitals metrics. We are using Google Ads to market this site and it is important Google “respects” the site’s performance.

To help you locate examples of the issue, the headers above the two modules in question are: New Listings and Updates. The section of the home page in question is just below the hero video.

For the sake of a specific example, please reference the fisherman in the second frame of the Updates module.

I have created a new thumbnail in my functions.php file in this manner:

add_image_size( ‘asp_res_image_url’, 400, 300, false );

and it indeed shows up in my list of thumbnails produced by the Regenerate Thumbnails plugin:

asp_res_image_url: 400×300 pixels (proportionally resized to fit inside dimensions) Jack-n-wild-rainbow-fi-400×225.jpg

However, the background-image in the ASP Updates module still references a much larger file:

background-image: url(‘https://chasebrothersllc.com/wp-content/uploads/2020/05/Jack-n-wild-rainbow-fi-1024×576.jpg’);

This agrees with the GTmetrix results I have attached below.

Thank you,
Don Lange

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

Under the General Options -> Image options panel, make sure to choose that thumbnail size: https://i.imgur.com/FVpAbxV.png
By default the plugin uses the first default selection, which is usually the original size.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Hi Ernest…

Thank you for the help, but the new thumbnails have been blurred somewhat even with $crop set to true:

add_image_size( ‘asp_res_image_url’, 400, 300, true );

I’m using 16:9 Featured Images cropped to 400×300 by WordPress for the ASP background images. I will add approx. 10% more resolution to the thumbnail size to see if that improves the ASP background image quality.

What do you think?

Thanks,
Don

[Ernest MarcinkoKeymaster]

Well, you can try to force the background size to be initial (original resolution), instead of trying to cover the space:

div.asp_r.asp_r.horizontal .results .item .asp_image {
    background-size: unset !important;
}

This custom CSS will prevent the image processing by the browser, and print the image as it is, in the original native resolution (440×330 in your case). That should remove the browser render blur as well.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

OK, I’ll try it but I think I need to redo the thumnail size because I have asp_res_image_url rather than asp_image set to 440×330? I see now that asp_res_image_url is the anchor node that contains the image.

Thanks,
Don

• This reply was modified 3 years, 4 months ago by  donlange.

[Ernest MarcinkoKeymaster]

No, the asp_image is a child node of asp_res_image_url, the code will still apply.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Regarding:

div.asp_r.asp_r.horizontal .results .item .asp_image {background-size: unset !important;}

I also tried div.asp_r.asp_r.horizontal .results .item .asp_image {background-size: initial !important;}

and I don’t see an improvement in image sharpness. Any other ideas?

BTW, I reduced the thumbnail image size for .asp_image from 440×330 to 400×300 and remove the thumbnail image size for .asp_res_image_url

Is my problem related to using the 16:9 aspect ratio for featured images? Can I use the 16:9 apect ratio for background images in the ASP modules?

Thanks,
Don

• This reply was modified 3 years, 4 months ago by  donlange.
• This reply was modified 3 years, 4 months ago by  donlange.

[Ernest MarcinkoKeymaster]

It looks perfectly sharp on my end, both the container and the image sizes are 400×300, please check this: https://i.imgur.com/tdinsgv.png
The images on the screenshot are in native resolution.
I suspect you might be having an issue with the browser? Maybe the magnifying on the page is set above/below 100%, make sure to check that. I also recommend trying without browser extensions, to make sure nothing conflicts there.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts