Skip to content

Commit

Permalink
core(image-delivery-insight): use strings without savings (#16364)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamraine
adamraine authored Mar 3, 2025
1 parent 03fc965 commit 4397883
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 46 deletions.
41 changes: 31 additions & 10 deletions core/audits/insights/image-delivery-insight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.js';
import {UIStrings, ImageOptimizationType} from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.js';

import {Audit} from '../audit.js';
import * as i18n from '../../lib/i18n/i18n.js';
Expand Down Expand Up @@ -34,6 +34,33 @@ class ImageDeliveryInsight extends Audit {
};
}

/**
* Note: This function is a copy of the `getOptimizationMessage` function found in the imported
* module. We could re-use the output of that function but it's output is shimmed to a {i18nId, values} object
* which is not consistent with the TS return type.
*
* We also can't change the function to output the untranslated strings because the responsive
* size string has placeholders that need to be resolved here.
*
* @param {import('@paulirish/trace_engine/models/trace/insights/ImageDelivery.js').ImageOptimization} optimization
* @returns
*/
static getOptimizationMessage(optimization) {
switch (optimization.type) {
case ImageOptimizationType.ADJUST_COMPRESSION:
return str_(UIStrings.useCompression);
case ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION:
return str_(UIStrings.useModernFormat);
case ImageOptimizationType.VIDEO_FORMAT:
return str_(UIStrings.useVideoFormat);
case ImageOptimizationType.RESPONSIVE_SIZE:
return str_(UIStrings.useResponsiveSize, {
PH1: `${optimization.fileDimensions.width}x${optimization.fileDimensions.height}`,
PH2: `${optimization.displayDimensions.width}x${optimization.displayDimensions.height}`,
});
}
}

/**
* @param {LH.Artifacts} artifacts
* @param {LH.Audit.Context} context
Expand All @@ -46,10 +73,6 @@ class ImageDeliveryInsight extends Audit {
return;
}

const relatedEventsMap = insight.relatedEvents && !Array.isArray(insight.relatedEvents) ?
insight.relatedEvents :
null;

/** @type {LH.Audit.Details.Table['headings']} */
const headings = [
/* eslint-disable max-len */
Expand All @@ -66,11 +89,9 @@ class ImageDeliveryInsight extends Audit {
wastedBytes: image.byteSavings,
subItems: {
type: /** @type {const} */ ('subitems'),
// TODO: when strings update to remove number from "reason" uistrings, update this
// to use `image.optimizations.map(...)` and construct strings from the type.
items: (relatedEventsMap?.get(image.request) ?? []).map((reason, i) => ({
reason,
wastedBytes: image.optimizations[i].byteSavings,
items: image.optimizations.map(optimization => ({
reason: this.getOptimizationMessage(optimization),
wastedBytes: optimization.byteSavings,
})),
},
}));
Expand Down
20 changes: 8 additions & 12 deletions core/test/fixtures/user-flows/reports/sample-flow-result.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23263,11 +23263,11 @@
"type": "subitems",
"items": [
{
"reason": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size. (Est 31094)",
"reason": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.",
"wastedBytes": 31094
},
{
"reason": "This image file is larger than it needs to be (984x555) for its displayed dimensions (567x320). Use responsive images to reduce the image download size. (Est 81519)",
"reason": "This image file is larger than it needs to be (984x555) for its displayed dimensions (567x320). Use responsive images to reduce the image download size.",
"wastedBytes": 81519
}
]
Expand Down Expand Up @@ -28223,18 +28223,14 @@
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | description": [
"audits[image-delivery-insight].description"
],
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | estimatedSavings": [
{
"values": {
"PH1": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.",
"PH2": 31094
},
"path": "audits[image-delivery-insight].details.items[0].subItems.items[0].reason"
},
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | useModernFormat": [
"audits[image-delivery-insight].details.items[0].subItems.items[0].reason"
],
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | useResponsiveSize": [
{
"values": {
"PH1": "This image file is larger than it needs to be (984x555) for its displayed dimensions (567x320). Use responsive images to reduce the image download size.",
"PH2": 81519
"PH1": "984x555",
"PH2": "567x320"
},
"path": "audits[image-delivery-insight].details.items[0].subItems.items[1].reason"
}
Expand Down
44 changes: 20 additions & 24 deletions core/test/results/sample_v2.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6044,7 +6044,7 @@
"type": "subitems",
"items": [
{
"reason": "Using video formats instead of GIFs can improve the download size of animated content. (Est 682028)",
"reason": "Using video formats instead of GIFs can improve the download size of animated content.",
"wastedBytes": 682028
}
]
Expand All @@ -6058,7 +6058,7 @@
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x30). Use responsive images to reduce the image download size. (Est 111541)",
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x30). Use responsive images to reduce the image download size.",
"wastedBytes": 111541
}
]
Expand All @@ -6072,7 +6072,7 @@
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size. (Est 106476)",
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size.",
"wastedBytes": 106476
}
]
Expand All @@ -6086,7 +6086,7 @@
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size. (Est 106476)",
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size.",
"wastedBytes": 106476
}
]
Expand All @@ -6100,7 +6100,7 @@
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size. (Est 56604)",
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size.",
"wastedBytes": 56604
}
]
Expand All @@ -6114,7 +6114,7 @@
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size. (Est 56604)",
"reason": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size.",
"wastedBytes": 56604
}
]
Expand Down Expand Up @@ -11113,46 +11113,42 @@
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | description": [
"audits[image-delivery-insight].description"
],
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | estimatedSavings": [
{
"values": {
"PH1": "Using video formats instead of GIFs can improve the download size of animated content.",
"PH2": 682028
},
"path": "audits[image-delivery-insight].details.items[0].subItems.items[0].reason"
},
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | useVideoFormat": [
"audits[image-delivery-insight].details.items[0].subItems.items[0].reason"
],
"node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | useResponsiveSize": [
{
"values": {
"PH1": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x30). Use responsive images to reduce the image download size.",
"PH2": 111541
"PH1": "1024x678",
"PH2": "240x30"
},
"path": "audits[image-delivery-insight].details.items[1].subItems.items[0].reason"
},
{
"values": {
"PH1": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size.",
"PH2": 106476
"PH1": "1024x678",
"PH2": "240x160"
},
"path": "audits[image-delivery-insight].details.items[2].subItems.items[0].reason"
},
{
"values": {
"PH1": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (240x160). Use responsive images to reduce the image download size.",
"PH2": 106476
"PH1": "1024x678",
"PH2": "240x160"
},
"path": "audits[image-delivery-insight].details.items[3].subItems.items[0].reason"
},
{
"values": {
"PH1": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size.",
"PH2": 56604
"PH1": "1024x678",
"PH2": "720x480"
},
"path": "audits[image-delivery-insight].details.items[4].subItems.items[0].reason"
},
{
"values": {
"PH1": "This image file is larger than it needs to be (1024x678) for its displayed dimensions (720x480). Use responsive images to reduce the image download size.",
"PH2": 56604
"PH1": "1024x678",
"PH2": "720x480"
},
"path": "audits[image-delivery-insight].details.items[5].subItems.items[0].reason"
}
Expand Down

0 comments on commit 4397883

Please sign in to comment.