fix: better handling for responsive images (#312)

src/resource/utils/dom/constants.js

@@ -1,4 +1,6 @@
 export const IS_LINK = new RegExp('https?://', 'i');
-export const IS_IMAGE = new RegExp('.(png|gif|jpe?g)', 'i');
+const IMAGE_RE = '.(png|gif|jpe?g)';
+export const IS_IMAGE = new RegExp(`${IMAGE_RE}`, 'i');
+export const IS_SRCSET = new RegExp(`${IMAGE_RE}(\\s*[\\d.]+[wx])`, 'i');
 
 export const TAGS_TO_REMOVE = ['script', 'style', 'form'].join(',');

src/resource/utils/dom/convert-lazy-loaded-images.js

@@ -1,6 +1,6 @@
 import { getAttrs } from 'utils/dom';
 
-import { IS_LINK, IS_IMAGE } from './constants';
+import { IS_LINK, IS_IMAGE, IS_SRCSET } from './constants';
 
 // Convert all instances of images with potentially
 // lazy loaded images into normal images.
@@ -14,7 +14,14 @@ export default function convertLazyLoadedImages($) {
     Reflect.ownKeys(attrs).forEach(attr => {
       const value = attrs[attr];
 
-      if (attr !== 'src' && IS_LINK.test(value) && IS_IMAGE.test(value)) {
+      if (attr !== 'srcset' && IS_LINK.test(value) && IS_SRCSET.test(value)) {
+        $(img).attr('srcset', value);
+      } else if (
+        attr !== 'src' &&
+        attr !== 'srcset' &&
+        IS_LINK.test(value) &&
+        IS_IMAGE.test(value)
+      ) {
         $(img).attr('src', value);
       }
     });

src/resource/utils/dom/convert-lazy-loaded-images.test.js

@@ -16,6 +16,31 @@ describe('convertLazyLoadedImages($)', () => {
     );
   });
 
+  it('moves image source candidates to srcset if placed in another attribute', () => {
+    const html = '<img data-srcset="http://example.com/foo.jpg 2x">';
+    const $ = cheerio.load(html);
+
+    const result = convertLazyLoadedImages($).html();
+
+    assert.equal(
+      result,
+      '<img data-srcset="http://example.com/foo.jpg 2x" srcset="http://example.com/foo.jpg 2x">'
+    );
+  });
+
+  it('properly handles src and srcset attributes', () => {
+    const html =
+      '<img data-src="http://example.com/foo.jpg" data-srcset="http://example.com/foo.jpg 2x">';
+    const $ = cheerio.load(html);
+
+    const result = convertLazyLoadedImages($).html();
+
+    assert.equal(
+      result,
+      '<img data-src="http://example.com/foo.jpg" data-srcset="http://example.com/foo.jpg 2x" src="http://example.com/foo.jpg" srcset="http://example.com/foo.jpg 2x">'
+    );
+  });
+
   it('does nothing when value is not a link', () => {
     // This is far from perfect, since a relative url could
     // be perfectly correct.
@@ -44,4 +69,17 @@ describe('convertLazyLoadedImages($)', () => {
 
     assert.equal(result, '<img src="http://example.com/foo.jpg">');
   });
+
+  it('does not replace an img src with srcset value', () => {
+    const html =
+      '<img src="http://example.com/foo.jpg" srcset="http://example.com/foo2x.jpg 2x, http://example.com/foo.jpg">';
+    const $ = cheerio.load(html);
+
+    const result = convertLazyLoadedImages($).html();
+
+    assert.equal(
+      result,
+      '<img src="http://example.com/foo.jpg" srcset="http://example.com/foo2x.jpg 2x, http://example.com/foo.jpg">'
+    );
+  });
 });

src/utils/dom/constants.js

@@ -36,6 +36,8 @@ export const REMOVE_ATTR_LIST = REMOVE_ATTRS.join(',');
 export const WHITELIST_ATTRS = [
   'src',
   'srcset',
+  'sizes',
+  'type',
   'href',
   'class',
   'id',