responsive images are not working

Hi Keith,

The images seem fine when viewing your site from my end. What's happening on your end? For clarity, can you share a screenshot?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Thanks for the quick reply!

Attached 3 examples and two urls in the private notes of the malfunction.

I'm not sure I understand. It's normal that an image's dimension changes from its intrinsic size depending on the layout. Are you looking to alter them?

Hello. It should be chosing the closest thumbnail size see all the other image sizes in the code? That's how the responsive images are designed to work. Instead it's randomly using the full sized image.

Hello,

I think I'm being unclear sorry for the confusion

Responsive yes it shows mobile images in a mobile grid

However it's not choosing the correctly sized images on both desktop on mobile it's not using the wordpress thumbnail images. It should be chosing the closest thumbnail size see all the other image sizes in the code. Instead it’s randomly using the full sized image or using a suboptimal image. its like the code is overwriting word presses default thumbnailing and image optimization.

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

Thank you this makes a lot of sense.

On the image huge images is perhaps another issue wordpress is serving the giant image
like here
url hidden
I don't understand why it's serving the largest ammo can on desktop and mobile 1200x1200 it seems to have plenty of thumbnail options?

However on the rest. If I wanted to limit the images to 2x retina for phones and such how would I do that? I see the url but I think that code is to limit them to 1x images right?

Thanks in advance for your help.

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

Hello
There are different images on the blog

1 featured image is 800x800 desktop 350x350 mobile
2 others are 550x550 desktop 350x350 mobile
3 similar blog articles are 200x200 desktop unsure the mobile size

I'd like to limit the mobile
to max 800x800 image

On desktop I'd like to limit the featured to grab 800x800 and the others to limit them to 550x550, and the similar blog articles to 200x200 (its grabbing the 800x800 and 1100x1100 on desktop sometimes for the 550x550 image currently)

How would I accomplish that?

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.

Thank you for the help. Love the theme it is fantastic!

The featured ignores this if I set it lower than 800x800 because it's specified as 800x800 for desktop in the html is there a way to change the code for mobile to be say 350x350?

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 ?

Hello yes I tried it but wordpress is ignoring the sizes for different resolutions screenshots in notes. I tried it with or without the vw100 and also at different resolutions no effect.

On the max width attribute that works to limit. I wonder if I have a featured image at 800x800 on desktop (displays 350x350 x retina factor on mobile) and I set that max to 550 will it cause ill effects on the featured image or could that be a solution? Google page speed/lighthouse flags anything above 2x as too large.

Which page is google flagging the images ?