From 6966d126b828bc4d28541acc568693c42da4193f Mon Sep 17 00:00:00 2001 From: Matthew Petrie Date: Thu, 11 Feb 2021 18:16:20 +0000 Subject: [PATCH 1/2] Add support for WEBP images Add support for `.jpeg.webp` images in the `getSizedImageUrl` function. Shopify outputs images in WEBP, for example this real Shopify URL: `https://cdn.shopify.com/s/files/1/0896/0640/products/IMG_20190622_130045_clipped_rev_1.jpeg.webp?v=1582896583` --- packages/theme-images/images.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme-images/images.js b/packages/theme-images/images.js index 9c785283..502b6e42 100644 --- a/packages/theme-images/images.js +++ b/packages/theme-images/images.js @@ -65,7 +65,7 @@ export function getSizedImageUrl(src, size) { return removeProtocol(src); } - const match = src.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?$/i); + const match = src.match(/\.(jpeg\.webp|jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?$/i); if (match) { const prefix = src.split(match[0]); From d15a47eec73aa17acd4089b26683fbf83be7e7f4 Mon Sep 17 00:00:00 2001 From: Matthew Petrie Date: Tue, 16 Feb 2021 14:41:59 +0000 Subject: [PATCH 2/2] feat(image helper): support .jpg.webp images --- packages/theme-images/images.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme-images/images.js b/packages/theme-images/images.js index 502b6e42..d647fc66 100644 --- a/packages/theme-images/images.js +++ b/packages/theme-images/images.js @@ -65,7 +65,7 @@ export function getSizedImageUrl(src, size) { return removeProtocol(src); } - const match = src.match(/\.(jpeg\.webp|jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?$/i); + const match = src.match(/\.(jpg\.webp|jpeg\.webp|jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?$/i); if (match) { const prefix = src.split(match[0]);