Support an arbitrary size less than 2x if necessary by image dimensions

helpers/getImageSrcset1x2x.js

@@ -3,6 +3,8 @@ const utils = require('handlebars-utils');
 const SafeString = require('handlebars').SafeString;
 const common = require('./lib/common');
 
+const return1x = (image, size1x) => new SafeString(image.data.replace('{:size}', size1x));
+
 const factory = () => {
     return function(image, size1x) {
         // Regex to test size string is of the form 123x123
@@ -18,23 +20,30 @@ const factory = () => {
         }
 
         if(!image.width || !image.height || !Number.isInteger(image.width) || !Number.isInteger(image.height)) {
-            return new SafeString(image.data.replace('{:size}', size1x));
+            return return1x(image, size1x);
         }
 
         const [width1x, height1x] = size1x.split('x').map(i => parseInt(i));
 
-        const [width2x, height2x] = [width1x, height1x].map(i => i * 2);
-
-        if (width2x > image.width
-            || height2x > image.height
-            || width2x > common.maximumPixelSize
-            || height2x > common.maximumPixelSize) {
+        if (width1x > image.width
+            || width1x > image.height) {
             // Either the image is too small to make a srcset with a 2x size,
             // or those sizes would be larger than the resizer supports
-            return new SafeString(image.data.replace('{:size}', size1x));
+            return return1x(image, size1x);
         } else {
-            const size2x = `${width2x}x${height2x}`;
-            return new SafeString(`${image.data.replace('{:size}', size1x)} 1x, ${image.data.replace('{:size}', size2x)} 2x`);
+            const smallest_factor = Math.min((image.width/width1x), (image.height/height1x));
+            const factor = smallest_factor < 2 ? smallest_factor : 2;
+            const roundedFactor = +(factor).toFixed(4) //cast to Number for clean rounding
+
+            const [widthXx, heightXx] = [width1x, height1x].map(i => Math.round(i * factor));
+
+            if (widthXx > 5120 || heightXx > 5120) {
+                return return1x(image, size1x);
+            }
+
+            const sizeXx = `${widthXx}x${heightXx}`;
+
+            return new SafeString(`${image.data.replace('{:size}', size1x)} 1x, ${image.data.replace('{:size}', sizeXx)} ${roundedFactor}x`);
         }
     };
 };

spec/helpers/getImageSrcset1x2x.js

@@ -41,6 +41,10 @@ describe('getImageSrcset1x2x helper', function() {
                 input: '{{getImageSrcset1x2x image_with_dimensions "123x456"}}',
                 output: 'https://cdn.example.com/path/to/123x456/image.png?c=2 1x, https://cdn.example.com/path/to/246x912/image.png?c=2 2x',
             },
+            {
+                input: '{{getImageSrcset1x2x image_with_dimensions "123x556"}}',
+                output: 'https://cdn.example.com/path/to/123x556/image.png?c=2 1x, https://cdn.example.com/path/to/210x950/image.png?c=2 1.7086x',
+            },
             {
                 input: '{{getImageSrcset1x2x image_with_dimensions image_size_small}}',
                 output: 'https://cdn.example.com/path/to/123x456/image.png?c=2 1x, https://cdn.example.com/path/to/246x912/image.png?c=2 2x',