core(image-elements): surface css properties in artifact

lighthouse-core/audits/image-aspect-ratio.js

@@ -87,7 +87,6 @@ class ImageAspectRatio extends Audit {
    */
   static audit(artifacts) {
     const images = artifacts.ImageElements;
-
     /** @type {LH.IcuMessage[]} */
     const warnings = [];
     /** @type {Array<{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
@@ -96,7 +95,7 @@ class ImageAspectRatio extends Audit {
       // - filter out css background images since we don't have a reliable way to tell if it's a
       //   sprite sheet, repeated for effect, etc
       // - filter out images that don't have following properties:
-      //   networkRecord, width, height, images that use `object-fit`: `cover` or `contain`
+      //   networkRecord, width, height, `object-fit` property
       // - filter all svgs as they have no natural dimensions to audit
       return !image.isCss &&
         image.mimeType &&
@@ -105,7 +104,7 @@ class ImageAspectRatio extends Audit {
         image.naturalWidth > 5 &&
         image.displayedWidth &&
         image.displayedHeight &&
-        !image.usesObjectFit;
+        image.cssComputedObjectFit === 'fill';
     }).forEach(image => {
       const wellDefinedImage = /** @type {WellDefinedImage} */ (image);
       const processed = ImageAspectRatio.computeAspectRatios(wellDefinedImage);

lighthouse-core/audits/image-size-responsive.js

@@ -65,6 +65,12 @@ function isVisible(imageRect, viewportDimensions) {
  * @return {boolean}
  */
 function isCandidate(image) {
+  /** image-rendering solution for pixel art scaling.
+   * https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
+  */
+  const reqPixelScaling = ['pixelated', 'crisp-edges'];
+  // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
+  const getDensityDescriptor = / \d+(\.\d+)?x/;
   if (image.displayedWidth <= 1 || image.displayedHeight <= 1) {
     return false;
   }
@@ -77,13 +83,15 @@ function isCandidate(image) {
   if (image.isCss) {
     return false;
   }
-  if (image.usesObjectFit) {
+  if (image.cssComputedObjectFit !== 'fill') {
     return false;
   }
-  if (image.usesPixelArtScaling) {
+  // Check if pixel art scaling is used.
+  if (reqPixelScaling.includes(image.cssComputedImageRendering)) {
     return false;
   }
-  if (image.usesSrcSetDensityDescriptor) {
+  // Check if density descriptor is used.
+  if (getDensityDescriptor.test(image.srcset)) {
     return false;
   }
   return true;

lighthouse-core/gather/gatherers/image-elements.js

@@ -76,15 +76,9 @@ function getHTMLImages(allElements) {
       isCss: false,
       isPicture,
       loading: element.loading,
-      usesObjectFit: ['cover', 'contain', 'scale-down', 'none'].includes(
-        computedStyle.getPropertyValue('object-fit')
-      ),
-      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
-        computedStyle.getPropertyValue('image-rendering')
-      ),
+      cssComputedObjectFit: computedStyle.getPropertyValue('object-fit'),
+      cssComputedImageRendering: computedStyle.getPropertyValue('image-rendering'),
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
-      // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
-      usesSrcSetDensityDescriptor: / \d+(\.\d+)?x/.test(element.srcset),
       // @ts-expect-error - getNodeDetails put into scope via stringification
       ...getNodeDetails(element),
     };
@@ -130,11 +124,8 @@ function getCSSImages(allElements) {
       isCss: true,
       isPicture: false,
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
-      usesObjectFit: false,
-      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
-        style.getPropertyValue('image-rendering')
-      ),
-      usesSrcSetDensityDescriptor: false,
+      cssComputedObjectFit: '',
+      cssComputedImageRendering: style.getPropertyValue('image-rendering'),
       // @ts-expect-error - getNodeDetails put into scope via stringification
       ...getNodeDetails(element),
     });

lighthouse-core/test/audits/image-aspect-ratio-test.js

@@ -11,9 +11,14 @@ const assert = require('assert').strict;
 /* eslint-env jest */
 
 function generateImage(clientSize, naturalSize, props, src = 'https://google.com/logo.png') {
-  const image = {src, mimeType: 'image/png'};
-  Object.assign(image, clientSize, naturalSize, props);
-  return image;
+  return {
+    src,
+    mimeType: '...',
+    cssComputedObjectFit: 'fill',
+    ...clientSize,
+    ...naturalSize,
+    ...props,
+  };
 }
 
 describe('Images: aspect-ratio audit', () => {
@@ -54,7 +59,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -64,7 +68,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: true,
-      usesObjectFit: false,
     },
   });
 
@@ -74,7 +77,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -84,7 +86,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 500],
     props: {
       isCss: false,
-      usesObjectFit: true,
+      cssComputedObjectFit: 'cover',
     },
   });
 
@@ -94,17 +96,14 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 500],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
-
   testImage('is smaller than natural aspect ratio', {
     score: 0,
     clientSize: [200, 200],
     naturalSize: [400, 300],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -114,7 +113,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 69],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -124,7 +122,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [300, 300],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -134,7 +131,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [100, 100],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -144,7 +140,6 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [1, 1],
     props: {
       isCss: false,
-      usesObjectFit: false,
     },
   });
 
@@ -157,7 +152,6 @@ describe('Images: aspect-ratio audit', () => {
           {
             mimeType: 'image/svg+xml',
             isCss: false,
-            usesObjectFit: false,
           }
         ),
       ],

lighthouse-core/test/audits/image-size-responsive-test.js

@@ -23,7 +23,8 @@ function generateImage(clientSize, naturalSize, props, src = 'https://google.com
       right: clientSize.displayedWidth,
     },
   };
-  Object.assign(image, clientSize, naturalSize, clientRect, props);
+  // eslint-disable-next-line max-len
+  Object.assign(image, clientSize, naturalSize, clientRect, {cssComputedObjectFit: 'fill', ...props});
   return image;
 }
 
@@ -112,7 +113,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesObjectFit: true,
+      cssComputedObjectFit: 'cover',
     },
   });
 
@@ -121,7 +122,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesPixelArtScaling: true,
+      cssComputedImageRendering: 'pixelated',
     },
   });
 
@@ -130,7 +131,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesSrcSetDensityDescriptor: true,
+      srcset: 'https://google.com/logo.png 1x',
     },
   });