feat: add whitelist of image extenstions which can be compressed (#215)

Author: niktverd

src/components/Image/Image.tsx

@@ -2,6 +2,7 @@ import React, {CSSProperties, MouseEventHandler, useContext, useState, Fragment}
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {BREAKPOINTS} from '../../constants';
 import {ImageDeviceProps, ImageObjectProps} from '../../models';
+import {isCompressible} from '../../utils/imageCompress';
 
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
@@ -36,11 +37,10 @@ const Image = (props: ImageProps) => {
         return null;
     }
 
-    // TODO: Temporary solution for .svg images
     const disableWebp =
         projectSettings.disableCompress ||
         disableCompress ||
-        imageSrc.endsWith('.svg') ||
+        !isCompressible(imageSrc) ||
         imgLoadingError;
 
     return (

src/utils/imageCompress.ts

@@ -0,0 +1,8 @@
+export enum AvailableForCompressExtension {
+    PNG = 'png',
+    JPG = 'jpg',
+    JPEG = 'jpeg',
+}
+
+export const isCompressible = (fileName: string) =>
+    Object.keys(AvailableForCompressExtension).some((ext) => fileName.endsWith(`.${ext}`));