Форматы изображений на сайте: обзор и сравнение

Форматы изображений на сайте

Графический формат файла — метод записи данных о цифровой картинки. Бывают растровые и векторные. Качество и вес одного и того же изображения в разных форматах может существенно отличаться. Растровые — состоят из цветных точек (пикселей) в виде графической матрицы, векторные представлены геометрическими объектами (точки, линии, кривые, круги, многоугольники) и их математическими описаниями (координаты центра, радиус, цвет и толщина контура и т.д.)

Растровые форматы

JPEG (Joint Photographic Experts Group) — самый популярный формат многоцветных фото и картинок. Опубликован в 1992 году, основные расширения — .jpg, и .jpeg. Отличается возможностью сильного сжатия изображений с разной потерей качества. Не подходит для иконок, чертежей, схем с резким контрастом между соседними пикселями.

GIF (Graphics Interchange Format) — формат, наиболее подходящий для изображений из не более 256 цветов, расширение — .gif. Разработан в 1987 году. Сохраняет качества без потерь при уменьшении размера для указанной ограниченной палитры цветов, поддерживает прозрачные пиксели и анимацию. Анимированные изображения состоят из набора статичных кадров и данных о времени их показа.

PNG (Portable Network Graphics) — предложен в 1995 году, как замена формата GIF с прозрачностью и неограниченным количеством цветов, расширение — .png. Сжатие PNG-графики совершенно не ухудшает качество, в отличие от JPEG. Поддерживает полутоновые, полноцветные и индексированные изображения и позиционируется именно для использования на сайтах.

WebP — современный формат сжатия веб-графики с расширением .webp, в том числе прозрачной, с потерями качества лучше, чем JPEG и без — лучше, чем PNG. Разработан в 2010 году компаний Google. Поддерживается браузером Chrome и последними версиями Opera, Firefox и Edge. В основе формата — алгоритм сжатия ключевых статичных кадров.

Векторный формат

SVG (Scalable Vector Graphics) создан в 1999 году. Используется как для статичной, так и анимированной двухмерной графики: схем, иконок и логотипов. Достоинства: масштабируемость без потери качества, возможность редактирования, интеграция и совместимость с HTML и CSS. Недостаток: увеличение размера файла при большом количестве мелких деталей в изображении.

Параметры сравнения Полноцветность Прозрачность Анимация
JPEG Плюс Минус Минус
GIF Минус Плюс Плюс
PNG Плюс Плюс Минус
WebP Плюс Плюс Минус
SVG Плюс Минус Плюс Плюс

Заинтересовали наши услуги? Вы можете связаться с нами, и мы с удовольствием ответим на ваши вопросы.

Заявка на проект