[Resolved] Dynamic image size on mobile

[Bernhard]

Hello,
I’m using dynamic images for featured images in posts. The original images are 672x345px.

I defined medium size and width 300px / height 154px. The thing is, that now the scaled image 300×154 is loaded on desktop but on mobile the full size image. Also all other image in the post (beside the images loaded via WPSP) are scaled on desktop and full size on mobile.

[Elvin]

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.

[Bernhard]

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

[Tom]

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.

[Bernhard]

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:

View post on imgur.com

Image in mobile view (full size is loaded):

View post on imgur.com

Image in desktop view (scaled size is loaded):

View post on imgur.com

Below is the server IP.

[David]

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.

[Bernhard]

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.

View post on imgur.com

[Elvin]

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

[Bernhard]

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 🙂

[Elvin]

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.

[Author]

Posts