Gutenberg: Cover Block: use <img> instead of background-image

[tomaszpoliszuk]

Is your feature request related to a problem? Please describe.
right now Cover Block uses background-image which is not ideal solution (one image size to all devices)

Describe the solution you'd like
instead of using background-image it could use <img> element with srcset and additional styles (example, .wp-block-cover__image is <img> element):
.wp-block-cover { position: relative; }
.wp-block-cover__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
possibly with option to alter sizes attribute

Describe alternatives you've considered
Removing Cover block and replacing it with custom made one.

[opicron]

I always prefer background-image over img for cover block. If above request is honored make it optional.

[tomaszpoliszuk]

@opicron what are benefits of using background-image over img except that you prefer it?
I'm asking because I don't see any advantages.

[muhammedmagdi]

@tomaszpoliszuk
object-fit: cover isn't supported by all browsers
Background image is the best in this case.

[tomaszpoliszuk]

@muhammedmagdi
Support for old browsers can be provided using polyfill.
Using with benefits from srcset provides better optimisation for various screen sizes (mobile devices will receive mobile image, desktop devices will receive desktop image) and that have impact on page load and SEO optimisation.

[seothemes]

+1

[WraithKenny]

This is the only practical solution I think.

[cr0ybot]

@tomaszpoliszuk

Support for old browsers can be provided using polyfill.
Using with benefits from srcset provides better optimisation for various screen sizes (mobile devices will receive mobile image, desktop devices will receive desktop image) and that have impact on page load and SEO optimisation.

+1 to all of this.

I would like to point out a new CSS property that I just learned about, image-set, that could potentially solve this problem in a progressively enhanced way. It's currently in working draft stage, but it provides a way to attach multiple image sizes to a background-image:

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);

At this stage it doesn't seem as robust as srcset, but it's a step in the right direction and could potentially be implemented to progressively-enhance when the feature becomes available in browsers.

However, as noted in the Mozilla docs, there are accessibility concerns about using background images _in general_, plus it's even newer than object-fit, which I currently rely very heavily on to accomplish "optimized" background images. So, with all that said, I believe proper <img> tags are the way to go, however it requires more WP-provided CSS for the theme to contend with.

[coreyworrell]

This is basically a deal-breaker for websites these days. Loading the same size image for desktop and mobile for a cover block/hero is considered a bad practice and WordPress should not promote this.

[eric-michel]

Sometime in the last year, Google updated Lighthouse (and, ostensibly, their ranking metrics) to heavily weight Largest Contentful Paint. This metric measures the load time of the largest element on the page.

Given that Cover Blocks are often times set to be alignfull at the top of a page, a Cover Block will often be the largest element, and will require a very large image to account for high resolution monitors. Without the ability to use srcset or another option to serve scaled images to smaller viewports, performance suffers. Our Lighthouse scores have plummeted from the mid 90s to the mid 60s fairly consistently since the inclusion of LCP, and can be traced directly to cover block images.

I agree that abandoning background-image in favor of an <img> element that uses srcset is the way to go. image-set doesn't seem ready for prime-time use yet.

I know it's too late to include this in WP 5.5, but it seems like it should be a critical fix for 5.6.