Convert to webp before upload
I am building an admin page where I can update images and I don't want my client to upload no other image format than webp. I know how to convert images to webp and I have the utility function. How do I intercept the file being uploaded and convert it to webp before uploading? Also, how would I deal with a scenario where multiple images are uploaded ?
5 Replies
What environment is this @sogzyy? Node or web?
Doesn't have to be any of those though, just what env 🙂
Utapi now solves it for me on the server. I have more control over the deleting of files and uploading files. I intercept the files from form data and convert to webp before passing to utapi.uploadFiles
This is 2024 and image optimization is at the core of web development. I am open to contributing regarding the building of a feature that allows user to indicate whether they want to turn uploaded images to a webp file before uploading.
Hey @sogzyy could you provide an example of how to first convert images to
webp before uploading them?If you are uploading through forms and want to check types, resize etc. on the client, look into Uppy Uploader... It has all those feature and more, and you can upload to w/e you like
+ you get a nice UI for uploading
However, if you decide to stay with what you have... then i guess you would have to intercept the POST request before it's made, then do all the type checks as well as convert to webp then continue with POST
usually though, it's not really common to do such things on the client, but to just upload to the server, maybe check mime types before, then on the server optimize and/or convert to webp
and you can use something like sharp for that https://www.npmjs.com/package/sharp
npm
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, GIF, AVIF and TIFF images. Latest version: 0.33.5, last published: 2 months ago. Start using sharp in your project by running
npm i sharp. There are 4913 other projects in the npm registry using sharp.