diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js index 50cc5da40a..b81c95cceb 100644 --- a/lighthouse-core/audits/image-aspect-ratio.js +++ b/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 && diff --git a/lighthouse-core/audits/image-size-responsive.js b/lighthouse-core/audits/image-size-responsive.js index 45a14e6a44..ec4ff234f5 100644 --- a/lighthouse-core/audits/image-size-responsive.js +++ b/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) { diff --git a/lighthouse-core/audits/unsized-images.js b/lighthouse-core/audits/unsized-images.js index bc6364c752..d44e8d541f 100644 --- a/lighthouse-core/audits/unsized-images.js +++ b/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; diff --git a/lighthouse-core/computed/image-records.js b/lighthouse-core/computed/image-records.js index 74b1e04b52..1d91662a3a 100644 --- a/lighthouse-core/computed/image-records.js +++ b/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} + * @return {Promise} */ 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), }); } diff --git a/lighthouse-core/gather/gatherers/image-elements.js b/lighthouse-core/gather/gatherers/image-elements.js index f28bccf384..0f65cd48aa 100644 --- a/lighthouse-core/gather/gatherers/image-elements.js +++ b/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; diff --git a/lighthouse-core/test/audits/image-aspect-ratio-test.js b/lighthouse-core/test/audits/image-aspect-ratio-test.js index b9ebec56db..3f885b5bd8 100644 --- a/lighthouse-core/test/audits/image-aspect-ratio-test.js +++ b/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' ), ], }); diff --git a/lighthouse-core/test/audits/image-size-responsive-test.js b/lighthouse-core/test/audits/image-size-responsive-test.js index 8a9f0c93da..f37e34e2ea 100644 --- a/lighthouse-core/test/audits/image-size-responsive-test.js +++ b/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,7 +34,7 @@ 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({ @@ -43,7 +42,8 @@ describe('Images: size audit', () => { 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, diff --git a/lighthouse-core/test/audits/unsized-images-test.js b/lighthouse-core/test/audits/unsized-images-test.js index 6d87e45a26..13217ffdd3 100644 --- a/lighthouse-core/test/audits/unsized-images-test.js +++ b/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); }); diff --git a/lighthouse-core/test/computed/image-records-test.js b/lighthouse-core/test/computed/image-records-test.js index 8b46bbc105..253f0b2a4e 100644 --- a/lighthouse-core/test/computed/image-records-test.js +++ b/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'})]); - }); }); diff --git a/lighthouse-core/test/gather/gatherers/image-elements-test.js b/lighthouse-core/test/gather/gatherers/image-elements-test.js index 96f45b1feb..591a66ceee 100644 --- a/lighthouse-core/test/gather/gatherers/image-elements-test.js +++ b/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', diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts index f0ef2f8e59..2ab72abb2e 100644 --- a/types/artifacts.d.ts +++ b/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 {