🖼 Image Presets for Vite.js apps

Typically in vite we use build.rollupOptions.output.assetFileNames to tweak output directory and file names, like:

            rollupOptions: {
                output: {
                    assetFileNames: (asset) => {
                        if (
                            ['.jpg', '.png', '.svg', '.avif', '.webp'].some((ext) =>
                                asset.name?.endsWith(ext),
                            )
                        ) {
                            return 'images/[name]-[hash][extname]';
                        }
                        return 'assets/[name]-[hash][extname]';  // for other assets like fonts and audios etc.
                    },
                },

While this plugin provides an assetsDir option, it should still conform to the idiom above when assetsDir is not specified. But unfortunately that's not the current behavior.

I can submit a PR for this if feasible.

When we deploy https://github.com/mseele/sve-website via netlify, the image are re-written each time and the image cache is ignored. Please see the attached build log.

If there is anything I can do to help detecting the problem, please let me know.

A security issue #14 is fixed in the pull #15 and it is also merged but this package is not yet updated in NPM registry. Please publish the the updated repo in NPM so all the dependent projects can benefited

Sharp supports animated option to read all frames of an animated png, gif, avif, webp image formats. But, there is no way to use that option in presets. Now by default all animated images are converted to non-animated upon any conversion.

https://github.com/Rajaniraiyn/modern-web-boilerplate , this project uses apng but upon using this plugin it is converted into non-animated form.

Not only this. It would be nicer to enable an option to parse custom options to sharp

Is there any possibility to load dynamic images? I have the following use case: I load a list of events from my headless cms. All events have an attribute title image that is named like an image i have in my assets folder. Now i want to use vite-plugin-image-presets with the picture vue sfc and the image described in the event attribute. Is there any pattern i can use to do this?

My workaround is a sfc called DynamicPicture that looks like this:

<template>
  <Picture :src="src" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

import event_img_1 from '@/assets/events/event_img_1.jpg?preset=full'
import event_img_2 from '@/assets/events/event_img_2.jpg?preset=full'
import event_img_3 from '@/assets/events/event_img_3.jpg?preset=full'

let assets = new Map<string, any>([
  ['event_img_1.jpg', event_img_1],
  ['event_img_2.jpg', event_img_2],
  ['event_img_3.jpg', event_img_3],
])

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const src = computed(() => assets.get(props.name))
</script>

It works. But i need to add a line of code every time i add a new event image into the assets directory (what happens sometimes).

Hi,

It looks like a great plugin ! Sorry if I misunderstand something, but I can't find how to use this in a raw HTML or a Twig template. Is this something possible ?

Best.

There's a possible vulnerability in logic that is run only at npm install time when installing versions of sharp prior to the latest v0.30.5.

This is not part of any runtime code, does not affect Windows users at all, and is unlikely to affect anyone that already cares about the security of their build environment. However, out of an abundance of caution, I've created this advisory.

If an attacker has the ability to set the value of the PKG_CONFIG_PATH environment variable in a build environment then they might be able to use this to inject an arbitrary command at npm install time.

I've used the Common Vulnerability Scoring System (CVSS) calculator to determine the maximum possible impact, which suggests a "medium" score of 5.9, but for most people the real impact will be dealing with the noise from automated security tooling that this advisory will bring.

AV:L/AC:L/PR:H/UI:R/S:U/C:H/I:H/A:H/E:P/RL:O/RC:C/CR:X/IR:X/AR:X/MAV:X/MAC:X/MPR:X/MUI:R/MS:X/MC:X/MI:X/MA:X

This problem was fixed in commit a6aeef6 and published as part of sharp v0.30.5.

Description 📖

Currently the default export for preset imports is ImageSource[]. This allows presets to define additional source tags, with different formats, conditional widths and densities, etc.

For presets that define a single ImageSource that only contains srcsets, it would be convenient for the default export to be a string.

That would make it work out of the box in img and source tags in HTML and Vue SFCs, where src and srcset are already extracted as imports.

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,
  },
])

It would be nice if there were a way to specify a default preset so every import didn't need the query string.

Maybe something like this...

    imagePresets({
      'default': widthPreset({
        widths: [425, 1024, 1200],
        formats: {
          webp: { quality: 100 },
          png: { quality: 100 }
        }
      })
    }),

Or this...

    imagePresets({
      'foobar': widthPreset({
        default: true,
        widths: [425, 1024, 1200],
        formats: {
          webp: { quality: 100 },
          png: { quality: 100 }
        }
      })
    }),

Great plugin btw 👍 It's saved me a lot of time already.