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.