Полное руководство по форматам изображений: PNG, JPG, WebP, AVIF и SVG

JPG / JPEG  Joint Photographic Experts Group

Созданный в 1992 году Joint Photographic Experts Group, JPG был разработан специально для эффективного сжатия фотографий. Его алгоритм делит изображение на блоки 8×8 пикселей и применяет дискретное косинусное преобразование (DCT) для представления каждого блока как комбинации частот — отбрасывая высокочастотные детали, которые человеческий глаз замечает меньше. Результат — сжатие с потерями: часть исходных данных отбрасывается безвозвратно.

Почему так хорошо работает для фото: фотографии имеют плавные постепенные переходы цвета — именно тот тип информации, который JPG сжимает эффективнее всего. Фото пейзажа в JPG с качеством 80% может быть в 10 раз меньше того же файла без сжатия, с незаметной визуальной разницей на экране.

Где подводит: алгоритм блоков 8×8 создаёт заметные артефакты на резких краях, тексте и областях однородного цвета. Чёрный логотип на белом фоне в JPG покажет серые пятна вокруг букв — знаменитые «артефакты JPEG». JPG также не поддерживает альфа-канал (прозрачность).

Когда использовать: фотографии для веба, печати и электронной почты. Фото товаров, баннеры, изображения для блога. Любое изображение с множеством цветовых переходов и без необходимости прозрачности.

Когда не использовать: логотипы, иконки, скриншоты с текстом, изображения с прозрачным фоном, иллюстрации с резкими краями, изображения, которые будут многократно редактироваться и пересохраняться.

PNG  Portable Network Graphics

Созданный в 1996 году как альтернатива GIF (у которого были патентные ограничения), PNG использует сжатие без потерь — ни один бит данных не отбрасывается. Алгоритм DEFLATE (сочетание LZ77 и кодирования Хаффмана) переупорядочивает данные пикселей более эффективно, ничего не выбрасывая. Это гарантирует, что распакованное изображение будет пиксель-в-пиксель идентично оригиналу, независимо от того, сколько раз файл сохранён.

Альфа-канал: PNG поддерживает четвёртый канал на пиксель помимо RGB — альфа-канал, который контролирует непрозрачность от 0 (полностью прозрачный) до 255 (полностью непрозрачный). Это позволяет полную прозрачность, полупрозрачность и мягкое сглаживание краёв на любом фоне.

PNG-8 против PNG-24 против PNG-32: PNG-8 использует палитру до 256 цветов (как GIF), идеален для простых иконок и изображений с небольшим числом цветов. PNG-24 использует полный цвет (16 миллионов) без прозрачности. PNG-32 использует полный цвет с альфа-каналом — это самый распространённый тип, когда говорят о «прозрачном PNG».

Где подводит: для фотографий PNG неэффективен — файлы фото в PNG могут быть в 3–10 раз больше эквивалента в JPG. Сжатие без потерь не может эффективно устранить перепады цвета фотографий.

Когда использовать: логотипы и иконки с прозрачным фоном, скриншоты с текстом, инфографика, изображения с областями однородного цвета, цифровое искусство с резкими краями, изображения, которым нужно многократное редактирование без накопления потерь.

Когда не использовать: фотографии для веба (используйте JPG или WebP), изображения, которым нужны маленькие файлы, email-маркетинг, где JPG имеет лучшую совместимость.

WebP  Web Picture format

Разработанный Google на основе видеокодека VP8, WebP был выпущен в 2010 году как универсальный преемник JPG и PNG в вебе. Он поддерживает оба режима: lossy (на основе VP8, для фото) и lossless (на основе собственного алгоритма, для графики). В режиме lossy WebP использует предсказание блоков и адаптивное преобразование — техники более сложные, чем DCT в JPG, — для получения файлов на 25–35% меньше с эквивалентным визуальным качеством.

Лучшее из двух миров: помимо замены JPG для фото (режим lossy), WebP также заменяет PNG для логотипов и графики (режим lossless с альфа-каналом), обычно с файлами на 20–30% меньше. Это единственный формат, объединяющий случаи использования JPG и PNG с лучшей эффективностью в обоих.

Совместимость в 2026: поддерживается Chrome, Firefox, Safari (с версии 14), Edge и Opera — охватывая более 97% пользователей веба. Главное исключение — старые почтовые клиенты (особенно Outlook) и устаревшие корпоративные системы с IE11.

Когда использовать: практически любое изображение для веба — фото, логотипы, иконки, баннеры. Это стандартный рекомендуемый формат для любой загрузки на современные сайты. Google PageSpeed Insights специально рекомендует WebP, когда обнаруживает JPG или PNG там, где мог бы использоваться WebP.

Когда не использовать: email-маркетинг (непоследовательная совместимость), полиграфическая печать, превью YouTube (не принимает WebP), файлы для скачивания, которые конечные пользователи откроют локально в старых системах.

AVIF  AV1 Image File Format

AVIF происходит от видеокодека AV1 (разработанного Alliance for Open Media, в которую входят Google, Mozilla, Netflix, Amazon и другие). Это самый новый и технически продвинутый формат, доступный для изображений в вебе — создаёт файлы на 20–50% меньше, чем WebP, с эквивалентным визуальным качеством во многих случаях, особенно при более низком качестве, где WebP начинает заметно показывать артефакты.

Почему так эффективен: AV1 использует гораздо более сложные техники сжатия, чем VP8 в WebP — включая режимы внутрикадрового предсказания, преобразования переменного размера и loop filters. Результат особенно впечатляет на сложных фото и тонких градиентах.

Проблема кодирования: конвертация изображений в AVIF значительно медленнее, чем в WebP — кодировщик AVIF может занимать в 10–100 раз больше времени для обработки того же изображения. Для сайтов с множеством изображений или пайплайнов сборки, генерирующих версии изображений в реальном времени, эта вычислительная стоимость существенна.

Совместимость в 2026: Chrome 85+, Firefox 93+, Safari 16+. Не поддерживается IE11 и большинством почтовых клиентов. Поддержка всё ещё ниже, чем у WebP, рекомендация — отдавать AVIF с резервным вариантом WebP и JPG через тег <picture>.

Когда использовать: сайты с высоким трафиком, где каждый сэкономленный КБ значимо влияет на стоимость трафика; изображения высокого качества, где визуальная разница с WebP заметна; новые проекты, где пайплайн сборки уже поддерживает AVIF.

Когда не использовать: когда время кодирования критично; для использования в конвертере ImageTools (кодировщик AVIF через Canvas API в браузерах не оптимизирован и может создавать файлы больше оригинала — используйте серверные инструменты вроде sharp для качественного AVIF).

SVG  Scalable Vector Graphics

SVG радикально отличается от всех остальных форматов в этом списке. Вместо хранения пикселей он хранит математические инструкции в XML — «нарисуй прямоугольник шириной 200 в позиции X,Y цветом #3ecf8e». Браузер или программа вычисляет пиксели в реальном времени в нужном разрешении. SVG весом 5 КБ можно идеально отобразить на фавиконе 16px или на биллборде 20 метров.

Почему это идеальный формат для логотипов и иконок: логотипы и иконки состоят из геометрических форм — прямоугольников, кругов, кривых Безье, текста. SVG описывает именно эти формы без какой-либо потери информации. PNG логотипа в 200px станет пикселизированным при 2000px; тот же логотип в SVG останется идеальным в любом размере.

Редактируется через CSS и JavaScript: инлайн-элементы SVG в HTML можно управлять как любым другим элементом DOM — менять цвет через CSS, добавлять анимацию через CSS transitions или JS, делать интерактивным через события мыши. Это как HTML для изображений.

Где подводит: фотографии и изображения со множеством цветов и сложными градиентами дают огромные и непрактичные SVG — и даже тогда качество было бы хуже, чем у JPG, потому что SVG не был разработан для представления фотографических данных.

Когда использовать: логотипы, иконки, геометрические иллюстрации, графики данных, карты, любое искусство, которому нужно масштабироваться под разные размеры, интерактивные иконки в веб-интерфейсах.

Когда не использовать: фотографии, изображения со множеством цветов и текстур, соцсети ( большинство не принимает SVG для загрузки), email-маркетинг.

GIF  Graphics Interchange Format

Созданный в 1987 году CompuServe, GIF использует алгоритм LZW (Lempel-Ziv-Welch) для сжатия без потерь — но с фундаментальным ограничением: поддерживает только 256 цветов на кадр. Каждый пиксель — это индекс в палитре до 256 записей, что делает формат неэффективным для фото (с миллионами цветов), но подходящим для простых изображений с небольшим числом цветов.

Причина, по которой GIF выжил до сегодняшнего дня: это единственный широко совместимый растровый формат, нативно поддерживающий многокадровую анимацию — эта особенность сохранила его живым спустя десятилетия после появления технически превосходящих форматов. Анимированный WebP и анимированный AVIF — более эффективные альтернативы, но совместимость и культурное присутствие анимированного GIF гарантируют его сохранение.

Частичная прозрачность: GIF поддерживает только один «прозрачный» цвет на кадр — без полупрозрачности или сглаживания. Результат — «зубчатые» края вокруг элементов с изогнутыми краями, особенно на цветных фонах.

Когда использовать: простые анимации на платформах, не поддерживающих анимированный WebP или MP4; анимированные иконки с небольшим числом цветов; мемы и контент соцсетей, где формат GIF культурно ожидаем.

Когда не использовать: статичные фото (используйте JPG или WebP), статичные логотипы (используйте PNG или SVG), сложные анимации для веба (используйте MP4 или анимированный WebP — они гораздо эффективнее).

BMP  Bitmap

BMP — растровый формат Windows, созданный Microsoft. В большинстве настроек не применяет сжатие — каждый пиксель хранится напрямую со своим значением цвета. Результат — очень большие файлы: изображение 1920×1080 в 24-битном BMP занимает ровно 5,93 МБ, всегда, независимо от содержимого.

Почему всё ещё существует: BMP имеет гарантированную совместимость во всей экосистеме Microsoft — Windows, Office, принтерах и устаревшем редакторском ПО. Для внутреннего использования в пайплайнах обработки изображений, где отсутствие сжатия — преимущество (гарантия данных без артефактов на каждом этапе), BMP всё ещё находит применение.

Когда использовать: когда конкретная (особенно устаревшая) система требует BMP; как промежуточный формат в пайплайнах обработки, где сжатие внесло бы нежелательные артефакты; промышленная печать в некоторых специфических системах.

Когда не использовать: любое использование в вебе, электронной почте, соцсетях или любом контексте, где важен размер файла.