Para mejorar el performance , necesito reducir el tamaño de las imágenes que envío a mi cloud storage (firebase) . A través de algunas investigaciones, llegué a saber que webp es el camino a seguir, pero estoy usando react dropzone y tengo una idea de cómo trabajar estos 2 juntos.

Arrastrar y soltar.js

 function DragAndDrop() { const [files, setFiles] = useState([]); const { getRootProps, getInputProps } = useDropzone({ accept: "image/*", maxFiles: 5, onDrop: (acceptedFiles) => { setFiles((files) => [ ...files, ...acceptedFiles.map((file) => Object.assign(file, { key: file.name + randomId(), // to allow adding files with same name preview: URL.createObjectURL(file), }) ), ]); }, }); const thumbs = files.map((file, i) => ( <div style={thumb} key={file.key}> <div style={thumbInner}> <img src={file.preview} style={img} alt="imported images" /> </div> <button type="button" style={removeButton} onClick={() => removeFile(i)}> X </button> </div> )); useEffect( () => () => { files.forEach((file) => URL.revokeObjectURL(file.preview)); }, [files] ); }