diff --git a/src/components/atoms/Image.svelte b/src/components/atoms/Image.svelte index 4fdf5fe..de0b9f4 100644 --- a/src/components/atoms/Image.svelte +++ b/src/components/atoms/Image.svelte @@ -48,16 +48,22 @@ $: imgHeight = sizes && sizes.small ? sizes.small.height : height $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined $: srcSet = { - webp: [ - `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`, - sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : undefined, - sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : undefined, - ], - jpg: [ - `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`, - sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : undefined, - sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : undefined, - ] + // WebP + webp: + sizes ? [ + `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`, + sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null, + sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null, + ] + : [getAssetUrlKey(id, `${sizeKey}-webp`)], + // JPG + jpg: + sizes ? [ + `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`, + sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null, + sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null, + ] + : [getAssetUrlKey(id, `${sizeKey}-jpg`)] } @@ -68,7 +74,7 @@ >