From c3620b18e4ecf880763594f6cfcb1c2bc4783e40 Mon Sep 17 00:00:00 2001
From: Patrick Hulce <patrick.hulce@gmail.com>
Date: Fri, 9 Feb 2018 07:13:07 -0800
Subject: [PATCH] core(responsive-images): move images with no dimensions to
 offscreen audit (#4487)

---
 lighthouse-cli/test/fixtures/byte-efficiency/tester.html  | 6 ++++++
 .../test/smokehouse/byte-efficiency/expectations.js       | 2 ++
 .../audits/byte-efficiency/offscreen-images.js            | 2 +-
 .../audits/byte-efficiency/uses-responsive-images.js      | 8 ++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
index 41c7fe7f668a..99a84d8a5719 100644
--- a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
+++ b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -103,6 +103,12 @@ <h2>Byte efficiency tester page</h2>
   <!-- FAIL(offscreen): image is offscreen -->
   <img style="margin-top: 1000px; width: 120px; height: 80px;" src="lighthouse-480x320.webp">
 
+  <!-- PASS(optimized): image is JPEG optimized -->
+  <!-- PASS(webp): image is WebP optimized -->
+  <!-- PASS(responsive): image is not visible -->
+  <!-- FAIL(offscreen): image is not visible -->
+  <div class="onscreen" style="display: none;"><img class="onscreen" style="width: 120px; height: 80px;" src="lighthouse-480x320.webp?invisible"></div>
+
   <!-- PASS(optimized): image is vector -->
   <!-- PASS(webp): image is vector -->
   <!-- PASS(responsive): image is vector -->
diff --git a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
index a45271ed768a..523c9d43f5ea 100644
--- a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
+++ b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
@@ -67,6 +67,8 @@ module.exports = [
                 url: /lighthouse-unoptimized.jpg$/,
               }, {
                 url: /lighthouse-480x320.webp$/,
+              }, {
+                url: /lighthouse-480x320.webp\?invisible$/,
               }, {
                 url: /large.svg$/,
               },
diff --git a/lighthouse-core/audits/byte-efficiency/offscreen-images.js b/lighthouse-core/audits/byte-efficiency/offscreen-images.js
index ea30f361c1d1..58b03aa736a8 100644
--- a/lighthouse-core/audits/byte-efficiency/offscreen-images.js
+++ b/lighthouse-core/audits/byte-efficiency/offscreen-images.js
@@ -28,7 +28,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       name: 'offscreen-images',
       description: 'Offscreen images',
       informative: true,
-      helpText: 'Consider lazy-loading offscreen images to improve page load speed ' +
+      helpText: 'Consider lazy-loading offscreen and hidden images to improve page load speed ' +
         'and time to interactive. ' +
         '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).',
       requiredArtifacts: ['ImageUsage', 'ViewportDimensions', 'traces', 'devtoolsLogs'],
diff --git a/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js b/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js
index 584e4c1e6e0d..44b3a4e3a3ab 100644
--- a/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js
+++ b/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js
@@ -50,6 +50,12 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     const totalBytes = image.networkRecord.resourceSize;
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 
+    // If the image has 0 dimensions, it's probably hidden/offscreen, so let the offscreen-images
+    // audit handle it instead.
+    if (!usedPixels) {
+      return null;
+    }
+
     if (!Number.isFinite(wastedRatio)) {
       return new Error(`Invalid image sizing information ${url}`);
     }
@@ -85,6 +91,8 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       }
 
       const processed = UsesResponsiveImages.computeWaste(image, DPR);
+      if (!processed) return;
+
       if (processed instanceof Error) {
         debugString = processed.message;
         Sentry.captureException(processed, {tags: {audit: this.meta.name}, level: 'warning'});