Is there a value for the width directive to target the original size?

[ElMassimo]

Hi, is there a special value for the width directive so that it uses the original size of the image?

The use case is format conversion, where I'd like to generate a webp version of the image at its full resolution as well as a smaller version.

For example:

import srcsets from 'posts.jpg?width=original;500&format=jpg;webp&metadata'

Background 📜

I'm playing around trying to replace a Jekyll setup I had where I was using ImageMagick to generate smaller versions of large images, for use in mobile devices.

An example picture tag:

<picture>
  <source srcset="/images/posts.webp" type="image/webp" media="(min-width: 600px)">
  <source srcset="/images/posts-500.webp" type="image/webp">
  <img src="/images/posts.jpg" alt="posts.jpg" class="hero-bg">
</picture>

[JonasKruckenberg]

Great idea! This didn't cross my mind, but now that you mentioned it, why not!
I'm currently in the middle of a refactor, so this feature might take a while before it is released though.
As a workaround you can do the following

import { src, width } from "example.jpg?metadata"
import srcset from "example.jpg?width=500;700&srcset"

const combined = `${src} ${width}w, ${srcset} `

[ElMassimo]

Thanks for the example!

[IoriBranford]

Though not critical, this could be nice with Vite glob import, save a bit of code duplication.

It would let me do this

const ImageItems : Record<string, string> = import.meta.glob([
  './gallery/*.png', './gallery/*.jpg',
], {
  eager: true,
  import: 'default',
  query: {
    galleryimg: true // ?w=original;640;160
  }
})

Object.entries(ImageItems).map((item) => {
  // original image is item[1][0]
})

While right now I have to do this:

const ImageItems : Record<string, string> = import.meta.glob([
  './gallery/*.png', './gallery/*.jpg',
], {
  eager: true,
  import: 'default',
  query: {
    galleryimg: true // ?w=640;160
  }
})

const OriginalImages : Record<string, string> = import.meta.glob([
  './gallery/*.png', './gallery/*.jpg',
], {
  eager: true,
  import: 'default',
})

Object.entries(ImageItems).map((item) => {
  // original image is OriginalImages[item[0]]
})

[benmccann]

You can do w=1000000. We don't upscale images by default, so it will return the original