🐛 Fixed responsive images for gifs & svgs (#10315)

closes #10301

* Redirected to original image for gifs & svgs

* Created canTransformFileExtension method

* Updated image middlewares to use canTransformFileExtension

core/server/lib/image/manipulator.js

@@ -36,6 +36,12 @@ const unsafeResizeImage = (originalBuffer, {width, height} = {}) => {
         });
 };
 
+// NOTE: .gif optimization is currently not supported by sharp but will be soon
+//       as there has been support added in underlying libvips library https://github.com/lovell/sharp/issues/1372
+//       As for .svg files, sharp only supports conversion to png, and this does not
+//       play well with animated svg files
+const canTransformFileExtension = ext => !['.gif', '.svg', '.svgz'].includes(ext);
+
 const makeSafe = fn => (...args) => {
     try {
         require('sharp');
@@ -55,5 +61,6 @@ const makeSafe = fn => (...args) => {
     });
 };
 
+module.exports.canTransformFileExtension = canTransformFileExtension;
 module.exports.process = makeSafe(unsafeProcess);
 module.exports.resizeImage = makeSafe(unsafeResizeImage);

core/server/web/shared/middlewares/image/handle-image-sizes.js

@@ -16,6 +16,12 @@ module.exports = function (req, res, next) {
         return res.redirect(url);
     };
 
+    // CASE: image manipulator is uncapable of transforming file (e.g. .gif)
+    const requestUrlFileExtension = path.parse(req.url).ext;
+    if (!image.manipulator.canTransformFileExtension(requestUrlFileExtension)) {
+        return redirectToOriginal();
+    }
+
     const imageSizes = activeTheme.get().config('image_sizes');
     // CASE: no image_sizes config
     if (!imageSizes) {

core/server/web/shared/middlewares/image/normalize.js

@@ -7,11 +7,8 @@ const image = require('../../../../lib/image');
 module.exports = function normalize(req, res, next) {
     const imageOptimizationOptions = config.get('imageOptimization');
 
-    // NOTE: .gif optimization is currently not supported by sharp but will be soon
+    // CASE: image manipulator is uncapable of transforming file (e.g. .gif)
-    //       as there has been support added in underlying libvips library https://github.com/lovell/sharp/issues/1372
+    if (!image.manipulator.canTransformFileExtension(req.file.ext) || !imageOptimizationOptions.resize) {
-    //       As for .svg files, sharp only supports conversion to png, and this does not
-    //       play well with animated svg files
-    if (!imageOptimizationOptions.resize || ['.gif', '.svg', '.svgz'].includes(req.file.ext)) {
         return next();
     }
 

core/test/unit/lib/image/manipulator_spec.js

@@ -12,6 +12,27 @@ describe('lib/image: manipulator', function () {
         testUtils.unmockNotExistingModule();
     });
 
+    describe('canTransformFileExtension', function () {
+        it('returns false for ".gif"', function () {
+            should.equal(
+                manipulator.canTransformFileExtension('.gif'),
+                false
+            );
+        });
+        it('returns false for ".svg"', function () {
+            should.equal(
+                manipulator.canTransformFileExtension('.svg'),
+                false
+            );
+        });
+        it('returns false for ".svgz"', function () {
+            should.equal(
+                manipulator.canTransformFileExtension('.svgz'),
+                false
+            );
+        });
+    });
+
     describe('cases', function () {
         let sharp, sharpInstance;