diff --git a/docs/content/5.configuration.md b/docs/content/5.configuration.md index c35b3ae51..6f5679cc6 100644 --- a/docs/content/5.configuration.md +++ b/docs/content/5.configuration.md @@ -49,9 +49,11 @@ export default defineNuxtConfig({ Default: `['webp']` -You can use this option to configure the default format for your images used by ``. The available formats are `webp`, `avif`, `jpeg`, `jpg`, `png`, and `gif`. The order of the formats is important, as the first format that is supported by the browser will be used. You can pass multiple values like `['avif', 'webp']`. +You can use this option to configure the default format for your images used by `` and ``. Multiple values like `['avif', 'webp']` can be passed. The order of the formats is important, as for ``, the first format that is supported by the browser will be rendered. For `` on the other hand, the _first_ element of the array is used (ignoring browser support). -You can also override this option at the component level by using the [`format` prop.](/components/nuxt-picture#format) +Available formats are `webp`, `avif`, `jpeg`, `jpg`, `png`, and `gif`. + +You can also override this option at the component level by using `format` prop ([](/components/nuxt-image#format)|[](/components/nuxt-picture#format)). ```ts [nuxt.config.ts] export default defineNuxtConfig({ diff --git a/src/runtime/components/_base.ts b/src/runtime/components/_base.ts index fd6c9235d..19e8a1065 100644 --- a/src/runtime/components/_base.ts +++ b/src/runtime/components/_base.ts @@ -96,7 +96,7 @@ export const useBaseImage = (props: ExtractPropTypes) => ...props.modifiers, width: parseSize(props.width), height: parseSize(props.height), - format: props.format, + format: props.format || $img.options.format[0], quality: props.quality || $img.options.quality, background: props.background, fit: props.fit diff --git a/test/e2e/__snapshots__/no-ssr.test.ts.snap b/test/e2e/__snapshots__/no-ssr.test.ts.snap index 43ec1a6f2..329c4e25b 100644 --- a/test/e2e/__snapshots__/no-ssr.test.ts.snap +++ b/test/e2e/__snapshots__/no-ssr.test.ts.snap @@ -2,68 +2,68 @@ exports[`browser (ssr: false) > cloudflare should render images 1`] = ` [ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", + "https://that-test.site/cdn-cgi/image/h=300,f=webp,fit=contain/https://s3.that-test.site/burger.jpeg", ] `; exports[`browser (ssr: false) > cloudflare should render images 2`] = ` [ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", + "https://that-test.site/cdn-cgi/image/h=300,f=webp,fit=contain/https://s3.that-test.site/burger.jpeg", ] `; exports[`browser (ssr: false) > cloudimage should render images 1`] = ` [ - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", + "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&force_format=webp&func=fit", + "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&force_format=webp&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", ] `; exports[`browser (ssr: false) > cloudimage should render images 2`] = ` [ - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", + "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&force_format=webp&func=fit", + "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&force_format=webp&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", ] `; exports[`browser (ssr: false) > cloudinary should render images 1`] = ` [ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", ] `; exports[`browser (ssr: false) > cloudinary should render images 2`] = ` [ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", ] `; exports[`browser (ssr: false) > contentful should render images 1`] = ` [ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133&fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fm=webp&fit=fill", ] `; exports[`browser (ssr: false) > contentful should render images 2`] = ` [ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133&fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fm=webp&fit=fill", ] `; exports[`browser (ssr: false) > directus should render images 1`] = ` [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?format=webp", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&format=webp&fit=cover", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ] @@ -71,8 +71,8 @@ exports[`browser (ssr: false) > directus should render images 1`] = ` exports[`browser (ssr: false) > directus should render images 2`] = ` [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?format=webp", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&format=webp&fit=cover", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ] @@ -80,133 +80,133 @@ exports[`browser (ssr: false) > directus should render images 2`] = ` exports[`browser (ssr: false) > edgio should render images 1`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: false) > edgio should render images 2`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: false) > fastly should render images 1`] = ` [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.jpg?format=webp", + "https://www.fastly.io/plant.jpeg?format=webp", ] `; exports[`browser (ssr: false) > fastly should render images 2`] = ` [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.jpg?format=webp", + "https://www.fastly.io/plant.jpeg?format=webp", ] `; exports[`browser (ssr: false) > glide should render images 1`] = ` [ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", + "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&fm=webp&q=70", ] `; exports[`browser (ssr: false) > glide should render images 2`] = ` [ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", + "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&fm=webp&q=70", ] `; exports[`browser (ssr: false) > gumlet should render images 1`] = ` [ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", + "https://demo.gumlet.io/sea.jpeg?w=300&h=300&format=webp&fit=crop", ] `; exports[`browser (ssr: false) > gumlet should render images 2`] = ` [ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", + "https://demo.gumlet.io/sea.jpeg?w=300&h=300&format=webp&fit=crop", ] `; exports[`browser (ssr: false) > imageengine should render images 1`] = ` [ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", + "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/f_webp/m_box", ] `; exports[`browser (ssr: false) > imageengine should render images 2`] = ` [ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", + "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/f_webp/m_box", ] `; exports[`browser (ssr: false) > imagekit should render images 1`] = ` [ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", + "https://ik.imagekit.io/demo/girl.jpeg?tr=f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,f-webp,c-force", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150,f-webp", ] `; exports[`browser (ssr: false) > imagekit should render images 2`] = ` [ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", + "https://ik.imagekit.io/demo/girl.jpeg?tr=f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,f-webp,c-force", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150,f-webp", ] `; exports[`browser (ssr: false) > imgix should render images 1`] = ` [ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", + "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fm=webp&fit=crop", ] `; exports[`browser (ssr: false) > imgix should render images 2`] = ` [ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", + "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fm=webp&fit=crop", ] `; exports[`browser (ssr: false) > ipx should render images 1`] = ` [ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_300x300/images/colors.jpg", + "/_ipx/f_webp&s_300x300/images/everest.jpg", + "/_ipx/f_webp&s_300x300/images/tacos.svg", + "/_ipx/f_webp&s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", ] `; exports[`browser (ssr: false) > ipx should render images 2`] = ` [ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_300x300/images/colors.jpg", + "/_ipx/f_webp&s_300x300/images/everest.jpg", + "/_ipx/f_webp&s_300x300/images/tacos.svg", + "/_ipx/f_webp&s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", ] `; exports[`browser (ssr: false) > layer0 should render images 1`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: false) > layer0 should render images 2`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; @@ -244,92 +244,92 @@ exports[`browser (ssr: false) > none should render images 2`] = ` exports[`browser (ssr: false) > prepr should render images 1`] = ` [ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/format_webp,q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,format_webp,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", ] `; exports[`browser (ssr: false) > prepr should render images 2`] = ` [ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/format_webp,q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,format_webp,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", ] `; exports[`browser (ssr: false) > prismic should render images 1`] = ` [ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fm=webp&fit=crop", ] `; exports[`browser (ssr: false) > prismic should render images 2`] = ` [ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fm=webp&fit=crop", ] `; exports[`browser (ssr: false) > sanity should render images 1`] = ` [ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?fm=webp", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=scale", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=crop", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=fill&bg=ffffff", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&fm=webp&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167", ] `; exports[`browser (ssr: false) > sanity should render images 2`] = ` [ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?fm=webp", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=scale", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=crop", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=fill&bg=ffffff", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&fm=webp&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167", ] `; exports[`browser (ssr: false) > storyblok should render images 1`] = ` [ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200/filters:format(webp)", "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", ] `; exports[`browser (ssr: false) > storyblok should render images 2`] = ` [ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200/filters:format(webp)", "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", ] `; @@ -355,117 +355,114 @@ exports[`browser (ssr: false) > strapi should render images 2`] = ` exports[`browser (ssr: false) > twicpics should render images 1`] = ` [ - "https://demo.twic.pics/football.jpg", - "https://demo.twic.pics/football.jpg?twic=v1/cover=501x501", - "https://demo.twic.pics/football.jpg?twic=v1/inside=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/resize=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/contain=501x501", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/background=red/contain=300x600", - "https://demo.twic.pics/football.jpg?twic=v1/contain=1001x1001", - "https://demo.twic.pics/icon-500.png?twic=v1/background=red/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=avif/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=preview/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=maincolor/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=blank/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=100", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=1", - "https://demo.twic.pics/woman-14.jpg", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/cover=501x301", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/contain=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/resize=300x-", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/cover=501x-", - "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/cover=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1", - "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=png", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=png", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=png/cover=501x-", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=png/cover=501x-", - "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/cover=501x501", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/inside=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/resize=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=501x501", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=webp/background=red/contain=300x600", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=1001x1001", + "https://demo.twic.pics/icon-500.png?twic=v1/output=webp/background=red/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=100", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=1", + "https://demo.twic.pics/woman-14.jpg?twic=v1/output=webp", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/cover=501x301", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/contain=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/output=webp/resize=300x-", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100/output=webp", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/output=webp/cover=501x-", + "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/output=webp/cover=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1/output=webp", + "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=webp", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=webp", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=webp/cover=501x-", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=webp/cover=501x-", + "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9/output=webp", ] `; exports[`browser (ssr: false) > twicpics should render images 2`] = ` [ - "https://demo.twic.pics/football.jpg", - "https://demo.twic.pics/football.jpg?twic=v1/cover=501x501", - "https://demo.twic.pics/football.jpg?twic=v1/inside=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/resize=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/contain=501x501", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/background=red/contain=300x600", - "https://demo.twic.pics/football.jpg?twic=v1/contain=1001x1001", - "https://demo.twic.pics/icon-500.png?twic=v1/background=red/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=avif/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=preview/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=maincolor/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=blank/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=100", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=1", - "https://demo.twic.pics/woman-14.jpg", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/cover=501x301", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/contain=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/resize=300x-", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/cover=501x-", - "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/cover=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1", - "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=png", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=png", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=png/cover=501x-", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=png/cover=501x-", - "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/cover=501x501", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/inside=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/resize=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=501x501", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=webp/background=red/contain=300x600", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=1001x1001", + "https://demo.twic.pics/icon-500.png?twic=v1/output=webp/background=red/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=100", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=1", + "https://demo.twic.pics/woman-14.jpg?twic=v1/output=webp", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/cover=501x301", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/contain=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/output=webp/resize=300x-", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100/output=webp", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/output=webp/cover=501x-", + "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/output=webp/cover=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1/output=webp", + "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=webp", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=webp", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=webp/cover=501x-", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=webp/cover=501x-", + "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9/output=webp", ] `; exports[`browser (ssr: false) > unsplash should render images 1`] = ` [ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", + "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=webp&q=75&fit=crop", + "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=webp&q=75&fit=crop", ] `; exports[`browser (ssr: false) > unsplash should render images 2`] = ` [ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", + "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=webp&q=75&fit=crop", + "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=webp&q=75&fit=crop", ] `; exports[`browser (ssr: false) > uploadcare should render images 1`] = ` [ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", + "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/webp/-/resize/512x512/", + "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/format/webp/-/resize/512x/", + "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/format/webp/-/resize/x512/", + "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/format/webp/-/scale_crop/1080x300/center/", + "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/format/webp/-/resize/1080x300/-/stretch/off/", + "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/format/webp/-/smart_resize/1080x300/", ] `; exports[`browser (ssr: false) > uploadcare should render images 2`] = ` [ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", + "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/webp/-/resize/512x512/", + "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/format/webp/-/resize/512x/", + "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/format/webp/-/resize/x512/", + "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/format/webp/-/scale_crop/1080x300/center/", + "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/format/webp/-/resize/1080x300/-/stretch/off/", + "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/format/webp/-/smart_resize/1080x300/", ] `; @@ -487,8 +484,8 @@ exports[`browser (ssr: false) > wagtail should render images 1`] = ` "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", "https://cms.demo.nypr.digital/images/329944/width-250|format-webp|webpquality-70", "https://cms.demo.nypr.digital/images/329944/height-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-2", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-2", "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100|format-webp|webpquality-70", ] `; @@ -499,8 +496,7 @@ exports[`browser (ssr: false) > wagtail should render images 2`] = ` "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-webp%7Cwebpquality-70", "https://cms.demo.nypr.digital/images/329944/width-250%7Cformat-webp%7Cwebpquality-70", "https://cms.demo.nypr.digital/images/329944/height-250%7Cformat-webp%7Cwebpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-jpeg%7Cjpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-jpeg%7Cjpegquality-2", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-webp%7Cwebpquality-2", "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100%7Cformat-webp%7Cwebpquality-70", ] `; diff --git a/test/e2e/__snapshots__/ssr.test.ts.snap b/test/e2e/__snapshots__/ssr.test.ts.snap index 1786b12cc..6af5eb60a 100644 --- a/test/e2e/__snapshots__/ssr.test.ts.snap +++ b/test/e2e/__snapshots__/ssr.test.ts.snap @@ -2,68 +2,68 @@ exports[`browser (ssr: true) > cloudflare should render images 1`] = ` [ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", + "https://that-test.site/cdn-cgi/image/h=300,f=webp,fit=contain/https://s3.that-test.site/burger.jpeg", ] `; exports[`browser (ssr: true) > cloudflare should render images 2`] = ` [ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", + "https://that-test.site/cdn-cgi/image/h=300,f=webp,fit=contain/https://s3.that-test.site/burger.jpeg", ] `; exports[`browser (ssr: true) > cloudimage should render images 1`] = ` [ - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", + "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&force_format=webp&func=fit", + "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&force_format=webp&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", ] `; exports[`browser (ssr: true) > cloudimage should render images 2`] = ` [ - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", + "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&force_format=webp&func=fit", + "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&force_format=webp&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", ] `; exports[`browser (ssr: true) > cloudinary should render images 1`] = ` [ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", ] `; exports[`browser (ssr: true) > cloudinary should render images 2`] = ` [ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", + "https://res.cloudinary.com/nuxt/image/upload/f_webp,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", ] `; exports[`browser (ssr: true) > contentful should render images 1`] = ` [ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133&fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fm=webp&fit=fill", ] `; exports[`browser (ssr: true) > contentful should render images 2`] = ` [ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133&fm=webp", + "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fm=webp&fit=fill", ] `; exports[`browser (ssr: true) > directus should render images 1`] = ` [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?format=webp", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&format=webp&fit=cover", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ] @@ -71,8 +71,8 @@ exports[`browser (ssr: true) > directus should render images 1`] = ` exports[`browser (ssr: true) > directus should render images 2`] = ` [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?format=webp", + "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&format=webp&fit=cover", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ] @@ -80,133 +80,133 @@ exports[`browser (ssr: true) > directus should render images 2`] = ` exports[`browser (ssr: true) > edgio should render images 1`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: true) > edgio should render images 2`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: true) > fastly should render images 1`] = ` [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.jpg?format=webp", + "https://www.fastly.io/plant.jpeg?format=webp", ] `; exports[`browser (ssr: true) > fastly should render images 2`] = ` [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.jpg?format=webp", + "https://www.fastly.io/plant.jpeg?format=webp", ] `; exports[`browser (ssr: true) > glide should render images 1`] = ` [ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", + "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&fm=webp&q=70", ] `; exports[`browser (ssr: true) > glide should render images 2`] = ` [ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", + "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&fm=webp&q=70", ] `; exports[`browser (ssr: true) > gumlet should render images 1`] = ` [ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", + "https://demo.gumlet.io/sea.jpeg?w=300&h=300&format=webp&fit=crop", ] `; exports[`browser (ssr: true) > gumlet should render images 2`] = ` [ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", + "https://demo.gumlet.io/sea.jpeg?w=300&h=300&format=webp&fit=crop", ] `; exports[`browser (ssr: true) > imageengine should render images 1`] = ` [ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", + "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/f_webp/m_box", ] `; exports[`browser (ssr: true) > imageengine should render images 2`] = ` [ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", + "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/f_webp/m_box", ] `; exports[`browser (ssr: true) > imagekit should render images 1`] = ` [ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", + "https://ik.imagekit.io/demo/girl.jpeg?tr=f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,f-webp,c-force", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150,f-webp", ] `; exports[`browser (ssr: true) > imagekit should render images 2`] = ` [ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", + "https://ik.imagekit.io/demo/girl.jpeg?tr=f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,f-webp,c-force", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150,f-webp", + "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150,f-webp", ] `; exports[`browser (ssr: true) > imgix should render images 1`] = ` [ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", + "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fm=webp&fit=crop", ] `; exports[`browser (ssr: true) > imgix should render images 2`] = ` [ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", + "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fm=webp&fit=crop", ] `; exports[`browser (ssr: true) > ipx should render images 1`] = ` [ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_300x300/images/colors.jpg", + "/_ipx/f_webp&s_300x300/images/everest.jpg", + "/_ipx/f_webp&s_300x300/images/tacos.svg", + "/_ipx/f_webp&s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", ] `; exports[`browser (ssr: true) > ipx should render images 2`] = ` [ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_300x300/images/colors.jpg", + "/_ipx/f_webp&s_300x300/images/everest.jpg", + "/_ipx/f_webp&s_300x300/images/tacos.svg", + "/_ipx/f_webp&s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", ] `; exports[`browser (ssr: true) > layer0 should render images 1`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; exports[`browser (ssr: true) > layer0 should render images 2`] = ` [ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50&format=webp", + "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&format=webp&quality=10", ] `; @@ -244,92 +244,92 @@ exports[`browser (ssr: true) > none should render images 2`] = ` exports[`browser (ssr: true) > prepr should render images 1`] = ` [ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/format_webp,q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,format_webp,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", ] `; exports[`browser (ssr: true) > prepr should render images 2`] = ` [ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/format_webp,q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200,format_webp/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", + "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,format_webp,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", ] `; exports[`browser (ssr: true) > prismic should render images 1`] = ` [ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fm=webp&fit=crop", ] `; exports[`browser (ssr: true) > prismic should render images 2`] = ` [ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200&fm=webp", + "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fm=webp&fit=crop", ] `; exports[`browser (ssr: true) > sanity should render images 1`] = ` [ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?fm=webp", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=scale", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=crop", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=fill&bg=ffffff", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&fm=webp&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167", ] `; exports[`browser (ssr: true) > sanity should render images 2`] = ` [ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?fm=webp", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=scale", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=crop", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fm=webp&fit=fill&bg=ffffff", + "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&fm=webp&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167", ] `; exports[`browser (ssr: true) > storyblok should render images 1`] = ` [ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200/filters:format(webp)", "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", ] `; exports[`browser (ssr: true) > storyblok should render images 2`] = ` [ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500/filters:format(webp)", + "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200/filters:format(webp)", "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", + "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130/filters:format(webp)", ] `; @@ -355,117 +355,114 @@ exports[`browser (ssr: true) > strapi should render images 2`] = ` exports[`browser (ssr: true) > twicpics should render images 1`] = ` [ - "https://demo.twic.pics/football.jpg", - "https://demo.twic.pics/football.jpg?twic=v1/cover=501x501", - "https://demo.twic.pics/football.jpg?twic=v1/inside=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/resize=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/contain=501x501", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/background=red/contain=300x600", - "https://demo.twic.pics/football.jpg?twic=v1/contain=1001x1001", - "https://demo.twic.pics/icon-500.png?twic=v1/background=red/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=avif/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=preview/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=maincolor/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=blank/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=100", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=1", - "https://demo.twic.pics/woman-14.jpg", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/cover=501x301", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/contain=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/resize=300x-", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/cover=501x-", - "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/cover=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1", - "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=png", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=png", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=png/cover=501x-", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=png/cover=501x-", - "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/cover=501x501", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/inside=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/resize=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=501x501", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=webp/background=red/contain=300x600", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=1001x1001", + "https://demo.twic.pics/icon-500.png?twic=v1/output=webp/background=red/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=100", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=1", + "https://demo.twic.pics/woman-14.jpg?twic=v1/output=webp", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/cover=501x301", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/contain=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/output=webp/resize=300x-", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100/output=webp", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/output=webp/cover=501x-", + "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/output=webp/cover=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1/output=webp", + "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=webp", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=webp", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=webp/cover=501x-", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=webp/cover=501x-", + "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9/output=webp", ] `; exports[`browser (ssr: true) > twicpics should render images 2`] = ` [ - "https://demo.twic.pics/football.jpg", - "https://demo.twic.pics/football.jpg?twic=v1/cover=501x501", - "https://demo.twic.pics/football.jpg?twic=v1/inside=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/resize=501x1001", - "https://demo.twic.pics/football.jpg?twic=v1/contain=501x501", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/background=red/contain=300x600", - "https://demo.twic.pics/football.jpg?twic=v1/contain=1001x1001", - "https://demo.twic.pics/icon-500.png?twic=v1/background=red/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=avif/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=preview/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=maincolor/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/output=blank/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=100", - "https://demo.twic.pics/peacock.jpg?twic=v1/quality=1", - "https://demo.twic.pics/woman-14.jpg", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/cover=501x301", - "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/contain=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/resize=300x-", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100", - "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/cover=501x-", - "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/cover=501x-", - "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1", - "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/cover=501x-", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=png", - "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=png", - "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=png", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=png/cover=501x-", - "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=png/cover=501x-", - "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left", - "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/cover=501x501", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/inside=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/resize=501x1001", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=501x501", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=webp/background=red/contain=300x600", + "https://demo.twic.pics/football.jpg?twic=v1/output=webp/contain=1001x1001", + "https://demo.twic.pics/icon-500.png?twic=v1/output=webp/background=red/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=100", + "https://demo.twic.pics/peacock.jpg?twic=v1/output=webp/quality=1", + "https://demo.twic.pics/woman-14.jpg?twic=v1/output=webp", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/cover=501x301", + "https://demo.twic.pics/woman-14.jpg?twic=v1/focus=auto/output=webp/contain=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/cover=4:3/output=webp/resize=300x-", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100/output=webp", + "https://demo.twic.pics/cat.jpg?twic=v1/crop=500x100@700x400/output=webp/cover=501x-", + "https://demo.twic.pics/cat.jpg?twic=v1/focus=auto/crop=500x100/output=webp/cover=501x-", + "https://demo.twic.pics/cat_1x1.jpg?twic=v1/focus=auto/crop=500x500/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/cover=1:1/output=webp", + "https://demo.twic.pics/puppy.jpg?twic=v1/flip=both/output=webp/cover=501x-", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=true/output=webp", + "https://demo.twic.pics/peacock.jpg?twic=v1/truecolor=false/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=left/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=80/output=webp", + "https://demo.twic.pics/man-13.jpg?twic=v1/turn=90/output=webp", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=1.5/output=webp/cover=501x-", + "https://demo.twic.pics/cherry-3.jpg?twic=v1/focus=auto/zoom=3/output=webp/cover=501x-", + "https://demo.twic.pics/football.jpg?twic=v1/cover=16:9/focus=auto/turn=left/output=webp", + "https://demo.twic.pics/football.jpg?twic=v1/focus=auto/turn=left/cover=16:9/output=webp", ] `; exports[`browser (ssr: true) > unsplash should render images 1`] = ` [ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", + "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=webp&q=75&fit=crop", + "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=webp&q=75&fit=crop", ] `; exports[`browser (ssr: true) > unsplash should render images 2`] = ` [ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", + "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=webp&q=75&fit=crop", + "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=webp&q=75&fit=crop", ] `; exports[`browser (ssr: true) > uploadcare should render images 1`] = ` [ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", + "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/webp/-/resize/512x512/", + "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/format/webp/-/resize/512x/", + "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/format/webp/-/resize/x512/", + "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/format/webp/-/scale_crop/1080x300/center/", + "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/format/webp/-/resize/1080x300/-/stretch/off/", + "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/format/webp/-/smart_resize/1080x300/", ] `; exports[`browser (ssr: true) > uploadcare should render images 2`] = ` [ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", + "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/webp/-/resize/512x512/", + "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/format/webp/-/resize/512x/", + "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/format/webp/-/resize/x512/", + "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/format/webp/-/scale_crop/1080x300/center/", + "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/format/webp/-/resize/1080x300/-/stretch/off/", + "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/format/webp/-/smart_resize/1080x300/", + "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/format/webp/-/smart_resize/1080x300/", ] `; @@ -487,8 +484,8 @@ exports[`browser (ssr: true) > wagtail should render images 1`] = ` "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", "https://cms.demo.nypr.digital/images/329944/width-250|format-webp|webpquality-70", "https://cms.demo.nypr.digital/images/329944/height-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-2", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-2", "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100|format-webp|webpquality-70", ] `; @@ -499,8 +496,7 @@ exports[`browser (ssr: true) > wagtail should render images 2`] = ` "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-webp%7Cwebpquality-70", "https://cms.demo.nypr.digital/images/329944/width-250%7Cformat-webp%7Cwebpquality-70", "https://cms.demo.nypr.digital/images/329944/height-250%7Cformat-webp%7Cwebpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-jpeg%7Cjpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-jpeg%7Cjpegquality-2", + "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0%7Cformat-webp%7Cwebpquality-2", "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100%7Cformat-webp%7Cwebpquality-70", ] `; diff --git a/test/e2e/generate.test.ts b/test/e2e/generate.test.ts index 5d4a43d7b..1df35da9c 100644 --- a/test/e2e/generate.test.ts +++ b/test/e2e/generate.test.ts @@ -30,14 +30,14 @@ describe('ipx provider', () => { expect(files.sort().map(f => f.replace(outputDir, '/_ipx'))).toMatchInlineSnapshot(` [ "/_ipx/_/images/nuxt.png", - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", - "/_ipx/s_600x600/images/colors.jpg", - "/_ipx/s_600x600/images/everest.jpg", - "/_ipx/s_600x600/images/tacos.svg", - "/_ipx/s_600x600/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_300x300/images/colors.jpg", + "/_ipx/f_webp&s_300x300/images/everest.jpg", + "/_ipx/f_webp&s_300x300/images/tacos.svg", + "/_ipx/f_webp&s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", + "/_ipx/f_webp&s_600x600/images/colors.jpg", + "/_ipx/f_webp&s_600x600/images/everest.jpg", + "/_ipx/f_webp&s_600x600/images/tacos.svg", + "/_ipx/f_webp&s_600x600/unsplash/photo-1606112219348-204d7d8b94ee", ] `) }) diff --git a/test/unit/image.test.ts b/test/unit/image.test.ts index 74ef50638..a1e004074 100644 --- a/test/unit/image.test.ts +++ b/test/unit/image.test.ts @@ -21,12 +21,12 @@ describe('Renders simple image', () => { }) it('Matches snapshot', () => { - expect(wrapper.html()).toMatchInlineSnapshot('""') + expect(wrapper.html()).toMatchInlineSnapshot('""') }) it('props.src is picked up by getImage()', () => { const domSrc = wrapper.element.getAttribute('src') - expect(domSrc).toMatchInlineSnapshot('"/_ipx/s_1800x1800/image.png"') + expect(domSrc).toMatchInlineSnapshot('"/_ipx/f_webp&s_1800x1800/image.png"') }) it('props.src is reactive', async () => { @@ -35,7 +35,7 @@ describe('Renders simple image', () => { await nextTick() const domSrc = wrapper.find('img').element.getAttribute('src') - expect(domSrc).toMatchInlineSnapshot('"/_ipx/s_1800x1800/image.jpeg"') + expect(domSrc).toMatchInlineSnapshot('"/_ipx/f_webp&s_1800x1800/image.jpeg"') }) it('sizes', () => { @@ -51,7 +51,7 @@ describe('Renders simple image', () => { densities: '1x 2x 3x', src: 'image.png' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('empty densities (fallback to global)', () => { @@ -62,7 +62,7 @@ describe('Renders simple image', () => { densities: '', src: 'image.png' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('empty string densities (fallback to global)', () => { @@ -73,7 +73,7 @@ describe('Renders simple image', () => { densities: ' ', src: 'image.png' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('error on invalid densities', () => { @@ -92,7 +92,7 @@ describe('Renders simple image', () => { height: 400, sizes: '150' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('with single sizes entry (responsive)', () => { @@ -102,7 +102,7 @@ describe('Renders simple image', () => { height: 400, sizes: 'sm:150' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('de-duplicates sizes & srcset', () => { @@ -112,7 +112,7 @@ describe('Renders simple image', () => { sizes: '200:200px,300:200px,400:400px,400:400px,500:500px,800:800px', src: 'image.png' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('encodes characters', () => { @@ -122,7 +122,7 @@ describe('Renders simple image', () => { sizes: '200,500:500,900:900', src: '/汉字.png' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('correctly sets crop', () => { @@ -132,7 +132,7 @@ describe('Renders simple image', () => { height: 2000, sizes: 'xs:100vw sm:100vw md:300px lg:350px xl:350px 2xl:350px' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) it('without sizes, but densities', () => { @@ -142,7 +142,7 @@ describe('Renders simple image', () => { height: 400, densities: '1x 2x 3x' }) - expect(img.html()).toMatchInlineSnapshot('""') + expect(img.html()).toMatchInlineSnapshot('""') }) }) @@ -194,15 +194,15 @@ describe('Renders placeholded image', () => { let domSrc = wrapper.find('img').element.getAttribute('src') - expect(domSrc).toMatchInlineSnapshot('"/_ipx/q_50&s_10x10/image.png"') - expect(placeholderImage.src).toMatchInlineSnapshot('"/_ipx/s_200x200/image.png"') + expect(domSrc).toMatchInlineSnapshot('"/_ipx/f_webp&q_50&s_10x10/image.png"') + expect(placeholderImage.src).toMatchInlineSnapshot('"/_ipx/f_webp&s_200x200/image.png"') resolveImage() await nextTick() domSrc = wrapper.find('img').element.getAttribute('src') - expect(domSrc).toMatchInlineSnapshot('"/_ipx/s_200x200/image.png"') + expect(domSrc).toMatchInlineSnapshot('"/_ipx/f_webp&s_200x200/image.png"') expect(wrapper.emitted().load[0]).toStrictEqual([loadEvent]) }) @@ -264,7 +264,27 @@ describe('Renders image, applies module config', () => { } }) expect(img.html()).toMatchInlineSnapshot(` - "" + "" + `) + }) + + it('Module config .format applies, uses first value of array', () => { + nuxtApp._img = createImage({ + ...imageOptions, + nuxt: { + baseURL: config.app.baseURL + }, + format: ['avif', 'webp'] + }) + const img = mount(NuxtImg, { + propsData: { + src, + width: 200, + height: 200 + } + }) + expect(img.html()).toMatchInlineSnapshot(` + "" `) }) @@ -286,7 +306,7 @@ describe('Renders image, applies module config', () => { } }) expect(img.html()).toMatchInlineSnapshot(` - "" + "" `) }) @@ -306,7 +326,7 @@ describe('Renders image, applies module config', () => { } }) expect(img.html()).toMatchInlineSnapshot(` - "" + "" `) }) })