Enhancement: Image Optimizer is too aggressive for some images

[davewhitley]

Impacted plugin

None / Other

What

While using the Cover block, I'd like the background image to not be compressed as much (or not at all)

How

Context

I thought I had found a bug. I have a Cover block with a background image (2560px width) and the size is set to "full size". Looks good in the editor, but on the frontend, the compression is terrible. See example below. Look closely at the shirt (you might have to open the images). The compression is more obvious the larger the image.

compressed	Jetpack compression off

As a result, I had to turn off image compression, but that affects all images on the site. I think Jetpack is miscalculating the size of the background image and Jetpack doesn't know that the image gets bigger as the viewport is enlarged. The image is an img element, not a CSS background-image.

Snippet

<!-- wp:cover {"url":"https://securehostingalliance.wpcomstaging.com/wp-content/uploads/2025/01/hero-image-edited-1.jpeg","id":403,"dimRatio":0,"overlayColor":"contrast","isUserOverlayColor":true,"focalPoint":{"x":0.67,"y":1},"minHeight":65,"minHeightUnit":"vh","contentPosition":"bottom center","isDark":false,"sizeSlug":"full","align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"bottom":"0rem"}},"border":{"left":{"width":"0rem","style":"none"},"right":{"width":"0rem","style":"none"}},"color":{}},"textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="border-right-style:none;border-right-width:0rem;border-left-style:none;border-left-width:0rem;margin-top:0px;margin-bottom:0px;padding-bottom:0rem;min-height:65vh"><img class="wp-block-cover__image-background wp-image-403 size-full" alt="" src="https://securehostingalliance.wpcomstaging.com/wp-content/uploads/2025/01/hero-image-edited-1.jpeg" style="object-position:67% 100%" data-object-fit="cover" data-object-position="67% 100%"/><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0rem","left":"0rem"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"2.4rem","right":"2.4rem","bottom":"2.4rem","left":"2.4rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast"} -->
<div class="wp-block-column is-vertically-aligned-center has-contrast-color has-base-background-color has-text-color has-background has-link-color" style="padding-top:2.4rem;padding-right:2.4rem;padding-bottom:2.4rem;padding-left:2.4rem"><!-- wp:group {"style":{"spacing":{"blockGap":"2.4rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontSize":"x-large"} -->
<h2 class="wp-block-heading alignwide has-text-align-left has-primary-color has-text-color has-link-color has-x-large-font-size">Building Trust in Web Hosting</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"2.4rem"}},"fontSize":"medium","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"wrap"}} -->
<div class="wp-block-group has-medium-font-size"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">The Secure Hosting Alliance (SHA) is revolutionizing the web hosting industry by establishing the standards that truly matter.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Scroll to read more</p>
<!-- /wp:paragraph -->

<!-- wp:outermost/icon-block {"iconName":"","iconColor":"contrast","iconColorValue":"#120a08","width":"32px"} -->
<div class="wp-block-outermost-icon-block"><div class="icon-container has-icon-color has-contrast-color" style="color:#120a08;width:32px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.7099 11.29C17.617 11.1963 17.5064 11.1219 17.3845 11.0711C17.2627 11.0203 17.132 10.9942 16.9999 10.9942C16.8679 10.9942 16.7372 11.0203 16.6154 11.0711C16.4935 11.1219 16.3829 11.1963 16.2899 11.29L12.9999 14.59V7C12.9999 6.73478 12.8946 6.48043 12.707 6.29289C12.5195 6.10536 12.2652 6 11.9999 6C11.7347 6 11.4804 6.10536 11.2928 6.29289C11.1053 6.48043 10.9999 6.73478 10.9999 7V14.59L7.70994 11.29C7.52164 11.1017 7.26624 10.9959 6.99994 10.9959C6.73364 10.9959 6.47825 11.1017 6.28994 11.29C6.10164 11.4783 5.99585 11.7337 5.99585 12C5.99585 12.2663 6.10164 12.5217 6.28994 12.71L11.2899 17.71C11.385 17.801 11.4972 17.8724 11.6199 17.92C11.7396 17.9729 11.8691 18.0002 11.9999 18.0002C12.1308 18.0002 12.2602 17.9729 12.3799 17.92C12.5027 17.8724 12.6148 17.801 12.7099 17.71L17.7099 12.71C17.8037 12.617 17.8781 12.5064 17.9288 12.3846C17.9796 12.2627 18.0057 12.132 18.0057 12C18.0057 11.868 17.9796 11.7373 17.9288 11.6154C17.8781 11.4936 17.8037 11.383 17.7099 11.29Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Content Management: The issue relates to managing how images are represented and displayed in the user-generated content.
• [Feature] Images: The issue directly deals with image optimization, which falls under image-related features.
• [Boost Feature] Image CDN: The problem involves the Jetpack image optimization feature, which relates to the image content delivery network.
• [Boost Feature] Optimizations: The issue mentioned is about the aggressive optimization affecting user experience, indicating troubles with optimization features.