🎨 Use unoptimised image when possible for dynamic images (#10314)

closes #10283 

Updated middleware for dynamic image sizes to attempt to read the unoptimized image first, taking into account the `-n` suffix for duplicate image names, by using a regex.

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

@@ -53,9 +53,27 @@ module.exports = function (req, res, next) {
             return;
         }
 
-        const originalImagePath = path.relative(sizeImageDir, req.url);
+        const imagePath = path.relative(sizeImageDir, req.url);
+        const {dir, name, ext} = path.parse(imagePath);
+        const [imageNameMatched, imageName, imageNumber] = name.match(/^(.+?)(-\d+)?$/) || [null];
 
-        return storageInstance.read({path: originalImagePath})
+        if (!imageNameMatched) {
+            // CASE: Image name does not contain any characters?
+            // RESULT: Hand off to `next()` which will 404
+            return;
+        }
+        const unoptimizedImagePath = path.join(dir, `${imageName}_o${imageNumber || ''}${ext}`);
+
+        return storageInstance.exists(unoptimizedImagePath)
+            .then((unoptimizedImageExists) => {
+                if (unoptimizedImageExists) {
+                    return unoptimizedImagePath;
+                }
+                return imagePath;
+            })
+            .then((path) => {
+                return storageInstance.read({path});
+            })
             .then((originalImageBuffer) => {
                 return image.manipulator.resizeImage(originalImageBuffer, imageDimensionConfig);
             })