Sintaxis HTML para habilitar generación de imágenes en formato WebP

WebP es un formato de imagen más moderno y optimizado que PNG o JPG. Permite archivos más livianos sin perder calidad. Todo Developer querrá adoptarlo, pero ¿cuál es la manera correcta de implementarlo en el HTML?

Lo primero: WebP no funciona en todos los navegadores. Por eso, es necesario un "fallback" para garantizar compatibilidad total.
Existen básicamente dos maneras para implementar WebP:

1. El servidor detecta compatibilidad

Al recibir la solicitud del navegador, el servidor verifica si es compatible con WebP basado en los headers. Si es así, responde con todas las imágenes en formato WebP.

De esta forma, el HTML se mantiene simple con etiquetas IMG normales apuntando a las imágenes. Pero el servidor despacha la versión WebP o PNG/JPG según sea necesario.

2. El navegador decide qué imagen cargar

En este método se utiliza una sintaxis especial en HTML que incluye tanto la versión WebP como la alternativa PNG/JPG de cada imagen:

De esta manera, el navegador analiza y carga la versión que soporta. Si no es compatible con WebP, muestra la alternativa en PNG/JPG.

Aquí usamos una sintaxis especial en el HTML que incluye ambas versiones (WebP y JPG/PNG) de la imagen.

Queda así:

<picture>
 <source type="image/webp" srcset="/imagen.webp">
 <source type="image/jpeg" srcset="/imagen.jpg">
 <img src="/imagen.jpg"> 
</picture>

El navegador analiza y carga la versión soportada.Si no es compatible con WebP, mostrará el JPG / PNG.

¿Qué método es mejor ?

El primero es más simple de implementar, pero depende de configuraciones especiales en el servidor.

El segundo garantiza compatibilidad sin necesidad de cambios backend, pero requiere más código.

Ambos permiten entregar imágenes WebP a quien pueda aprovecharlas.Como desarrollador, elige la opción que mejor se ajuste a tus necesidades.

Y recuerda: ¡WebP está aquí para quedarse!Adóptelo para entregar imágenes optimizadas a sus usuarios.