vite-plugin-image-presets

vite-plugin-image-presets copied to clipboard

Taking the example from the readme...

widthPreset({
  class: 'img thumb',
  loading: 'lazy',
  widths: [48, 96],
  formats: {
    webp: { quality: 50 },
    jpg: { quality: 70 }
  }
})

it would be great to have a width and height attributes to spread onto the <img> in order to give it the correct intrinsic dimensions and reserve the correct amount of space when loading to avoid layout shifts, e.g. assuming a 100x150 source image

expect(thumbnails).toEqual([
  {
    type: 'image/webp',
    srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w',
  },
  {
    type: 'image/jpeg',
    srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w',
    src: '/assets/logo.81d93491.jpeg',
    class: 'img thumb',
    loading: 'lazy',
    
    // width and height of the generated image used for `src`
    width: 96,
    height: 144,
  },
])

Hi Ben!

For some presets (like the density one) and certain use cases the size of the image does not represent the display size.

I would make this feature opt-in, probably by passing an option to the helper when defining a preset.

PRs are welcome!

Opt-in makes sense! I did take a look to see if I could quickly PR something, but IIUC the sharp image object is only accessed as part of srcset generation so it might be a reasonably big change https://github.com/ElMassimo/vite-plugin-image-presets/blob/44e5fb6bb220b73f0ddfc033c145468ae2c7e77b/src/presets.ts#L40

I'll take a closer look when I get a chance! Thanks for the excellent plugin 🌟

(FWIW this feature comes with https://github.com/dazuaz/responsive-loader which is what I'm migrating from)