core(image-elements): remove mimeType from artifact (#13265)

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

@@ -89,8 +89,7 @@ class ImageAspectRatio extends Audit {
       // - filter all svgs as they have no natural dimensions to audit
       // - filter out images that have falsy naturalWidth or naturalHeight
       return !image.isCss &&
-        image.mimeType &&
-        image.mimeType !== 'image/svg+xml' &&
+        URL.guessMimeType(image.src) !== 'image/svg+xml' &&
         image.naturalDimensions &&
         image.naturalDimensions.height > 5 &&
         image.naturalDimensions.width > 5 &&

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

@@ -95,7 +95,7 @@ function isCandidate(image) {
   ) {
     return false;
   }
-  if (image.mimeType === 'image/svg+xml') {
+  if (URL.guessMimeType(image.src) === 'image/svg+xml') {
     return false;
   }
   if (image.isCss) {

lighthouse-core/audits/unsized-images.js

@@ -106,7 +106,7 @@ class UnsizedImages extends Audit {
    * @return {boolean}
    */
   static isNonNetworkSvg(image) {
-    const isSvg = image.mimeType === 'image/svg+xml';
+    const isSvg = URL.guessMimeType(image.src) === 'image/svg+xml';
     const urlScheme = image.src.slice(0, image.src.indexOf(':'));
     const isNonNetwork = URL.isNonNetworkProtocol(urlScheme);
     return isSvg && isNonNetwork;

lighthouse-core/computed/image-records.js

@@ -5,6 +5,7 @@
  */
 'use strict';
 
+const URL = require('../lib/url-shim.js');
 const makeComputedArtifact = require('./computed-artifact.js');
 
 class ImageRecords {
@@ -28,12 +29,12 @@ class ImageRecords {
 
   /**
    * @param {{ImageElements: LH.Artifacts['ImageElements'], networkRecords: LH.Artifacts.NetworkRequest[]}} data
-   * @return {Promise<LH.Artifacts.ImageElement[]>}
+   * @return {Promise<LH.Artifacts.ImageElementRecord[]>}
    */
   static async compute_(data) {
     const indexedNetworkRecords = ImageRecords.indexNetworkRecords(data.networkRecords);
 
-    /** @type {LH.Artifacts.ImageElement[]} */
+    /** @type {LH.Artifacts.ImageElementRecord[]} */
     const imageRecords = [];
 
     for (const element of data.ImageElements) {
@@ -43,7 +44,7 @@ class ImageRecords {
       // Don't change the guessed mime type if no mime type was found.
       imageRecords.push({
         ...element,
-        mimeType: mimeType ? mimeType : element.mimeType,
+        mimeType: mimeType ? mimeType : URL.guessMimeType(element.src),
       });
     }
 

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

@@ -12,7 +12,6 @@
 const log = require('lighthouse-logger');
 const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
 const pageFunctions = require('../../lib/page-functions.js');
-const URL = require('../../lib/url-shim.js');
 const FontSize = require('./seo/font-size.js');
 
 /* global window, getElementsInDocument, Image, getNodeDetails, ShadowRoot */
@@ -310,8 +309,6 @@ class ImageElements extends FRGatherer {
     let skippedCount = 0;
 
     for (const element of elements) {
-      element.mimeType = URL.guessMimeType(element.src);
-
       if (reachedGatheringBudget) {
         skippedCount++;
         continue;

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

@@ -13,7 +13,6 @@ const assert = require('assert').strict;
 function generateImage(clientSize, naturalDimensions, props, src = 'https://google.com/logo.png') {
   return {
     src,
-    mimeType: 'image/png',
     computedStyles: {objectFit: 'fill'},
     naturalDimensions,
     node: {devtoolsNodePath: '1,HTML,1,IMG'},
@@ -146,11 +145,11 @@ describe('Images: aspect-ratio audit', () => {
           {width: 150, height: 150},
           {width: 100, height: 200},
           {
-            mimeType: 'image/svg+xml',
             isCss: false,
             displayedWidth: 150,
             displayedHeight: 150,
-          }
+          },
+          'https://google.com/logo.svg'
         ),
       ],
     });

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

@@ -13,7 +13,7 @@ const assert = require('assert').strict;
 const WIDTH = 800;
 const HEIGHT = 600;
 
-function generateImage(clientSize, naturalDimensions, props, src = 'https://google.com/logo.png') {
+function generateImage(clientSize, naturalDimensions, props, src) {
   const clientRect = {
     clientRect: {
       top: 0,
@@ -25,7 +25,6 @@ function generateImage(clientSize, naturalDimensions, props, src = 'https://goog
   return {
     computedStyles: {objectFit: 'fill'},
     src,
-    mimeType: 'image/png',
     naturalDimensions,
     node: {devtoolsNodePath: '1,HTML,1,IMG'},
     ...clientSize,
@@ -35,15 +34,16 @@ function generateImage(clientSize, naturalDimensions, props, src = 'https://goog
 }
 
 describe('Images: size audit', () => {
-  function testImage(condition, data) {
+  function testImage(condition, data, src = 'https://google.com/logo.png') {
     const description = `identifies when an image ${condition}`;
     it(description, () => {
       const result = ImageSizeResponsiveAudit.audit({
         ImageElements: [
           generateImage(
             {displayedWidth: data.clientSize[0], displayedHeight: data.clientSize[1]},
             {width: data.naturalSize[0], height: data.naturalSize[1]},
-            data.props
+            data.props,
+            src
           ),
         ],
         ViewportDimensions: {
@@ -100,10 +100,7 @@ describe('Images: size audit', () => {
     score: 1,
     clientSize: [100, 100],
     naturalSize: [5, 5],
-    props: {
-      mimeType: 'image/svg+xml',
-    },
-  });
+  }, 'https://google.com/logo.svg');
 
   testImage('is a css image', {
     score: 1,

lighthouse-core/test/audits/unsized-images-test.js

@@ -86,7 +86,6 @@ describe('Sized images audit', () => {
         width: null,
         height: null,
       },
-      mimeType: 'image/svg+xml',
       src: 'data:image/svg+xml;base64,foo',
     });
     expect(result.score).toEqual(1);
@@ -137,7 +136,6 @@ describe('Sized images audit', () => {
           width: null,
           height: '100',
         },
-        mimeType: 'image/svg+xml',
       });
       expect(result.score).toEqual(0);
     });

lighthouse-core/test/computed/image-records-test.js

@@ -162,31 +162,14 @@ describe('compute_', () => {
     expect(elements).toEqual([mockElement({mimeType: 'image/png'})]);
   });
 
-  it('keep element with no request', async () => {
+  it('guess mime type if no request', async () => {
     const elements = await ImageRecords.compute_({
       ImageElements: [
-        mockElement({mimeType: 'image/png'}),
+        mockElement(),
       ],
       networkRecords: [],
     });
 
     expect(elements).toEqual([mockElement({mimeType: 'image/png'})]);
   });
-
-  it('keep guessed mime type of record has none', async () => {
-    const elements = await ImageRecords.compute_({
-      ImageElements: [
-        mockElement({mimeType: 'image/png'}),
-      ],
-      networkRecords: [
-        mockRequest({
-          url: 'https://example.com/img.png',
-          finished: true,
-          statusCode: 200,
-        }),
-      ],
-    });
-
-    expect(elements).toEqual([mockElement({mimeType: 'image/png'})]);
-  });
 });

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

@@ -317,7 +317,6 @@ describe('FR compat', () => {
 
     expect(artifact).toEqual([
       mockElement({
-        mimeType: 'image/jpeg',
         cssEffectiveRules: {
           width: '200px',
           height: '200px',
@@ -350,7 +349,6 @@ describe('FR compat', () => {
 
     expect(artifact).toEqual([
       mockElement({
-        mimeType: 'image/jpeg',
         cssEffectiveRules: {
           width: '200px',
           height: '200px',

types/artifacts.d.ts

@@ -489,8 +489,6 @@ declare module Artifacts {
     isPicture: boolean;
     /** Flags whether this element was contained within a ShadowRoot */
     isInShadowDOM: boolean;
-    /** The MIME type of the underlying image file. */
-    mimeType?: string;
     /** Details for node in DOM for the image element */
     node: NodeDetails;
     /** The loading attribute of the image. */
@@ -873,6 +871,11 @@ declare module Artifacts {
   }
 
   type ConsoleMessage = ConsoleAPICall | ConsoleException | ConsoleProtocolLog;
+
+  interface ImageElementRecord extends ImageElement {
+    /** The MIME type of the underlying image file. */
+    mimeType?: string;
+  }
 }
 
 export interface Trace {