Curso HTML 12.4 Formatos de imagen modernos (WebP, AVIF, etc. a nivel conceptual)

12.4 Formatos de imagen modernos (WebP, AVIF, etc.)

En el mundo web actual, optimizar el peso y la calidad de las imágenes es fundamental para mejorar tiempos de carga, experiencia de usuario y rendimiento SEO. A continuación se describen dos de los formatos más relevantes:

WebP

• Desarrollado por: Google.
• Tipos de compresión:
  • Lossy (con pérdidas) basado en el códec de vídeo VP8.
  • Lossless (sin pérdidas) con compresión basada en LZ77, Huffman y transformada entropía.
• Características clave:
  • Canal alfa (transparencia) tanto en modo lossless como en modo lossy.
  • Soporte de metadata (EXIF, XMP).
  • Compatibilidad amplia en navegadores: Chrome, Firefox, Edge, Opera (Safari desde 14.1 con ciertas limitaciones).
• Ventajas:
  • Hasta 30%–35% de reducción de tamaño respecto a JPEG con calidad visual similar.
  • Soporte de animaciones (equivalente a GIF, pero más eficiente).
• Limitaciones:
  • Decodificación en navegadores más vieja no siempre disponible.
  • Herramientas de conversión externas (cwebp) necesarias para flujos de trabajo.

AVIF

• Desarrollado por: Alliance for Open Media (AOMedia).
• Basado en: códec de vídeo AV1.
• Tipos de compresión:
  • Lossy con transformadas de vídeo avanzadas (bloques en 4×4 a 64×64, filtros de loop-restoration).
  • Lossless con codificación entropía y reuso de transformadas.
• Características clave:
  • Profundidades de color de 8, 10 y 12 bits (ideal para HDR).
  • Canal alfa de alta calidad.
  • Soporte de metadata y color con perfil ICC.
• Ventajas:
  • Mejores ratios de compresión que WebP (hasta 50% más pequeño para la misma calidad).
  • Excelente para imágenes con degradados suaves y alto rango dinámico.
• Limitaciones:
  • Soporte todavía en crecimiento; funciona en Chrome, Firefox y Opera recientes.
  • Codificación más lenta y consumo CPU mayor, tanto en servidor como cliente.

Comparativa simplificada

Implementación en HTML con <picture>

Para proporcionar imágenes modernas con fallback progresivo, se emplea la etiqueta <picture>. El navegador elige el primer formato que soporte.

Comentarios del código:

• Los srcset en cada <source> permiten servir variantes según densidad de pantalla o ancho de viewport.
• El atributo sizes informa al navegador del ancho aproximado en el diseño.
• El <img> dentro del <picture> actúa como fallback.
• Se recomienda loading='lazy' y decoding='async' para optimizar carga y pintado.

Herramientas de conversión

• cwebp (WebP):
  cwebp -q 80 input.jpg -o output.webp
• avifenc (libavif):
  avifenc --min 20 --max 40 input.png output.avif
• ImageMagick (soporta ambos):
  magick input.jpg output.webp
magick input.png output.avif

Buenas prácticas

• Generar variantes adaptativas (srcset) para diferentes resoluciones.
• Verificar soporte de formatos con Can I Use.
• Aplicar lazy loading y atributos de tamaño (width, height) para evitar saltos de diseño.
• Incluir metadata esencial (alt, title) y atributos ARIA si aplica.
• Controlar la calidad de compresión mediante pruebas visuales y herramientas de análisis de peso.

Con estos nuevos formatos y el uso adecuado de HTML5, conseguiremos páginas más ligeras, tiempos de carga mejorados y una experiencia de usuario óptima en dispositivos modernos.