[Support request] responsive images are not working

Hi there,

just to cover, its WordPress that is responsible for the src-set and sizes properties of the img HTML.
And it is the browsers responsibility for interpreting that data and selecting the appropriate image size.
The only place the theme gets in the way is to do with featured images. We stay out the way of the rest of the time as GP doesn’t have fixed size containers and therefore prescribing sizes would ultimately backfire 9 times out of 10.

But to the point… there are 2 main factors here:

1.The sizes attribute in the HTML. We leave this to the WP default eg.

sizes="(max-width: 550px) 100vw, 550px

And in most cases it works just fine, by telling the browser to use the the max image size that fills the viewport…. problem is if the image doesn’t fill the viewport ( because the container has padding ) then the browser will make up its own mind.

2. The client device DPR (device pixel ratio).
A DPR of 2.0 is probably the bare minimum for all screensizes now. Most have 3.0 or greater.
Browsers consider this in their image size request.
For example – an image that has a display size of 350px, a browser on a device with a 2.0 DPR would ultimately want to load an image that is 700px. And it will choose the nearest largest size if the exact size is not found.

Now this behaviour can be changed, for example WP provides the wp_calculate_image_sizes filter hook which means we can write our own sizes attribute for a specific need.

One of many examples on the forum can be seen here:
https://generatepress.com/forums/topic/loading-larger-image-on-mobile-and-tablet/#post-2447841

And i can do the same for your site if you want… question is whether you want to? considering the DPR point above.

let us know

Those XX sizes are standard attachment sizes, i assume a plugin has registered those?

I would ignore the idea of x1 and x2 retina images. As you would need WP to generate additional attachment sizes to include those, and in reality the majority of devices will now want a x1 image. All you end up doing is stuffing more files into your database.

But to the function, it can be rewritten to accommodate whatever sizes you want. Let me know

In addition or alternatively you can use the max_srcset_image_width filter to tell WP the largest image to include in the src-set:

eg. max size of 768px

function set_max_srcset_width( $max_width ) {
    $max_width = 768;
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

Filtering the sizes of specific images isn’t possible without custom development.

What i can offer is:

// set the maximum src-set image size to 800px
function set_max_srcset_width( $max_width ) {
    $max_width = 800;
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

// mobile preferred size 350px
function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(max-width: 768px) 350px, (min-width: 769px) 800px, 100vw';
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

This will:
a) only add images to the src-set that are a max size of 800px
b) prompt the browser to load the 350px image on mobile screen sizes

Note – this does not create new image sizes. For example if you uploaded an image that was 550px then that would be the largest available size.

So if you want to manage image sizes in your post content, the best thing to do is to upload an image at the max-size you want to use.

That code should do that ie. a 800px as the largest image , and 350 for small device sizes.

But i don’t see the change in the HTML it should create
Did you add the above snippet ?

Which page is google flagging the images ?