Come si usa
- Trascina un file WebP nell’area di rilascio, fai clic per sceglierne uno oppure incolla un’immagine. Funzionano anche file PNG e JPEG.
- Per creare un WebP da un altro formato, scegli WebP in Converti in e imposta la Qualità.
- Se vuoi, imposta una Larghezza massima, poi confronta la dimensione originale con quella codificata.
- Copia o scarica il data URI, il Base64 puro, il tag img HTML, il background-image CSS o il Markdown.
Che cos’è WebP?
WebP è un formato di immagine rilasciato da Google nel 2010. Offre una compressione con perdita basata sul codec video VP8, una modalità lossless separata, un canale alfa e l’animazione, tutto in un unico formato. Il tipo MIME è image/webp e, poiché il file è un contenitore RIFF, l’output Base64 inizia con UklGR. Secondo Google, i file WebP lossless sono circa il 26% più piccoli dei PNG e quelli lossy dal 25 al 34% più piccoli dei JPEG a parità di qualità.
Perché WebP è adatto ai data URI
Base64 aggiunge lo stesso terzo a ogni file, quindi il file di partenza più piccolo dà la stringa più corta. Per questo WebP è una scelta naturale: un’icona PNG trasparente convertita in WebP mantiene la trasparenza e di solito si riduce, e una foto JPEG diventa più piccola con una qualità visiva simile. Impostazioni di qualità molto alte possono produrre un file più grande di un originale ottimizzato, quindi controlla la dimensione codificata prima di copiare.
I file WebP animati conservano tutti i fotogrammi se li codifichi senza modificarli. La conversione o il ridimensionamento rielaborano un solo fotogramma.
Supporto in browser e client
Tutti i principali browser attuali visualizzano WebP: Chrome, Edge, Firefox, Opera e Safari dalla versione 14 in poi. Solo browser molto vecchi come Internet Explorer non lo supportano. Con le email la situazione è diversa: diversi client di posta desktop, tra cui Outlook per Windows, non visualizzano WebP, quindi nei template email usa PNG o JPEG.
Creare data URI WebP in JavaScript
// Legge un file selezionato dall'utente
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Ricodifica un canvas come WebP con qualità all'80%
const uri = canvas.toDataURL('image/webp', 0.8);Se un browser non è in grado di codificare WebP, toDataURL ripiega silenziosamente su PNG, quindi verifica che il risultato inizi con data:image/webp.
Domande frequenti
Posso convertire qui PNG o JPEG in WebP Base64?
Sì. Carica l’immagine, scegli WebP in Converti in e imposta la qualità. La conversione usa il codificatore integrato nel tuo browser e il risultato viene codificato come data:image/webp.
Base64 mantiene l’animazione dei WebP?
Sì, a condizione che non sia selezionata alcuna conversione e che non sia impostata una larghezza massima. In questo caso la stringa Base64 contiene il file esatto con tutti i fotogrammi.
Tutti i browser mostrano le immagini data:image/webp?
Sì, tutte le versioni attuali di Chrome, Edge, Firefox, Opera e Safari. Internet Explorer e le versioni di Safari precedenti alla 14 no.