Use the HTML '<'picture> element to serve modern formats with automatic fallback - browsers pick the first format they support:
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset para diferentes anchos de viewportloading="lazy" para imágenes debajo del plieguePara más información sobre optimización, consulta nuestra guía de Optimización de Imágenes.
AVIF ofrece la mejor compresión (20-50% mejor que WebP, 50-80% mejor que JPEG) pero tiene algo menos de soporte de navegadores. Usa el elemento '<'picture> con AVIF como fuente principal, WebP como respaldo y JPEG/PNG como respaldo final.
Usa PNG cuando necesites: (1) transparencia/canal alfa, (2) calidad sin pérdida para capturas de pantalla, (3) imágenes con bordes nítidos como logotipos. Usa JPEG para fotografías.
SVG es ideal para logotipos, iconos e ilustraciones: escalable infinitamente sin pérdida de calidad. Para iconos raster, usa WebP o PNG con transparencia.
Los estudios muestran que AVIF reduce los tamaños de archivo un 50-80% comparado con JPEG a calidad visual equivalente. Para una foto JPEG típica de 300KB, AVIF podría lograr la misma calidad en 60-150KB.