WebP, AVIF, JPG o PNG: cuál elegir
- WebP: la opción segura. Pesa entre un 25 % y un 35 % menos que un JPG de calidad parecida, admite transparencia y lo abren todos los navegadores actuales.
- AVIF: comprime todavía más, sobre todo en fotos, a costa de tardar más en codificarse. Todos los navegadores modernos lo muestran, pero no todos saben crearlo: si el tuyo no puede, la opción aparece desactivada.
- JPG: para cuando necesitas máxima compatibilidad, como en el correo o en programas antiguos. No tiene transparencia: las zonas transparentes salen en blanco.
- PNG: sin pérdida. Úsalo para capturas de pantalla, logotipos o imágenes con texto; para fotos pesa demasiado.
Qué calidad poner
Entre 75 y 85 es el punto dulce para fotos en la web: por encima, el archivo crece mucho y la diferencia apenas se nota. En AVIF se puede bajar más, hasta 60 o 65, con un resultado parecido. Fíjate en el porcentaje de ahorro y compara las miniaturas: si una imagen sale más grande que el original, es que ya estaba bien comprimida.
Reducir el tamaño ahorra todavía más que la calidad. Una foto de móvil tiene 4000 píxeles de ancho; para una web, 1600 o 2000 suelen sobrar. Escribe el ancho en «Ancho máximo» y las que sean más grandes se reducen manteniendo la proporción.
Sin subir nada
La mayoría de los conversores online suben tus imágenes a su servidor. Este no: la conversión la hace tu navegador
con la API canvas, y los archivos no salen de tu equipo. Funciona igual sin conexión una vez cargada la
página. La contrapartida es que el resultado depende del codificador de tu navegador, y que se pierden los metadatos
EXIF (fecha, cámara, ubicación), cosa que en una web suele ser una ventaja.
Servir varios formatos
Para dar AVIF a quien lo soporte y un JPG a los demás, usa <picture>. Las imágenes del
generador de ximg.es se pueden pedir en cualquiera de esos formatos cambiando la extensión, útil
para probar el marcado antes de tener las imágenes reales:
<picture>
<source srcset="https://ximg.es/1200x800.avif" type="image/avif">
<source srcset="https://ximg.es/1200x800.webp" type="image/webp">
<img src="https://ximg.es/1200x800.jpg" width="1200" height="800" alt="">
</picture>