Какие форматы изображений существуют (JPG, PNG, WebP)? Как браузер выбирает, какой формат использовать?

Основные форматы изображений

JPEG — формат с потерями, идеален для фотографий и сложных изображений с плавными переходами цветов. Он обеспечивает хорошее сжатие, но не поддерживает прозрачность. PNG — формат без потерь, поддерживает прозрачность, подходит для логотипов, иконок и изображений с резкими краями. WebP — современный формат от Google, поддерживает как сжатие с потерями, так и без потерь, а также прозрачность. Он обычно даёт меньший размер файла при том же качестве по сравнению с JPEG и PNG.

Как браузер выбирает формат

Браузер не выбирает формат напрямую — он либо получает изображение по ссылке, либо сервер решает, какой формат отдать, основываясь на заголовке Accept, который браузер отправляет в HTTP-запросе. Например, современные браузеры указывают image/webp в этом заголовке, и сервер может отдать WebP-версию. Для статичных сайтов чаще используют тег <picture> с несколькими источниками:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Описание">
</picture>

Браузер выбирает первый поддерживаемый <source>, а если ни один не подходит, использует <img> как запасной вариант. Это позволяет использовать WebP для современных браузеров и JPEG для старых.

Практическое применение

Для веб-разработки важно оптимизировать изображения: использовать WebP для большинства случаев, JPEG для фотографий без прозрачности, PNG для графики с прозрачностью. Также можно использовать атрибут loading="lazy" для отложенной загрузки и srcset для адаптивных размеров.

Вывод: Понимание форматов и механизма выбора помогает создавать быстрые и эффективные сайты, экономя трафик и улучшая пользовательский опыт.