fix: support query strings in lazy-loaded srcsets (#387)

Author: toufic-m

src/resource/utils/dom/constants.js

@@ -1,6 +1,9 @@
 export const IS_LINK = new RegExp('https?://', '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 IS_SRCSET = new RegExp(
+  `${IMAGE_RE}(\\?\\S+)?(\\s*[\\d.]+[wx])`,
+  'i'
+);
 
 export const TAGS_TO_REMOVE = ['script', 'style', 'form'].join(',');

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

@@ -28,6 +28,19 @@ describe('convertLazyLoadedImages($)', () => {
     );
   });
 
+  it('moves image source candidates containing query strings to srcset if placed in another attribute', () => {
+    const html =
+      '<img data-srcset="http://example.com/foo.jpg?w=400 2x, http://example.com/foo.jpg?w=600 3x">';
+    const $ = cheerio.load(html);
+
+    const result = convertLazyLoadedImages($).html();
+
+    assert.equal(
+      result,
+      '<img data-srcset="http://example.com/foo.jpg?w=400 2x, http://example.com/foo.jpg?w=600 3x" srcset="http://example.com/foo.jpg?w=400 2x, http://example.com/foo.jpg?w=600 3x">'
+    );
+  });
+
   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">';