Qué aporta WebP a un sitio web
Google lanzó WebP en 2010 como sustituto de JPG, PNG y GIF pensado para la web. Su modo con pérdida se basa en la codificación intrafotograma del códec de vídeo VP8: predice cada bloque de píxeles a partir de sus vecinos y guarda solo la diferencia, lo que es más eficiente que los bloques fijos de 8×8 de JPG. Con la misma calidad visual, una foto suele ocupar entre una cuarta y una tercera parte menos.
En una sola imagen ese ahorro parece modesto. En una página se acumula: un listado de productos con 40 fotos de 200 KB cada una se aligera unos 2–3 MB tras la conversión. Las imágenes más pequeñas llegan antes a la pantalla, lo que mejora el Largest Contentful Paint, la métrica de carga que usan los buscadores, y reduce el consumo de datos móviles de los visitantes.
Todos los navegadores actuales muestran WebP, y la mayoría de los gestores de contenido lo aceptan al subir archivos, incluido WordPress desde la versión 5.8 y las principales plataformas de tiendas online. Para un sitio creado en los últimos años, rara vez hay motivo para seguir sirviendo JPG sin más.
Cuándo es mejor quedarse con el JPG
WebP es un formato de entrega, no de archivo. Guarda tus originales en JPG (o mejor aún, los originales de la cámara) y convierte copias para publicar. Quédate con JPG cuando:
- El archivo va a imprenta, a un laboratorio fotográfico o a un cliente que lo abrirá con software de escritorio antiguo.
- Es un adjunto de correo para personas cuyas aplicaciones de correo no conoces.
- Vas a volver a editar la imagen más adelante. Cada guardado con pérdida cuesta algo de detalle, y las herramientas de edición tratan JPG de forma más uniforme.
Si alguien te devuelve un WebP y no puede abrirlo, WebP a JPG deshace el proceso.
Cómo trata tus archivos este conversor
Tu navegador decodifica la imagen, la dibuja en un canvas a su tamaño original y la codifica como WebP con el codificador integrado del navegador, en un worker en segundo plano cuando está disponible. Los archivos se quedan en tu dispositivo.
Se aceptan tanto JPG como PNG. La entrada PNG es útil para capturas de pantalla y gráficos con transparencia: el canal alfa se conserva, así que una foto de producto recortada sigue quedando limpia sobre cualquier fondo. JPG no tiene transparencia, así que una entrada JPG da un WebP opaco.
Las dimensiones en píxeles no cambian. El propio formato WebP está limitado a 16383 px por lado, así que las panorámicas muy grandes hay que reducirlas antes de convertir. Los metadatos, como los datos EXIF de la cámara y la ubicación GPS, no se copian al resultado, que normalmente es lo que quieres con las imágenes que se publican en internet.
Ajustes de calidad que funcionan
El control deslizante va del 10% al 100% y empieza en el 85%. La escala de calidad de WebP no es la misma que la de JPG, así que no copies sin más el número que usabas para JPG. Algunos puntos de referencia:
- 80–85% para fotos en páginas de contenido. Es el rango en el que WebP consigue la mayor parte de su ahorro sin cambios visibles al tamaño de visualización normal.
- 70–75% para miniaturas, cuadrículas de listados e imágenes de fondo en las que la imagen es pequeña o queda en parte tapada por texto.
- 90–95% para imágenes de cabecera en pantallas grandes y capturas con texto fino. El WebP con pérdida guarda el color a la mitad de resolución, así que las líneas finas de color y el texto rojo sobre fondo oscuro pueden verse algo blandos con ajustes más bajos.
Evita el 100% en las fotos. Produce un archivo que a menudo es más grande que el JPG de partida, sin ninguna mejora visible, porque se conservan con todo detalle los propios artefactos de compresión del JPG.
Sacar el máximo partido a la conversión
Un JPG que ya se ha comprimido mucho no se reducirá demasiado más. Convertir un JPG de 60 KB guardado con calidad 60 puede dar solo unos pocos puntos porcentuales, y la segunda ronda de compresión con pérdida puede hacer más visibles los bloques. Las mayores ganancias salen de originales de alta calidad.
El orden de los pasos importa más que el valor exacto de calidad:
- Parte de la versión más grande y de mejor calidad que tengas.
- Redimensiona al tamaño al que la página la muestra realmente, por ejemplo 1600 px de ancho para una imagen a ancho completo o 600 px para una tarjeta.
- Convierte a WebP al 80–85% y compara los tamaños de antes y después que aparecen para cada archivo.
Se admiten lotes, con un límite de 50 MB por archivo. Todos los archivos de un lote usan la misma calidad, así que si mezclas fotos y capturas de pantalla, conviértelas en dos tandas con ajustes adecuados para cada una.