feat(ipx): use alternate URL style with format as file extension

package.json

@@ -59,7 +59,7 @@
     "globby": "^14.1.0",
     "happy-dom": "^17.4.4",
     "installed-check": "^9.3.0",
-    "ipx": "^2.1.0",
+    "ipx": "https://github.com/sgarner/ipx/releases/download/v3.0.4-alpha.feat-format-extension.1/ipx-3.0.4-alpha.feat-format-extension.1.tgz",
     "jiti": "2.4.2",
     "knip": "^5.46.5",
     "nitropack": "^2.11.8",
@@ -77,7 +77,7 @@
     "vue-tsc": "^2.2.8"
   },
   "optionalDependencies": {
-    "ipx": "^2.1.0"
+    "ipx": "https://github.com/sgarner/ipx/releases/download/v3.0.4-alpha.feat-format-extension.1/ipx-3.0.4-alpha.feat-format-extension.1.tgz"
   },
   "packageManager": "pnpm@10.7.1",
   "resolutions": {

playground/providers.ts

@@ -54,6 +54,7 @@ export const providers: Provider[] = [
         from: 'Jeremy Thomas',
         width: 300,
         height: 300,
+        format: 'webp',
         link: 'https://unsplash.com/@jeremythomasphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText',
       },
       {

src/runtime/components/NuxtImg.vue

@@ -28,7 +28,7 @@
 import { computed, onMounted, ref, useAttrs } from 'vue'
 
 import { useImage } from '../composables'
-import { parseSize } from '../utils'
+import { chooseDefaultFormat, getFileExtension, parseSize } from '../utils'
 import { prerenderStaticImages } from '../utils/prerender'
 import { markFeatureUsage } from '../utils/performance'
 import { imgProps, useBaseImage } from './_base'
@@ -51,6 +51,9 @@ const $img = useImage()
 
 const _base = useBaseImage(props)
 
+const provider = props.provider || $img.options.provider
+const isIPX = provider === 'ipx' || provider === 'ipxStatic'
+
 const placeholderLoaded = ref(false)
 const imgEl = ref<HTMLImageElement>()
 
@@ -68,6 +71,7 @@ const sizes = computed(() => $img.getSizes(props.src!, {
     ..._base.modifiers.value,
     width: parseSize(props.width),
     height: parseSize(props.height),
+    ...(isIPX ? { format: chooseDefaultFormat(getFileExtension(props.src)) } : undefined),
   },
 }))
 

src/runtime/components/NuxtPicture.vue

@@ -30,7 +30,7 @@ import { computed, onMounted, ref, useAttrs } from 'vue'
 
 import { prerenderStaticImages } from '../utils/prerender'
 import { markFeatureUsage } from '../utils/performance'
-import { getFileExtension } from '../utils'
+import { chooseDefaultFormat, getFileExtension } from '../utils'
 import { useImage } from '../composables'
 import { useBaseImage, pictureProps, baseImageProps } from './_base'
 
@@ -54,14 +54,12 @@ const { attrs: baseAttrs, options: baseOptions, modifiers: baseModifiers } = use
 
 const originalFormat = computed(() => getFileExtension(props.src))
 
-const isTransparent = computed(() => ['png', 'webp', 'gif', 'svg'].includes(originalFormat.value))
-
 const legacyFormat = computed(() => {
   if (props.legacyFormat) {
     return props.legacyFormat
   }
 
-  return isTransparent.value ? 'png' : 'jpeg'
+  return chooseDefaultFormat(originalFormat.value)
 })
 
 type Source = { src?: string, srcset?: string, type?: string, sizes?: string }

src/runtime/providers/ipx.ts

@@ -1,6 +1,6 @@
 import { joinURL, encodePath, encodeParam } from 'ufo'
 import type { ProviderGetImage } from '../../module'
-import { createOperationsGenerator } from '#image'
+import { createOperationsGenerator, chooseDefaultFormat, getFileExtension } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {
@@ -23,14 +23,31 @@ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}
     delete modifiers.height
   }
 
-  const params = operationsGenerator(modifiers) || '_'
-
   if (!baseURL) {
     baseURL = joinURL(ctx.options.nuxt.baseURL, '/_ipx')
   }
 
+  let format = modifiers.format
+
+  if (format === 'auto' || Object.keys(modifiers).length === 0) {
+    // Use URL style with modifiers as second path segment: /_ipx/f_auto&s_300x300/source.jpg
+    const params = operationsGenerator(modifiers) || '_'
+
+    return {
+      url: joinURL(baseURL, params, encodePath(src)),
+    }
+  }
+
+  if (!format) {
+    format = chooseDefaultFormat(getFileExtension(src))
+  }
+
+  // Use URL style with modifiers at end of filename, format as extension: /_ipx/~/source.jpg@s_300x300.webp
+  delete modifiers.format
+  const params = operationsGenerator(modifiers) || '_'
+
   return {
-    url: joinURL(baseURL, params, encodePath(src)),
+    url: joinURL(baseURL, '~', `${encodePath(src)}@@${params}.${format}`),
   }
 }
 

src/runtime/utils/index.ts

@@ -19,6 +19,19 @@ export function getFileExtension(url = '') {
   return extension
 }
 
+/**
+ * Returns a suitable default format to use based on the image's original format.
+ */
+export function chooseDefaultFormat(originalFormat: string) {
+  if (originalFormat === 'svg') {
+    return 'svg'
+  }
+
+  const isTransparent = ['png', 'webp', 'gif'].includes(originalFormat)
+
+  return isTransparent ? 'png' : 'jpeg'
+}
+
 export function cleanDoubleSlashes(path = '') {
   return path.replace(/(https?:\/\/)|(\/)+/g, '$1$2')
 }

test/e2e/generate.test.ts

@@ -35,14 +35,15 @@ 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/~/images/colors.jpg@@s_300x300.jpeg",
+        "/_ipx/~/images/colors.jpg@@s_300x300.webp",
+        "/_ipx/~/images/colors.jpg@@s_600x600.jpeg",
+        "/_ipx/~/images/everest.jpg@@s_300x300.jpeg",
+        "/_ipx/~/images/everest.jpg@@s_600x600.jpeg",
+        "/_ipx/~/images/tacos.svg@@s_300x300.svg",
+        "/_ipx/~/images/tacos.svg@@s_600x600.svg",
+        "/_ipx/~/unsplash/photo-1606112219348-204d7d8b94ee@@s_300x300.jpeg",
+        "/_ipx/~/unsplash/photo-1606112219348-204d7d8b94ee@@s_600x600.jpeg",
       ]
     `)
   })

test/providers.ts

@@ -38,7 +38,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200 }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/w_200/test.png' },
+    ipx: { url: '/_ipx/~/test.png@@w_200.png' },
     aliyun: { url: '/test.png?image_process=resize,w_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200/test.png' },
@@ -74,7 +74,7 @@ export const images = [
   {
     args: ['/test.png', { height: 200 }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/h_200/test.png' },
+    ipx: { url: '/_ipx/~/test.png@@h_200.png' },
     aliyun: { url: '/test.png?image_process=resize,h_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&h=200&w=1536&q=100' },
     cloudflare: { url: '/cdn-cgi/image/h=200/test.png' },
@@ -110,7 +110,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200, height: 200 }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/s_200x200/test.png' },
+    ipx: { url: '/_ipx/~/test.png@@s_200x200.png' },
     aliyun: { url: '/test.png?image_process=resize,fw_200,fh_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&h=200&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200,h=200/test.png' },
@@ -146,7 +146,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/fit_contain&s_200x200/test.png' },
+    ipx: { url: '/_ipx/~/test.png@@fit_contain&s_200x200.png' },
     aliyun: { url: '/test.png?image_process=fit,contain/resize,fw_200,fh_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&h=200&fit=contain&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain/test.png' },
@@ -182,7 +182,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/fit_contain&f_jpeg&s_200x200/test.png' },
+    ipx: { url: '/_ipx/~/test.png@@fit_contain&s_200x200.jpeg' },
     aliyun: { url: '/test.png?image_process=fit,contain/format,jpeg/resize,fw_200,fh_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&h=200&fit=contain&format=jpeg&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain,f=jpeg/test.png' },