[RPP] Add byte savings to image delivery insight

This required adding a total `byteSavings` to each image since there
could be multiple optimizations for a single image.

Bug: 372897377
Change-Id: I1c82f66383441abd1638b85de11681c5c16423b6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6090115
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Connor Clark <[email protected]>

Author: Adam Raine

front_end/models/trace/insights/ImageDelivery.test.ts

@@ -40,10 +40,13 @@ describeWithEnvironment('ImageDelivery', function() {
 
     const insight =
         getInsightOrError('ImageDelivery', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+    assert.strictEqual(insight.totalByteSavings, 2007125);
     assert.deepStrictEqual(
-        insight.optimizableImages.map(o => ({url: o.request.args.data.url, optimizations: o.optimizations})),
+        insight.optimizableImages.map(
+            o => ({url: o.request.args.data.url, optimizations: o.optimizations, byteSavings: o.byteSavings})),
         [
           {
+            byteSavings: 1057876,
             optimizations: [
               {
                 byteSavings: 1057876,
@@ -54,6 +57,7 @@ describeWithEnvironment('ImageDelivery', function() {
                 'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg',
           },
           {
+            byteSavings: 682028,
             optimizations: [
               {
                 byteSavings: 682028,
@@ -64,6 +68,7 @@ describeWithEnvironment('ImageDelivery', function() {
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif',
           },
           {
+            byteSavings: 49760,
             optimizations: [
               {
                 byteSavings: 49760,
@@ -74,6 +79,7 @@ describeWithEnvironment('ImageDelivery', function() {
                 'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp',
           },
           {
+            byteSavings: 41421,
             optimizations: [
               {
                 byteSavings: 41421,
@@ -86,6 +92,7 @@ describeWithEnvironment('ImageDelivery', function() {
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp',
           },
           {
+            byteSavings: 176040,
             optimizations: [
               {
                 byteSavings: 134075,

front_end/models/trace/insights/ImageDelivery.ts

@@ -101,6 +101,7 @@ export type ImageOptimization = {
 export interface OptimizableImage {
   request: Types.Events.SyntheticNetworkRequest;
   optimizations: ImageOptimization[];
+  byteSavings: number;
   /**
    * If the an image resource has multiple `PaintImage`s, we compare its intrinsic size to the largest of the displayed sizes.
    *
@@ -112,6 +113,7 @@ export interface OptimizableImage {
 
 export type ImageDeliveryInsightModel = InsightModel<{
   optimizableImages: OptimizableImage[],
+  totalByteSavings: number,
 }>;
 
 function getOptimizationMessage(optimization: ImageOptimization): string {
@@ -218,9 +220,20 @@ export function generateInsight(
       }
     }
 
+    // At this point (before looking at image size), the # of optimizations should only ever be 1 or 0
+    // Math.max handles both cases correctly, and is defensive against future patches that would add
+    // more than 1 format-specific optimization by this point.
+    const imageByteSavingsFromFormat = Math.max(0, ...optimizations.map(o => o.byteSavings));
+    let imageByteSavings = imageByteSavingsFromFormat;
+
     const wastedPixelRatio = 1 - (largestImageDisplayPixels / imageFilePixels);
     if (wastedPixelRatio > 0) {
       const byteSavings = Math.round(wastedPixelRatio * imageBytes);
+
+      // This will compound the byte savings from any potential format changes with the image size
+      // optimization added here.
+      imageByteSavings += Math.round(wastedPixelRatio * (imageBytes - imageByteSavingsFromFormat));
+
       optimizations.push({
         type: ImageOptimizationType.RESPONSIVE_SIZE,
         byteSavings,
@@ -242,11 +255,13 @@ export function generateInsight(
         request,
         largestImagePaint,
         optimizations,
+        byteSavings: imageByteSavings,
       });
     }
   }
 
   return finalize({
     optimizableImages,
+    totalByteSavings: optimizableImages.reduce((total, img) => total + img.byteSavings, 0),
   });
 }

front_end/panels/timeline/components/insights/ImageDelivery.ts

@@ -59,6 +59,10 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     };
   }
 
+  override getEstimatedSavingsBytes(): number|null {
+    return this.model?.totalByteSavings ?? null;
+  }
+
   override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;