В интернете используются различные графические форматы, каждый из которых подходит для определённых задач. Основные из них:
Растровые форматы (состоят из пикселей)
JPEG/JPG
— назначение: фотографии, изображения с градиентами;
— особенности: сжатие с потерями, малый размер файла. Не поддерживает прозрачность.
PNG
— назначение: изображения с прозрачностью, логотипы, графика с чёткими линиями;
— особенности: сжатие без потерь. PNG-24 (миллионы цветов) и PNG-8 (256 цветов).
GIF
— назначение: простые анимации, изображения с ограниченной палитрой;
— особенности: до 256 цветов, поддерживает прозрачность и анимацию.
WebP
— назначение: универсальная замена JPEG/PNG;
— особенности: сжатие с потерями и без, малый размер. Поддержка прозрачности и анимации.
APNG
— назначение: анимированные изображения с прозрачностью;
— особенности: альтернатива GIF с большей глубиной цвета.
AVIF
— назначение: современный формат для высокого качества и сжатия;
— особенности: поддержка HDR, малый размер. Меньшая поддержка браузерами.
ICO
— назначение: фавиконки (иконки сайтов);
— особенности: может содержать несколько размеров в одном файле.
Векторные форматы (масштабируются без потери качества)
SVG
— назначение: логотипы, иконки, графика;
— особенности: XML-формат, поддерживает анимацию и интерактивность.
Другие форматы (менее распространённые или устаревшие)
— BMP: большой размер, почти не используется в вебе;
— TIFF: для полиграфии, не подходит для интернета;
— HEIF/HEIC: популярен в iOS, но слабая поддержка браузерами.
Критерии выбора графического формата
— качество vs размер: JPEG/WebP для фото, PNG/SVG для графики;
— прозрачность: PNG, WebP, GIF, SVG;
— анимация: GIF, WebP, APNG;
— масштабируемость: SVG для векторных элементов;
— поддержка браузерами: проверять через Can I Use (например, WebP поддерживается в 97% браузеров, AVIF — 85%).
Оптимизация изображений (сжатие, выбор формата, адаптивная загрузка) критична для скорости сайта и SEO. Используйте инструменты вроде Squoosh, ImageMagick или онлайн-конвертеры для подготовки изображений.