[Support request] Scrset issue

Home Forums Support [Support request] Scrset issue

Home Forums Support Scrset issue

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1819904
    Evenit

    Scrset images not working good in my site. Browser uses the full larger image in mobile version. Please check the first image of this page: https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/
    Google Speed insights tells I am using the full image and so the chrome inspector. May you help me with this?
    Thanks

    #1820133
    David
    Staff
    Customer Support

    Hi there,

    yeah WP’s src-set relies on an image to fill the width of the viewport for the browser to select the most appropriate image.
    Couple of options:

    1. uncheck Display Padding around Image in Customizer > Layout > Blog –> Featured Images >>> Posts (tab). 2. Or we can use a PHP Snippet to force the browser to load a smaller image:

    function db_modify_srcset_sizes($sizes, $size) {
    	return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw';
    }
    add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
    #1820225
    Evenit

    Hi thanks, I added the code, it seems to work for other images in the page, but not for the featured image. If I check the mobile viewport in the Chrome inspector I see currentSrc: “https://www.viaggi-usa.it/wp-content/uploads/2017/11/Scritta-di-Hollywood-come-fotografarla-01.jpg”
    The image should be https://www.viaggi-usa.it/wp-content/uploads/2017/11/Scritta-di-Hollywood-come-fotografarla-01-768×344.jpg

    #1820925
    David
    Staff
    Customer Support

    If you have disabled the Padding on the images – then you ‘shouldn’t’ require the code as well. What happens if you disable the code ?

    #1820942
    Evenit

    I couldn’t find the option to disable the padding by following the path you suggested. Could you please send me a screenshot?

    #1820947
    David
    Staff
    Customer Support

    For sure – in Customizer > Layout > Blog:

    2021-06-13_23-08-08

    #1820949
    Evenit

    Thanks David. That option is already disabled. Also the featured image is disabled, I use a Page hero with this code:

    <div class="featured-image page-header-image grid-container grid-parent"> 
    [featured_image]
    	</div>

    I use a shortcode you suggested me in this ticket: https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1817077

    #1821189
    Evenit

    I gave it another try.
    I have removed your code that forces the browser to use the scrset and then removed the header with the [featured_image] shortcode and enabled the featured image in the Customizer (padding is not enabled).
    You can see the results in this article https://www.viaggi-usa.it/harlem-film/
    As you can see it still doesn’t work. Not only the featured image but all the images inside the post are served as Full image even if we are on mobile. Scrset doesn’t work and I don’t understand why.

    #1821313
    David
    Staff
    Customer Support

    I think the issue now with the featured image is because of the lazy loader – its using data-src but missing its data-srcset… can you put back the previous header element, so i can take another look

    #1821354
    Evenit

    You can check at the URL https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/
    I did not change for it

    #1821402
    Evenit

    just be sure I understood correctly. For that URL (https://www.viaggi-usa.it/citta-usa/los-angeles-citta-usa/) your code for forcing srcset is still operating. Do you want I disable it?
    Also on the desktop I see the featured image is loading the wrong image, 768×344 instead of Full…

    #1821410
    David
    Staff
    Customer Support

    Checking the Mobile Dev tools i see this:

    2021-06-14_12-53-51

    So it is actually making the correct request for the image ( the second one in the list )
    However you have a Preload link in the head that is making the first request… which is annoying as you can see the Preload link also has the same src-set sizes – so it should preload the correct image:

    2021-06-14_12-58-18

    It could be Page Caching on the Server that has ‘locked’ in the desktop file size request… but not sure.

    Is it possible to disable the preload for the featured image ?

    #1821430
    Evenit

    I have removed the image preloading. Now I see it is serving the 990×444px image in the mobile version, it’s improved but still too big…

    #1821442
    David
    Staff
    Customer Support

    I am not sure that is the wrong size image… Google Simulates a Moto 4G phone which is a x3 HD screen – so 900px ( or higher would be the correct size image ). When i test it on a x2 Retina screen the device makes the 768px request.

    I also ran a PSI test on the link and it not longer raises the Resize Images opportunity.

    #1821479
    Evenit

    Ok so the issue was the image preloading in your opinion?

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.