Dynamic image size on mobile

Hi there,

I'm not sure I'm seeing what you mentioned.

I've inspected the site on an Android phone and it's using only 1 image size for both which is this one:

/wp-content/uploads/2020/10/Rom-Dezember-Via-Condotti-672-300x154.jpg?ezimgfmt=ng%3Awebp%2Fngcb2%2Frs%3Adevice%2Frscb2-2

Note: Since you're using Ezoic, it's up to ezoic's script what it'll display based on what it "sees" as optimized. The theme has limited to no control over this, unfortunately.

Hi Elvin,
that's weired. Now I see that it happens only on the German version of the page.
Desktop item 30. https://www.webpagetest.org/result/211112_AiDc48_e3af52caf6620cbffec496c96b68fc49/1/details/#waterfall_view_step1
Mobile item 28. https://www.webpagetest.org/result/211112_AiDc08_4bcbf04428bb42e52df7589ce3532a4a/1/details/#waterfall_view_step1

The URL that Elvin mentioned above isn't using GeneratePress to serve the images. Are you using a plugin that might be altering how they're displayed? If so, that's likely the first place to look. If you use the core theme display, it should use the srcset values provided by WordPress.

Hi Tom,
I did, but I have the same problem when I connect direct to the server. I tried also to disable WP Rocket. Please see the screenshots.
Featured image in mobile view:
https://imgur.com/a/1kODqOD
Image in mobile view (full size is loaded):
https://imgur.com/JRrF1er
Image in desktop view (scaled size is loaded):
https://imgur.com/NaW96E3
Below is the server IP.

Hi there,

can you try adding this Snippet to your site:

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

Not sure it will work - but it would 'should' do is stop WP from adding any other sizes to the src-set.

Hi David,
this works for the images in the post and a big part of the problem is solved :)

Is it possible define it also for featured images in posts (not pages)? Thank you.

https://imgur.com/4eHeTkL

If it's about changing the default size used by the featured image, you can use this filter:
https://docs.generatepress.com/article/generate_page_header_default_size/

Example: using "medium" size for featured images.

add_filter( 'generate_page_header_default_size', function( $size ) {
    if ( is_single() ) {
        return 'medium';
    }

    return $size;
} );

But if David's code is fine but you want to tweak it to apply on single post pages only, you can try this:

function set_max_srcset_width( $max_width ) {
if ( is_single() ) {
    $max_width = 300;
    return $max_width;
}
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

Note: If you wish to define the srcset manually, you can use the generate_featured_image_output the entire featured image output.
https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/structure/featured-images.php#L34-L51

With the main concern being this function - https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

And then add your specific parameters/attributes. More context here:
https://wordpress.stackexchange.com/a/293839
https://wordpress.stackexchange.com/a/395408

Example to ponder on:

add_filter( 'generate_featured_image_output', function($output){
    if( is_single() ){
			$output = sprintf(
					'<div class="post-image">
						%3$s
						<a href="%1$s">
							%2$s
						</a>
					</div>',
					esc_url( get_permalink() ),
					get_the_post_thumbnail(
						get_the_ID(),
						apply_filters( 'generate_page_header_default_size', 'full' ),
						array(
                            'itemprop' => 'image',
                            'srcset' => wp_get_attachment_image_url( get_post_thumbnail_id(), 'your-custom-size' ) . ' 768w',
                            'srcset' => wp_get_attachment_image_url( get_post_thumbnail_id(), 'another-one-of-your-custom-size' ) . ' 1024w',
                        )
					),
					apply_filters( 'generate_inside_featured_image_output', '' )
				);
    }
    return $output;
},10,1);

Hi Elvin,
I used the 2nd code and it works :) .

About the last code you suggested. Something like this I would need for the featured images on pages. Would it be possible with wp_is_mobile?

Thank you :)

There shouldn't be any need for wp_is_mobile if you're defining your own srcset because the point of having srcset itself is for responsive serving of image.

The 300w, 768w and 1024w you see on the srcset should be the "condition" for viewports.

But to your point, if you're going to use wp_is_mobile() then you can try using it for the 'generate_page_header_default_size' filter.

Example:

add_filter( 'generate_page_header_default_size', function( $size ){ 
if( is_single && wp_is_mobile() ){
$size = 'your size here';
}
return $size;
},10,1);

Which forces the theme's featured image to use your specified size for image on single post pages on mobile devices. But I'm not really sure how reliable wp_is_mobile() is.