Scrset issue

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

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-768x344.jpg

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 ?

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

For sure - in Customizer > Layout > Blog:

https://www.screencast.com/t/GrHDccTGlRS

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

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.

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

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

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, 768x344 instead of Full...

Checking the Mobile Dev tools i see this:

https://www.screencast.com/t/mXR9ue0i

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:

https://www.screencast.com/t/tUaZOXScETUi

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 ?

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...

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.

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