Copy object-position & object-fit into style attribute to reduce LCP

[schlessera]

This is moved over from outstanding issues on the PR in the ampproject/amp-wp repository (ampproject/amp-wp#5350 (comment)).

Via @westonruter:

They are valid on amp-img. If supplied on an img, then the AMP_Image_Sanitizer passes them through.

Nevertheless, for the purposes of SSR images, given this non-optimized input:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top"></amp-img>

The Node.js Optimizer does this for SSR:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top" i-amphtml-ssr data-hero class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:512px;height:250px;" i-amphtml-layout="fixed">
	<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" object-fit="cover" object-position="right top" src="https://amp.dev/static/img/icons/icon-512x512.png">
</amp-img>

So it is copying the object-fit and object-position attributes. Nevertheless, the Node.js Optimizer does not seem to be right here either. I can see that the AMP runtime is also adding an inline style to the img: object-fit: cover; object-position: right top;. This is causing some LCP. So in reality, the object-position and object-fit should instead be copied into a style attribute like so:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top" i-amphtml-ssr data-hero class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:512px;height:250px;" i-amphtml-layout="fixed">
	<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" style="object-fit: cover; object-position: right top;" src="https://amp.dev/static/img/icons/icon-512x512.png">
</amp-img>

This will eliminate any negative LCP once the runtime initializes.

This also needs to be fixed in the Node.js Optimizer.

See AMP Playground example.

[schlessera]

Copying the styles over will need to take the CSS byte count limit into account. If we're going over the count, we can just omit the inline style in that case, as it will automatically be corrected by the AMP runtime (although we're forced to take the LCP hit then).