В интернете используются различные графические форматы, каждый из которых подходит для определённых задач. Основные из них:
Растровые форматы (состоят из пикселей)
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 или онлайн-конвертеры для подготовки изображений.