feat: support Netlify Image CDN

.gitignore

@@ -10,3 +10,6 @@ sw.*
 .idea
 .vercel
 .output
+
+# Local Netlify folder
+.netlify

docs/pages/index.vue

@@ -16,7 +16,7 @@ useSeoMeta({
 const source = ref('npm i @nuxt/image')
 const { copy, copied } = useClipboard({ source })
 
-const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
+const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'netlifyImageCdn', 'netlifyLargeMedia', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
 // Disabling because svg to png does not work now with SSG
 // Related issue: https://github.com/unjs/ipx/issues/160
 // const img = useImage()

playground/nuxt.config.ts

@@ -74,7 +74,8 @@ export default defineNuxtConfig({
     imagekit: {
       baseURL: 'https://ik.imagekit.io/demo'
     },
-    netlify: {
+    netlify: {},
+    netlifyLargeMedia: {
       baseURL: 'https://netlify-photo-gallery.netlify.app'
     },
     layer0: {

playground/providers.ts

@@ -338,12 +338,44 @@ export const providers: Provider[] = [
     name: 'netlify',
     samples: [
       {
-        src: '/images/apple.jpg',
+        src: '/images/colors.jpg',
+        width: 100,
+        height: 100,
+        fit: 'cover'
+      },
+      {
+        src: '/images/colors.jpg',
+        width: 400,
+        height: 300
+      }
+    ]
+  },
+  {
+    name: 'netlifyImageCdn',
+    samples: [
+      {
+        src: '/images/colors.jpg',
+        width: 100,
+        height: 100,
+        fit: 'cover'
+      },
+      {
+        src: '/images/colors.jpg',
+        width: 400,
+        height: 300
+      }
+    ]
+  },
+  {
+    name: 'netlifyLargeMedia',
+    samples: [
+      {
+        src: '/images/colors.jpg',
         width: 101,
         fit: 'contain'
       },
       {
-        src: '/images/apple.jpg',
+        src: '/images/colors.jpg',
         width: 200,
         height: 200,
         fit: 'fill'

src/provider.ts

@@ -32,6 +32,8 @@ const BuiltInProviders = [
   'ipxStatic',
   'layer0',
   'netlify',
+  'netlifyLargeMedia',
+  'netlifyImageCdn',
   'prepr',
   'none',
   'prismic',

src/runtime/providers/netlify.ts

@@ -1,50 +1,9 @@
-import { joinURL } from 'ufo'
-import type { ProviderGetImage } from '../../types'
-import { createOperationsGenerator } from '#image'
+import { getImage as largeMediaGetImage, operationsGenerator as largeMediaOptionsGenerator } from './netlifyLargeMedia'
+import { getImage as cdnGetImage, operationsGenerator as cdnOptionsGenerator } from './netlifyImageCdn'
 
-export const operationsGenerator = createOperationsGenerator({
-  keyMap: {
-    height: 'h',
-    fit: 'nf_resize',
-    width: 'w'
-  },
-  valueMap: {
-    fit: {
-      fill: 'smartcrop',
-      contain: 'fit'
-    }
-  },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`
-})
+// If the site has the deprecated Netlify Large Media enabled we will use the old
+// Large Media adapter. Otherwise, we will use the Netlify Image CDN
+const hasLargeMedia = Boolean(process.env.NETLIFY_LFS_ORIGIN_URL)
 
-const isDev = process.env.NODE_ENV === 'development'
-
-// https://docs.netlify.com/large-media/transform-images/
-
-export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => {
-  if (modifiers.format) {
-    // Not currently supported
-    delete modifiers.format
-  }
-  const hasTransformation = modifiers.height || modifiers.width
-  if (!modifiers.fit && hasTransformation) {
-    // fit is required for resizing images
-    modifiers.fit = 'contain'
-  }
-  if (hasTransformation && modifiers.fit !== 'contain' && !(modifiers.height && modifiers.width)) {
-    // smartcrop is only supported with both height and width
-    if (isDev) {
-      // eslint-disable-next-line
-      console.warn(`Defaulting to fit=contain as smart cropping is only supported when providing both height and width. Warning originated from \`${src}\`.`)
-    }
-    modifiers.fit = 'contain'
-  }
-  if (isDev) {
-    return { url: src }
-  }
-  const operations = operationsGenerator(modifiers)
-  return {
-    url: joinURL(baseURL, src + (operations ? ('?' + operations) : ''))
-  }
-}
+export const getImage = hasLargeMedia ? largeMediaGetImage : cdnGetImage
+export const operationsGenerator = hasLargeMedia ? largeMediaOptionsGenerator : cdnOptionsGenerator

src/runtime/providers/netlifyImageCdn.ts

@@ -0,0 +1,52 @@
+import type { ProviderGetImage } from '../../types'
+import { createOperationsGenerator } from '#image'
+
+// https://docs.netlify.com/image-cdn/overview/
+export const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    width: 'w',
+    height: 'h',
+    format: 'fm',
+    quality: 'q',
+    position: 'position',
+    fit: 'fit'
+  },
+  valueMap: {
+    fit: {
+      fill: 'fill',
+      cover: 'cover',
+      contain: 'contain'
+    },
+    format: {
+      avif: 'avif',
+      gif: 'gif',
+      jpg: 'jpg',
+      png: 'png',
+      webp: 'webp'
+    },
+    position: {
+      top: 'top',
+      right: 'right',
+      bottom: 'bottom',
+      left: 'left',
+      center: 'center'
+    }
+  },
+  joinWith: '&',
+  formatter: (key: string, value: string) => `${key}=${value ?? ''}`
+})
+
+export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}) => {
+  const mods: Record<string, string> = { ...modifiers }
+  mods.url = src
+  if (modifiers.width) {
+    mods.width = modifiers.width.toString()
+  }
+  if (modifiers.height) {
+    mods.height = modifiers.height.toString()
+  }
+  const operations = operationsGenerator(mods)
+  return {
+    url: `${baseURL || '/.netlify/images'}?${operations}`
+  }
+}

src/runtime/providers/netlifyLargeMedia.ts

@@ -0,0 +1,50 @@
+import { joinURL } from 'ufo'
+import type { ProviderGetImage } from '../../types'
+import { createOperationsGenerator } from '#image'
+
+export const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    height: 'h',
+    fit: 'nf_resize',
+    width: 'w'
+  },
+  valueMap: {
+    fit: {
+      fill: 'smartcrop',
+      contain: 'fit'
+    }
+  },
+  joinWith: '&',
+  formatter: (key: string, value: string) => `${key}=${value}`
+})
+
+const isDev = process.env.NODE_ENV === 'development'
+
+// https://docs.netlify.com/large-media/transform-images/
+
+export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => {
+  if (modifiers.format) {
+    // Not currently supported
+    delete modifiers.format
+  }
+  const hasTransformation = modifiers.height || modifiers.width
+  if (!modifiers.fit && hasTransformation) {
+    // fit is required for resizing images
+    modifiers.fit = 'contain'
+  }
+  if (hasTransformation && modifiers.fit !== 'contain' && !(modifiers.height && modifiers.width)) {
+    // smartcrop is only supported with both height and width
+    if (isDev) {
+      // eslint-disable-next-line
+      console.warn(`Defaulting to fit=contain as smart cropping is only supported when providing both height and width. Warning originated from \`${src}\`.`)
+    }
+    modifiers.fit = 'contain'
+  }
+  if (isDev) {
+    return { url: src }
+  }
+  const operations = operationsGenerator(modifiers)
+  return {
+    url: joinURL(baseURL, src + (operations ? ('?' + operations) : ''))
+  }
+}

test/providers.ts

@@ -15,7 +15,9 @@ export const images = [
     imageengine: { url: '/test.png' },
     unsplash: { url: '/test.png' },
     imagekit: { url: '/test.png' },
-    netlify: { url: '/test.png' },
+    netlify: { url: '/.netlify/images?url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png' },
     prepr: { url: 'https://projectName.stream.prepr.io/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?auto=format' },
@@ -49,7 +51,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200' },
     unsplash: { url: '/test.png?w=200' },
     imagekit: { url: '/test.png?tr=w-200' },
-    netlify: { url: '/test.png?w=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&nf_resize=fit' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&auto=format' },
@@ -83,7 +87,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/h_200' },
     unsplash: { url: '/test.png?h=200' },
     imagekit: { url: '/test.png?tr=h-200' },
-    netlify: { url: '/test.png?h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?h=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?h=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?h=200&nf_resize=fit' },
     prepr: { url: 'https://projectName.stream.prepr.io/h_200/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?h=200&auto=format' },
@@ -117,7 +123,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200' },
     unsplash: { url: '/test.png?w=200&h=200' },
     imagekit: { url: '/test.png?tr=w-200,h-200' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200/image-test-300x450-png' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&auto=format' },
@@ -151,7 +159,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox' },
     unsplash: { url: '/test.png?w=200&h=200&fit=fill' },
     imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&fit=contain&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain/image-test-300x450-png' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&auto=format&bg=ffffff' },
@@ -185,7 +195,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox/f_jpg' },
     unsplash: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' },
     imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&fit=contain&fm=jpeg&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&fm=jpeg&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&fm=jpg&bg=ffffff' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain,format_jpg/image-test-300x450-png' },