vite-plugin-image-optimizer
vite-plugin-image-optimizer copied to clipboard
FatehAK
Automatic resizing of images
Describe the feature you'd like to request
It would be useful to based on the file extension or folder structure decide what is the max resolution for each file. For example, some of my icons are 1024x1024 but that size is unnecessary in production, so it would be nice to before optimization reduce their size to 256x256 and then optimize. Keeping the aspect ratio should not break anything (and it would be optional anyway).
Describe the solution you'd like
An entry in config that helps with resizing the images based on extension or folder structure.
Additional context
No response
Validations
- [X] Read the docs.
- [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.
I was thinking about doing it by passing parameters as query. Let's say we want to perform this operation on the image:
sharp('input.jpg')
.resize({
width: 30,
height: 30,
position: 'right top',
fit: 'contain',
})
.gamma(2.2, 3.0)
We could use an object to represent what we want to do with the image (or an array if the order is that relevant).
{
"resize": {
"width": 30,
"height": 30,
"position": "right top",
"fit": "contain"
},
"gamma": [2.2, 3.0]
}
And pass it as query.
const image = import('input.jpg?resize[width]=30&resize[height]=30&resize[position]=right%20top&resize[fit]=contain&gamma[]=2.2&gamma[]=3')
It looks tedious, but this could be wrapped and handled nicely by a component.
Not sure how good this idea is as this is not my field of expertise.
Sounds exactly like this package: https://www.npmjs.com/package/vite-imagetools
