Какие популярные форматы картинок используются для Web-верстки

«Какие популярные форматы картинок используются для Web-верстки» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

JPEG (JPG)
Лучше всего подходит для фотографий и изображений с большим количеством цветов. Поддерживает сжатие с потерями, что уменьшает размер файла, но может ухудшить качество.

PNG
Используется для изображений с прозрачностью (альфа-канал) и графики с четкими линиями (логотипы, иконки). Поддерживает сжатие без потерь, но файлы обычно больше, чем JPEG.

GIF
Подходит для простой анимации и изображений с ограниченной палитрой (до 256 цветов). Поддерживает прозрачность, но без полупрозрачных эффектов.

WebP
Современный формат, обеспечивающий лучшее сжатие, чем JPEG и PNG, с поддержкой прозрачности и анимации. Оптимален для веба, но требует проверки поддержки браузерами.

SVG
Векторный формат, идеален для логотипов, иконок и масштабируемой графики. Файлы маленькие, поддерживают анимацию и стилизацию через CSS.

Пример выбора:

<!-- Для фото -->
<img src="photo.jpg" alt="Photo">  

<!-- Для прозрачности -->
<img src="logo.png" alt="Logo">  

<!-- Для анимации -->
<img src="animation.gif" alt="Animation">  

<!-- Для масштабируемой графики -->
<img src="icon.svg" alt="Icon">