[DEV-21757] Optimize filters to raw images

Author: pestaa

src/components/Lightbox/Lightbox.tsx

@@ -142,7 +142,7 @@ export function Lightbox({
 
                         <PinterestButton
                             className="prezly-slate-lightbox__pinterest"
-                            image={previewImage(image).cdnUrl}
+                            image={previewImage(image).format().cdnUrl}
                         />
                     </div>
                 </div>

src/components/Media/Media.tsx

@@ -48,7 +48,7 @@ export function Media({ className, image, style, title }: Props) {
         <img
             alt={title ?? ''}
             className={computedClassName}
-            src={image.format().cdnUrl}
+            src={image.preview().format().cdnUrl}
             srcSet={[image.srcSet(1200), image.srcSet(800), image.srcSet(400)]
                 .filter(Boolean)
                 .join(', ')}

src/elements/Gallery/GalleryImage.tsx

@@ -28,7 +28,7 @@ export function GalleryImage({
                 'prezly-slate-gallery-image--with-border-radius': rounded,
             })}
             caption={originalImage.caption}
-            href={originalImage.cdnUrl}
+            href={originalImage.preview().format().cdnUrl}
             onClick={() => onClick(originalImage)}
             style={style}
         >

src/elements/Image/Image.tsx

@@ -82,7 +82,7 @@ export function Image({ children, className, node, onDownload, onPreviewOpen, ..
                 <Rollover
                     id={`image-${file.uuid}`}
                     disabled={image.isGif()}
-                    href={image.cdnUrl}
+                    href={image.preview().format().cdnUrl}
                     onClick={handleRolloverClick}
                     style={containerStyle}
                 >