- Raster (Растровые):
- JPEG (.jpg, .jpeg): Хорош для фотографий, поддерживает сжатие с потерями. Не поддерживает прозрачность.
- PNG (.png): Поддерживает прозрачность (альфа-канал). PNG-8 для простых изображений с палитрой, PNG-24 для более качественных с полной цветовой гаммой. Сжатие без потерь.
- GIF (.gif): Поддерживает анимацию и прозрачность. Ограничен 256 цветами. Используется для простых анимаций и иконок.
- WebP (.webp): Разработан Google. Поддерживает сжатие с потерями и без потерь, анимацию и прозрачность. Обычно меньше по размеру при схожем качестве по сравнению с JPEG и PNG.
- Vector (Векторные):
- SVG (.svg): Масштабируется без потери качества. Отлично подходит для логотипов, иконок, графиков. Основан на XML.
| Формат | Тип | Прозрачность | Анимация | Сжатие | Лучшее применение |
|---|
| JPEG | Растровый | Нет | Нет | С потерями | Фотографии |
| PNG | Растровый | Да | Нет | Без потерь | Изображения с прзрачностью, графика |
| GIF | Растровый | Да (простая) | Да | Без потерь | Простые анимации, иконки |
| WebP | Растровый | Да | Да | С потерями/Без | Универсальный |
| SVG | Векторный | Да | Да (CSS/JS) | Без | Логотипы, иконки, графика |
Выбор формата зависит от типа изображения, требований к качеству, поддержке прозрачности и анимации, а также необходимого размера файла. Использование <picture> или атрибута srcset в теге <img> позволяет предлагать разные форматы (например, WebP и JPEG) в зависимости от поддержки браузера для оптимизации производительности.