Cómo se usa
- Suelta un archivo WebP en la zona de arrastre, haz clic para elegir uno o pega una imagen. También funcionan los archivos PNG y JPEG.
- Para crear un WebP a partir de otro formato, elige WebP en Convertir a y ajusta la Calidad.
- Si quieres, fija un Ancho máximo y compara después el tamaño original con el codificado.
- Copia o descarga el data URI, el Base64 puro, la etiqueta img de HTML, el background-image de CSS o el Markdown.
¿Qué es WebP?
WebP es un formato de imagen que Google lanzó en 2010. Ofrece compresión con pérdida basada en el códec de video VP8, un modo sin pérdida independiente, canal alfa y animación, todo en un mismo formato. El tipo MIME es image/webp y, como el archivo es un contenedor RIFF, la salida Base64 empieza por UklGR. Según Google, los archivos WebP sin pérdida ocupan alrededor de un 26 % menos que PNG, y los archivos con pérdida, entre un 25 y un 34 % menos que JPEG con una calidad comparable.
Por qué WebP encaja con los data URI
Base64 añade el mismo tercio a cualquier archivo, así que el origen más pequeño da la cadena más corta. Por eso WebP encaja de forma natural: un icono PNG transparente convertido a WebP conserva la transparencia y normalmente se reduce, y una foto JPEG ocupa menos con una calidad visual similar. Con ajustes de calidad muy altos, el archivo puede acabar siendo mayor que un original optimizado, así que comprueba el tamaño codificado antes de copiar.
Los archivos WebP animados conservan todos sus fotogramas si los codificas sin cambios. Al convertirlos o redimensionarlos se vuelve a renderizar un solo fotograma.
Compatibilidad con navegadores y clientes
Todos los navegadores principales actuales muestran WebP: Chrome, Edge, Firefox, Opera y Safari 14 o posterior. Solo los navegadores muy antiguos, como Internet Explorer, no lo admiten. Con el correo electrónico es distinto: varios clientes de correo de escritorio, entre ellos Outlook para Windows, no muestran WebP, así que usa PNG o JPEG en las plantillas de correo.
Crear data URI WebP en JavaScript
// Leer un archivo seleccionado por el usuario
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Volver a codificar un canvas como WebP con un 80 % de calidad
const uri = canvas.toDataURL('image/webp', 0.8);Si un navegador no puede codificar WebP, toDataURL recurre a PNG sin avisar, así que comprueba que el resultado empiece por data:image/webp.
Preguntas frecuentes
¿Puedo convertir PNG o JPEG a WebP en Base64 aquí?
Sí. Carga la imagen, elige WebP en Convertir a y ajusta la Calidad. La conversión usa el codificador integrado en tu navegador y el resultado se codifica como data:image/webp.
¿Base64 conserva la animación de WebP?
Sí, siempre que no elijas ninguna conversión ni fijes un ancho máximo. En ese caso, la cadena Base64 contiene el archivo exacto con todos sus fotogramas.
¿Todos los navegadores muestran imágenes data:image/webp?
Lo hacen todas las versiones actuales de Chrome, Edge, Firefox, Opera y Safari. Internet Explorer y las versiones de Safari anteriores a la 14 no.