Referenced thumbnail file size is much larger than the actual thumbnails

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Referenced thumbnail file size is much larger than the actual thumbnails

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 year, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #30340
    donlange
    donlange
    Participant

    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.
    #30348
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #30367
    donlange
    donlange
    Participant

    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

    #30370
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #30377
    donlange
    donlange
    Participant

    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 1 year, 8 months ago by donlange donlange.
    #30378
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #30384
    donlange
    donlange
    Participant

    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 1 year, 8 months ago by donlange donlange.
    • This reply was modified 1 year, 8 months ago by donlange donlange.
    #30394
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.