From 0116b4c5e3718ccb19af59b361c57e0fdf610ea2 Mon Sep 17 00:00:00 2001
From: Patrick Hulce <phulce@google.com>
Date: Mon, 23 Jan 2017 10:01:11 -0800
Subject: [PATCH] feedback

---
 .../dobetterweb/uses-responsive-images.js     |  2 +-
 .../gather/gatherers/image-usage.js           | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/lighthouse-core/audits/dobetterweb/uses-responsive-images.js b/lighthouse-core/audits/dobetterweb/uses-responsive-images.js
index 9e22551287b8..0d0fb52833b8 100644
--- a/lighthouse-core/audits/dobetterweb/uses-responsive-images.js
+++ b/lighthouse-core/audits/dobetterweb/uses-responsive-images.js
@@ -72,7 +72,7 @@ class UsesResponsiveImages extends Audit {
     const wastedBytes = Math.round(size * wastedRatio);
     const wastedTime = Math.round(transferTimeInMs * wastedRatio);
     const percentSavings = Math.round(100 * wastedRatio);
-    const label = `${Math.round(size / KB_IN_BYTES)}KB total, ${percentSavings}% savings`;
+    const label = `${Math.round(size / KB_IN_BYTES)}KB total, ${percentSavings}% potential savings`;
 
     return {
       wastedBytes,
diff --git a/lighthouse-core/gather/gatherers/image-usage.js b/lighthouse-core/gather/gatherers/image-usage.js
index c7bce98932e4..e34ea01bfe5e 100644
--- a/lighthouse-core/gather/gatherers/image-usage.js
+++ b/lighthouse-core/gather/gatherers/image-usage.js
@@ -23,7 +23,7 @@
 
 const Gatherer = require('./gatherer');
 
-/* global window, document, Image */
+/* global window, document, Image, URL */
 
 /* istanbul ignore next */
 function collectImageElementInfo() {
@@ -35,15 +35,23 @@ function collectImageElementInfo() {
     const entries = srcset.split(',');
     const relativeUrls = entries.map(entry => entry.trim().split(' ')[0]);
     return relativeUrls.map(url => {
-      const a = document.createElement('a');
-      a.href = url;
-      return a.href;
+      try {
+        return new URL(url, window.location.href).href;
+      } catch (e) {
+        return url;
+      }
     });
   }
 
+  /**
+   * @param {!HTMLImageElement|HTMLSourceElement} element
+   * @return {!Object}
+   */
   function getElementInfo(element) {
     return {
       tagName: element.tagName,
+      // currentSrc used over src to get the url as determined by the browser
+      // after taking into account srcset/media/sizes/etc.
       src: element.currentSrc,
       srcset: element.srcset,
       srcsetUrls: parseSrcsetUrls(element.srcset),
@@ -57,11 +65,11 @@ function collectImageElementInfo() {
   }
 
   return [...document.querySelectorAll('img')].map(element => {
+    const imgElementInfo = getElementInfo(element);
     if (element.parentElement.tagName !== 'PICTURE') {
-      return Object.assign(getElementInfo(element), {isPicture: false});
+      return Object.assign(imgElementInfo, {isPicture: false});
     }
 
-    const imgElementInfo = getElementInfo(element);
     const sources = [...element.parentElement.children]
         .filter(element => element.tagName === 'SOURCE')
         .filter(element => !element.media || window.matchMedia(element.media).matches)