core(ImageElements): add usesPixelArtScaling and usesSrcSetDensityDescriptor properties (#10481)

* feature: add usesPixelArtScaling flag to images

This new flag will be used by the ImageSizeResponsive audit (#10245), as those images are intendedly displayed in a pixelated form, so the audit should not flag them.

Note that `image-rendering: -mo-crisp-edges;` is also an accepted value in Firefox, however in such case, the computed style will return `crips-edges`.

* Fix how usesPixelArtRendering is computed

Apparently the code is executed in another process, which means, that functions mus be inlined, otherwise the code needs to go through some extra hoops.

* Add usesSrcSetDensityDescriptor

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

@@ -58,6 +58,11 @@ function getHTMLImages(allElements) {
       usesObjectFit: ['cover', 'contain', 'scale-down', 'none'].includes(
         computedStyle.getPropertyValue('object-fit')
       ),
+      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
+        computedStyle.getPropertyValue('image-rendering')
+      ),
+      // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
+      usesSrcSetDensityDescriptor: / \d+(\.\d+)?x/.test(element.srcset),
     };
   });
 }
@@ -95,6 +100,10 @@ function getCSSImages(allElements) {
       isCss: true,
       isPicture: false,
       usesObjectFit: false,
+      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
+        style.getPropertyValue('image-rendering')
+      ),
+      usesSrcSetDensityDescriptor: false,
       resourceSize: 0, // this will get overwritten below
     });
   }

types/artifacts.d.ts

@@ -394,6 +394,15 @@ declare global {
         isPicture: boolean;
         /** Flags whether this element was sized using a non-default `object-fit` CSS property. */
         usesObjectFit: boolean;
+        /** Flags whether this element was rendered using a pixel art scaling method.
+         *  See https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look for
+         *  details.
+         */
+        usesPixelArtScaling: boolean;
+        /** Flags whether the image has a srcset with density descriptors.
+         *  See https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
+         */
+        usesSrcSetDensityDescriptor: boolean;
         /** The size of the underlying image file in bytes. 0 if the file could not be identified. */
         resourceSize: number;
         /** The MIME type of the underlying image file. */