Cover block image blurry due to incorrect srcset values

[stellarwebworks]

Description

I've noticed a problem with cover block images being blurry on mobile devices. After checking in to it, I see it is because of how the srcset values are specified. A cover block image uses the css 'cover' image-size option. The problem is the srcset options are based on width alone. For example, I created a full width banner at the top of the page with a minimum height of 400px using the cover block. The full resolution image is 2400x500px. The srcset generated for the cover block is:

my-cover-image.jpg 2400w, my-cover-image-300x63.jpg 300w, my-cover-image-1024x213.jpg 1024w, my-cover-image-768x160.jpg 768w, my-cover-image-1536x320.jpg 1536w, my-cover-image-2048x427.jpg 2048w

At a screen width of 400px the cover image selected is 768x160 but is stretched to cover an area of 400x400. As it is stretched by a factor of 2.5 this causes it to be extremely blurry. I consider this a bug.

Step-by-step reproduction instructions

Add a cover block, set to full width. Choose a wide aspect ratio image. View on mobile phone - result image is blurry

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[bahia0019]

I just noticed this, and came to report. I can confirm this behavior. Screenshot of Cover image (top), and same image as an Image block (bottom). Especially bad when you have 100vh set on the Cover block, as is the case here.

[davidspeyerdesign]

Same problem here. This seems to be a huge issue. Why is it not beeing fixed?

[alexsoluweb]

+1

This is à major issue and this is why I had to recreate my own block.

[iamswain]

Just came across this issue, tried to build in a work-around to disable srcset for only the cover block, but didn't manage to find a way. Decided to use JavaScript to remove the srcset attribute from the cover block. Obviously and less-than-ideal solution, but until this bug gets resolved the only one I got.

[HUisHU-Sebastian]

Found this issue while preparing a website for launch and was annoyed. Dug around in the Wordpress code and found that the srcset gets added by the function wp_img_tag_add_srcset_and_sizes_attr, which is filterable. So i wrote a small filter that disables the srcset-generation explicitly for cover blocks:

function gb_gh_prevent_responsive_images_on_cover_block( $original_response, $image, $context, $attachment_id ){
	$processor = new WP_HTML_Tag_Processor($image);
	if( $processor->next_tag('img') && $processor->has_class( 'wp-block-cover__image-background' )){
		return false;
	}
	return $original_response;
}
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', 'gb_gh_prevent_responsive_images_on_cover_block', 10, 4 );

Usage: Drop it into your functions.php or somewhere else convenient ;)

Happy Coding!