Используйте HTML-элемент '<'picture> для подачи современных форматов с автоматическим запасным вариантом — браузеры выбирают первый поддерживаемый формат:
<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="Описание" loading="lazy">
</picture>
srcset для разных ширин экранаloading="lazy" для изображений ниже первого экранаПодробнее об оптимизации читайте в нашем руководстве по оптимизации изображений.
AVIF обеспечивает наилучшее сжатие (на 20-50% лучше WebP, на 50-80% лучше JPEG), но имеет несколько меньшую поддержку браузеров, чем WebP. WebP поддерживается всеми современными браузерами (95%+ по всему миру). Используйте элемент '<'picture> с AVIF в качестве основного источника, WebP в качестве запасного и JPEG/PNG в качестве финального запасного.
Используйте PNG, когда нужно: (1) прозрачность/альфа-канал, (2) без потерь для скриншотов или изображений с текстом, (3) изображения с чёткими краями, как логотипы или диаграммы. JPEG — для фотографий, где некоторые цветовые данные могут быть утеряны.
SVG идеален для логотипов, иконок и иллюстраций. Векторный формат означает чёткость при любом разрешении и малый размер файла. Если SVG невозможен, используйте WebP или PNG с прозрачностью.
Используйте элемент <picture>: сначала <source type='image/avif'>, затем WebP и, наконец, JPEG/PNG как элемент <img>. Браузеры автоматически выбирают поддерживаемый формат.