When using the featured image option to add a background image to a cover block, it pulls the 1024px version of the image. This causes the image to be blurry if the cover block is being used to display a full-width image at the top of a page (ex: page titles and blog posts featured images).
The cover block only pulls the 1024px version when using the featured image option for the background image.
When adding an image directly from the media library, the background is not blurry.
Steps to reproduce
Go to Appearance > Editor > Templates > Pages
Add a cover block (make sure it's full-width and not inside a smaller column or group)
Go to Add media > Use Featured Image
Save your changes
Go to any page, add a featured image, and update the page
See the blurry image on the front end
What you expected to happen
I expect the full-size image to be used to prevent the image from being stretched to accommodate full-width designs.
What actually happened
The 1024px version of the image is used, which causes the image to be blurry when covering a width greater than 1024px.
Impact
Some (< 50%)
Available workarounds?
No but the platform is still usable
Platform (Simple and/or Atomic)
Simple
Logs or notes
I've tested on the TwentyTwentyThree and Assembler themes, and the issue occurred on both.
This issue does not seem to occur on Atomic sites.
Increasing the size of the large sized media (under Settings > Media) does not help. I updated the large size to 2000px, uploaded a new image to test, and found that the 1024px version was still being used.
Quick summary
When using the
featured image
option to add a background image to a cover block, it pulls the 1024px version of the image. This causes the image to be blurry if the cover block is being used to display a full-width image at the top of a page (ex: page titles and blog posts featured images).The cover block only pulls the 1024px version when using the![blurry-featured-image](https://github.com/Automattic/wp-calypso/assets/102770686/482659fd-06fd-4d7f-aee3-33fa64550dbc)
featured image
option for the background image.When adding an image directly from the media library, the background is not blurry.![clear-image](https://github.com/Automattic/wp-calypso/assets/102770686/53596e95-b3fd-4b2e-a4e8-815a536b42c4)
Steps to reproduce
What you expected to happen
I expect the full-size image to be used to prevent the image from being stretched to accommodate full-width designs.
What actually happened
The 1024px version of the image is used, which causes the image to be blurry when covering a width greater than 1024px.
Impact
Some (< 50%)
Available workarounds?
No but the platform is still usable
Platform (Simple and/or Atomic)
Simple
Logs or notes
I've tested on the TwentyTwentyThree and Assembler themes, and the issue occurred on both.
This issue does not seem to occur on Atomic sites.
Increasing the size of the
large
sized media (under Settings > Media) does not help. I updated thelarge
size to 2000px, uploaded a new image to test, and found that the 1024px version was still being used.