From e5235994cdcc1fc8ff8df8b84c4bf51b191ecc9b Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Thu, 14 Dec 2023 15:39:47 +0100 Subject: [PATCH 1/6] feat: Added Hygraph provider --- docs/content/3.providers/hygraph.md | 39 ++++++++++++++ playground/nuxt.config.ts | 3 ++ playground/providers.ts | 25 +++++++++ src/provider.ts | 1 + src/runtime/providers/hygraph.ts | 62 ++++++++++++++++++++++ test/e2e/__snapshots__/no-ssr.test.ts.snap | 16 ++++++ test/e2e/__snapshots__/ssr.test.ts.snap | 16 ++++++ test/providers.ts | 18 ++++--- 8 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 docs/content/3.providers/hygraph.md create mode 100644 src/runtime/providers/hygraph.ts diff --git a/docs/content/3.providers/hygraph.md b/docs/content/3.providers/hygraph.md new file mode 100644 index 000000000..8cdf57963 --- /dev/null +++ b/docs/content/3.providers/hygraph.md @@ -0,0 +1,39 @@ +--- +title: Hygraph +description: Nuxt Image with Hygraph integration. +links: + - label: Source + icon: i-simple-icons-github + to: https://github.com/nuxt/image/blob/main/src/runtime/providers/hygraph.ts + size: xs +--- + +Integration between [Hygraph](https://hygraph.com/) and the image module. + +To use this provider you just need to specify the base URL of your project. + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + image: { + directus: { + // If not filled out, the provider will add this as a default. + baseURL: "https://media.graphassets.com", + }, + }, +}); +``` + +## Modifiers + +All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which let's Hygraph decide what image format is best for the user's browser. + +```vue + +``` diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index b3d85f1cd..59653ef44 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -101,6 +101,9 @@ export default defineNuxtConfig({ sirv: { baseURL: 'https://demo.sirv.com' }, + hygraph: { + baseURL: 'https://media.graphassets.com' + }, providers: { custom: { provider: '~/providers/custom', diff --git a/playground/providers.ts b/playground/providers.ts index 460a2d5cf..4186da512 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -997,5 +997,30 @@ export const providers: Provider[] = [ modifiers: { watermark: '/watermark-v1.png', watermarkPosition: 'center', watermarkWidth: '30%' } } ] + }, + // Hygraph + { + name: 'hygraph', + samples: [ + { + src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', + width: 500, + height: 500, + fit: 'crop' + }, + { + src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', + width: 500, + fit: 'max', + format: 'auto_image' + }, + { + src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', + width: 300, + height: 300, + fit: 'clip', + format: 'jpg' + } + ] } ] diff --git a/src/provider.ts b/src/provider.ts index edd3d2621..42782d663 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -22,6 +22,7 @@ const BuiltInProviders = [ 'fastly', 'glide', 'gumlet', + 'hygraph', 'imageengine', 'imagekit', 'imgix', diff --git a/src/runtime/providers/hygraph.ts b/src/runtime/providers/hygraph.ts new file mode 100644 index 000000000..d9b52e2b0 --- /dev/null +++ b/src/runtime/providers/hygraph.ts @@ -0,0 +1,62 @@ +import { joinURL } from 'ufo' +import type { ProviderGetImage } from '../../types' + +type ImageOptimizations = { + width?: number + height?: number + fit?: string | 'clip' | 'crop' | 'scale' | 'max' + format?: string | 'jpg' | 'png' | 'webp' | 'avif' | 'auto_image' +} + +export function getImageFormat (format?: string) { + let result = 'auto_image' + + if (format && format !== 'auto_image') { + result = `output=format:${format}` + } + + return result +} + +export function optimizeHygraphImage (baseurl: string, url: string, optimizations: ImageOptimizations) { + baseurl = baseurl.replace(/\/+$/, '') + const imageId = url.split(`${baseurl}/`)[1] + const imageFormat = getImageFormat(optimizations.format) + const optimBase = 'resize' + + const optimList = [] + for (const [key, value] of Object.entries(optimizations)) { + if (key !== 'format' && value !== undefined) { + if (key === 'fit' && value === 'contain') { + optimList.push('fit:max') + } else { + optimList.push(`${key}:${value}`) + } + } + } + + const optim = `${optimBase}=${optimList.join(',')}` + const result = joinURL(baseurl, imageFormat, optim, imageId) + + return result +} + +export const getImage: ProviderGetImage = ( + src, + { modifiers = {}, baseurl } = {} +) => { + const { + width, + height, + fit, + format + } = modifiers + + if (!baseurl) { + baseurl = 'https://media.graphassets.com' + } + + return { + url: optimizeHygraphImage(baseurl, src, { width, height, fit, format }) + } +} diff --git a/test/e2e/__snapshots__/no-ssr.test.ts.snap b/test/e2e/__snapshots__/no-ssr.test.ts.snap index 606f4d7e2..2e1972881 100644 --- a/test/e2e/__snapshots__/no-ssr.test.ts.snap +++ b/test/e2e/__snapshots__/no-ssr.test.ts.snap @@ -164,6 +164,22 @@ exports[`browser (ssr: false) > gumlet should render images 2`] = ` ] `; +exports[`browser (ssr: false) > hygraph should render images 1`] = ` +[ + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", +] +`; + +exports[`browser (ssr: false) > hygraph should render images 2`] = ` +[ + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", +] +`; + 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", diff --git a/test/e2e/__snapshots__/ssr.test.ts.snap b/test/e2e/__snapshots__/ssr.test.ts.snap index 4f5b52912..7325bce91 100644 --- a/test/e2e/__snapshots__/ssr.test.ts.snap +++ b/test/e2e/__snapshots__/ssr.test.ts.snap @@ -164,6 +164,22 @@ exports[`browser (ssr: true) > gumlet should render images 2`] = ` ] `; +exports[`browser (ssr: true) > hygraph should render images 1`] = ` +[ + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", +] +`; + +exports[`browser (ssr: true) > hygraph should render images 2`] = ` +[ + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", +] +`; + 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", diff --git a/test/providers.ts b/test/providers.ts index d9e24737e..65eeea778 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -27,7 +27,8 @@ export const images = [ wagtail: { url: '329944/original|format-webp|webpquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' }, - sirv: { url: 'https://demo.sirv.com/test.png' } + sirv: { url: 'https://demo.sirv.com/test.png' }, + hygraph: { url: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb' } }, { args: ['/test.png', { width: 200 }], @@ -57,7 +58,8 @@ export const images = [ wagtail: { url: '329944/width-200|format-webp|webpquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x/' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200' } + sirv: { url: 'https://demo.sirv.com/test.png?w=200' }, + hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200/JL6e2yJERUyQtTiZIzPb' } }, { args: ['/test.png', { height: 200 }], @@ -87,7 +89,8 @@ export const images = [ wagtail: { url: '329944/height-200|format-webp|webpquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?height=200' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/x200/' }, - sirv: { url: 'https://demo.sirv.com/test.png?h=200' } + sirv: { url: 'https://demo.sirv.com/test.png?h=200' }, + hygraph: { url: 'https://media.graphassets.com/auto_image/resize=height:200/JL6e2yJERUyQtTiZIzPb' } }, { args: ['/test.png', { width: 200, height: 200 }], @@ -117,7 +120,8 @@ export const images = [ wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' } + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' }, + hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200/JL6e2yJERUyQtTiZIzPb' } }, { args: ['/test.png', { width: 200, height: 200, fit: 'contain' }], @@ -147,7 +151,8 @@ export const images = [ wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/-/stretch/off/' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' } + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' }, + hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' } }, { args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }], @@ -177,7 +182,8 @@ export const images = [ wagtail: { url: '329944/fill-200x200-c0|format-jpeg|jpegquality-70' }, directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain&format=jpg' }, uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/jpeg/-/resize/200x200/-/stretch/off/' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' } + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' }, + hygraph: { url: 'https://media.graphassets.com/output=format:jpg/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' } } ] as const From 5e25eca66a1b1f8dfef664fd76ba72dfe4c80d11 Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Thu, 14 Dec 2023 15:51:17 +0100 Subject: [PATCH 2/6] fix: typo in Hygraph readme --- docs/content/3.providers/hygraph.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.providers/hygraph.md b/docs/content/3.providers/hygraph.md index 8cdf57963..a04eba29a 100644 --- a/docs/content/3.providers/hygraph.md +++ b/docs/content/3.providers/hygraph.md @@ -15,7 +15,7 @@ To use this provider you just need to specify the base URL of your project. ```ts [nuxt.config.ts] export default defineNuxtConfig({ image: { - directus: { + hygraph: { // If not filled out, the provider will add this as a default. baseURL: "https://media.graphassets.com", }, From 59cc1dab02142aa2d9aaa1624979c841f351ac2c Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Fri, 15 Dec 2023 11:18:11 +0100 Subject: [PATCH 3/6] fix: added Hygraph icon to the docs --- docs/pages/index.vue | 2 +- docs/public/providers/hygraph.svg | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 docs/public/providers/hygraph.svg diff --git a/docs/pages/index.vue b/docs/pages/index.vue index 414ac7fc0..1842580a5 100644 --- a/docs/pages/index.vue +++ b/docs/pages/index.vue @@ -16,7 +16,7 @@ useSeoMeta({ const source = ref('npm i @nuxt/image') const { copy, copied } = useClipboard({ source }) -const providers = ['cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel'] +const providers = ['cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel'] // Disabling because svg to png does not work now with SSG // Related issue: https://github.com/unjs/ipx/issues/160 // const img = useImage() diff --git a/docs/public/providers/hygraph.svg b/docs/public/providers/hygraph.svg new file mode 100644 index 000000000..99830d08c --- /dev/null +++ b/docs/public/providers/hygraph.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 3ef12f920f572c809316367650a239d2b0fa6897 Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Fri, 15 Dec 2023 11:41:43 +0100 Subject: [PATCH 4/6] feat: add additional undocumented quality setting --- docs/content/3.providers/hygraph.md | 3 ++- playground/providers.ts | 7 +++++++ src/runtime/providers/hygraph.ts | 15 +++++++++------ 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/docs/content/3.providers/hygraph.md b/docs/content/3.providers/hygraph.md index a04eba29a..64cb246a6 100644 --- a/docs/content/3.providers/hygraph.md +++ b/docs/content/3.providers/hygraph.md @@ -25,7 +25,7 @@ export default defineNuxtConfig({ ## Modifiers -All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which let's Hygraph decide what image format is best for the user's browser. +All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which let's Hygraph decide what image format is best for the user's browser and `quality` 0-100. ```vue ``` diff --git a/playground/providers.ts b/playground/providers.ts index 4186da512..27bce3ccf 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -1008,6 +1008,13 @@ export const providers: Provider[] = [ height: 500, fit: 'crop' }, + { + src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', + width: 500, + height: 500, + fit: 'crop', + quality: 90 + }, { src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', width: 500, diff --git a/src/runtime/providers/hygraph.ts b/src/runtime/providers/hygraph.ts index d9b52e2b0..e3582890b 100644 --- a/src/runtime/providers/hygraph.ts +++ b/src/runtime/providers/hygraph.ts @@ -1,11 +1,12 @@ import { joinURL } from 'ufo' -import type { ProviderGetImage } from '../../types' +import type { ProviderGetImage } from '@nuxt/image' type ImageOptimizations = { width?: number height?: number fit?: string | 'clip' | 'crop' | 'scale' | 'max' - format?: string | 'jpg' | 'png' | 'webp' | 'avif' | 'auto_image' + format?: string | 'jpg' | 'png' | 'webp' | 'avif' | 'auto_image', + quality?: number } export function getImageFormat (format?: string) { @@ -23,10 +24,11 @@ export function optimizeHygraphImage (baseurl: string, url: string, optimization const imageId = url.split(`${baseurl}/`)[1] const imageFormat = getImageFormat(optimizations.format) const optimBase = 'resize' + const quality = optimizations.quality ? `quality=value:${optimizations.quality}/compress/` : '' const optimList = [] for (const [key, value] of Object.entries(optimizations)) { - if (key !== 'format' && value !== undefined) { + if (key !== 'format' && key !== 'quality' && value !== undefined) { if (key === 'fit' && value === 'contain') { optimList.push('fit:max') } else { @@ -36,7 +38,7 @@ export function optimizeHygraphImage (baseurl: string, url: string, optimization } const optim = `${optimBase}=${optimList.join(',')}` - const result = joinURL(baseurl, imageFormat, optim, imageId) + const result = joinURL(baseurl, imageFormat, optim, quality, imageId) return result } @@ -49,7 +51,8 @@ export const getImage: ProviderGetImage = ( width, height, fit, - format + format, + quality } = modifiers if (!baseurl) { @@ -57,6 +60,6 @@ export const getImage: ProviderGetImage = ( } return { - url: optimizeHygraphImage(baseurl, src, { width, height, fit, format }) + url: optimizeHygraphImage(baseurl, src, { width, height, fit, format, quality }) } } From 9c03150559170b3491f227d232a4755f2edcc768 Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Fri, 15 Dec 2023 14:06:10 +0100 Subject: [PATCH 5/6] Update docs/content/3.providers/hygraph.md Co-authored-by: Daniel Roe --- docs/content/3.providers/hygraph.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.providers/hygraph.md b/docs/content/3.providers/hygraph.md index 64cb246a6..95a4e6603 100644 --- a/docs/content/3.providers/hygraph.md +++ b/docs/content/3.providers/hygraph.md @@ -25,7 +25,7 @@ export default defineNuxtConfig({ ## Modifiers -All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which let's Hygraph decide what image format is best for the user's browser and `quality` 0-100. +All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which lets Hygraph decide what image format is best for the user's browser and `quality` 0-100. ```vue Date: Fri, 15 Dec 2023 17:28:21 +0100 Subject: [PATCH 6/6] fix: added jpeg as format and fixed test snapshots --- playground/providers.ts | 8 +------- src/runtime/providers/hygraph.ts | 2 +- test/e2e/__snapshots__/no-ssr.test.ts.snap | 4 ++-- test/e2e/__snapshots__/ssr.test.ts.snap | 4 ++-- 4 files changed, 6 insertions(+), 12 deletions(-) diff --git a/playground/providers.ts b/playground/providers.ts index 27bce3ccf..eeabc2aaa 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -1002,12 +1002,6 @@ export const providers: Provider[] = [ { name: 'hygraph', samples: [ - { - src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', - width: 500, - height: 500, - fit: 'crop' - }, { src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb', width: 500, @@ -1026,7 +1020,7 @@ export const providers: Provider[] = [ width: 300, height: 300, fit: 'clip', - format: 'jpg' + format: 'jpeg' } ] } diff --git a/src/runtime/providers/hygraph.ts b/src/runtime/providers/hygraph.ts index e3582890b..cbdbdc9b7 100644 --- a/src/runtime/providers/hygraph.ts +++ b/src/runtime/providers/hygraph.ts @@ -13,7 +13,7 @@ export function getImageFormat (format?: string) { let result = 'auto_image' if (format && format !== 'auto_image') { - result = `output=format:${format}` + result = `output=format:${format === 'jpeg' ? 'jpg' : format}` } return result diff --git a/test/e2e/__snapshots__/no-ssr.test.ts.snap b/test/e2e/__snapshots__/no-ssr.test.ts.snap index 2e1972881..bd3edae54 100644 --- a/test/e2e/__snapshots__/no-ssr.test.ts.snap +++ b/test/e2e/__snapshots__/no-ssr.test.ts.snap @@ -166,7 +166,7 @@ exports[`browser (ssr: false) > gumlet should render images 2`] = ` exports[`browser (ssr: false) > hygraph should render images 1`] = ` [ - "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", ] @@ -174,7 +174,7 @@ exports[`browser (ssr: false) > hygraph should render images 1`] = ` exports[`browser (ssr: false) > hygraph should render images 2`] = ` [ - "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", ] diff --git a/test/e2e/__snapshots__/ssr.test.ts.snap b/test/e2e/__snapshots__/ssr.test.ts.snap index 7325bce91..9bfd3da31 100644 --- a/test/e2e/__snapshots__/ssr.test.ts.snap +++ b/test/e2e/__snapshots__/ssr.test.ts.snap @@ -166,7 +166,7 @@ exports[`browser (ssr: true) > gumlet should render images 2`] = ` exports[`browser (ssr: true) > hygraph should render images 1`] = ` [ - "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", ] @@ -174,7 +174,7 @@ exports[`browser (ssr: true) > hygraph should render images 1`] = ` exports[`browser (ssr: true) > hygraph should render images 2`] = ` [ - "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/JL6e2yJERUyQtTiZIzPb", + "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb", "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb", ]