Automatic resizing of images

[grzracz]

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

• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[maxswjeon]

Yes! In addition, support for srcset would be really good if possible!

[IgorSzymanski]

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.

[menasheh]

this would be awesome

[alexanderhorner]

Sounds exactly like this package: https://www.npmjs.com/package/vite-imagetools