🖼️ Imágenes WebP

WebP es un formato de imagen desarrollado por Google. Admite compresión con y sin pérdida y, a calidad comparable, resulta un 26% más pequeño que PNG y entre un 25% y un 34% más pequeño que JPEG. Su tipo MIME es image/webp y todos los navegadores actuales lo soportan.

Hay tamaños desde 10 KB hasta 100 MB, para confirmar el soporte del navegador, probar procesos de conversión a WebP y verificar componentes de optimización de imágenes.

Características de WebP

Modos con y sin pérdida, elegibles según el caso de uso
Admite transparencia y animación, cubriendo lo que PNG y GIF hacen por separado
Usa un contenedor RIFF, así que identificarlo solo por los primeros cuatro bytes puede confundirlo con otros formatos RIFF
Compilaciones antiguas de GD o ImageMagick en el servidor pueden no soportarlo

Para una comparación detallada de PNG, WebP y AVIF, consulta PNG vs WebP vs AVIF: comparación a fondo.

Referencias y artículos relacionados

📖 Dónde se suele tropezar

PNG, JPEG, GIF y WebP en tamanos de 1 KB a 100 MB, para limites de subida, generacion de miniaturas y ejercitar librerias de imagen. Lo que distingue a los formatos esta descrito arriba; lo que hace tropezar a una implementacion suele ser comun a todos.

Caso	Qué ocurre	Qué hacer
Una imagen pequena agota la memoria	La memoria depende del numero de pixeles decodificados, no del tamano del fichero. Un PNG de 20 KB a 10.000 por 10.000 pixeles pide unos 400 MB en RGBA.	Limita las dimensiones aparte de los bytes. Puedes leer ancho y alto de la cabecera antes de decodificar: `getimagesize()` en PHP, o en Pillow justo tras `Image.open()` y antes de `load()`.
Las fotos verticales se muestran tumbadas	La camara no rota los pixeles: anota en la etiqueta EXIF de orientacion como estaba sujeta. Cualquier cosa que ignore la etiqueta muestra la orientacion del sensor.	Lee la orientacion antes de generar la miniatura, aplica el giro de verdad y luego borra la etiqueta. Girar y dejar la etiqueta hace que los navegadores conformes giren otra vez. Inspecciona un fichero con el visor EXIF.
La conversion se lleva la animacion y la transparencia	Una conversion que pasa por un canvas del navegador solo sostiene un fotograma, asi que un GIF animado queda en el primero. Al convertir a JPEG, la transparencia se aplana a blanco o negro.	Para conservar la animacion necesitas algo que entienda varios fotogramas: ImageMagick o libvips en lugar de un canvas. Para conservar la transparencia, apunta a PNG o WebP.
Un archivo que parece imagen no lo es	La extension y el `Content-Type` son afirmaciones de quien envia. Una imagen con otros datos anadidos al final se abre con normalidad en un visor.	Comprueba los bytes iniciales y luego recodifica antes de guardar. Decodificar y volver a escribir descarta tanto los datos anadidos como los metadatos incrustados. Las secuencias estan en la referencia de magic bytes.

Al servir imagenes subidas por usuarios tal cual, hay una excepcion que importa: un SVG no es una imagen en el sentido relevante. Es un documento capaz de ejecutar script, asi que servirlo desde tu propio origen abre una via de cross-site scripting. Sirvelo desde otro dominio o contenlo con Content-Security-Policy y Content-Disposition: attachment.