PNG, JPG или SVG: в каком формате сохранять рисунок

Как работает сжатие

Формат файла — это способ упаковать изображение. Одни алгоритмы упаковывают аккуратно и возвращают всё обратно без изменений. Другие выбрасывают часть информации, чтобы файл весил меньше. Отсюда и растёт вся разница между расширениями.

Сжатие без потерь

Такой алгоритм ищет повторы и записывает их короче. Вместо «двести синих пикселей подряд» он пишет «синий, двести раз». Распаковка возвращает исходную картинку до последнего пикселя. По этому принципу работают PNG и WEBP в режиме без потерь — идеально для линий, плашек цвета и текста.

Сжатие с потерями и артефакты

Здесь алгоритм рассуждает иначе: он убирает детали, которые глаз почти не замечает. Картинка режется на блоки 8 × 8 пикселей, и внутри каждого блока мелкие перепады цвета усредняются. На фотографии это незаметно. А вот на резкой чёрной линии по белому фону вокруг контура появляется грязный ореол — это и есть артефакты сжатия.

PNG: прозрачность и чистые линии

PNG — рабочая лошадка цифрового художника. Он сжимает без потерь и умеет альфа-канал, то есть прозрачность.

Когда PNG обязателен

Есть задачи, где альтернатив просто нет:

• рисунок с прозрачным фоном — стикер, персонаж, иконка;
• лайн-арт и чистый контур без ореолов;
• пиксель-арт, где каждый пиксель должен остаться на месте;
• картинка с текстом или скриншот интерфейса;
• промежуточная версия, которую вы ещё будете дорабатывать.

Во всех этих случаях JPG заметно испортит края.

Почему файл большой

PNG не выбрасывает ничего, поэтому и весит больше. Особенно тяжело ему даётся живопись с миллионом плавных оттенков: повторов в такой картинке почти нет, и сжимать нечего. Холст 4000 × 4000 с мягкими градиентами легко даёт файл в десятки мегабайт. Уменьшить вес помогают два приёма: экспорт в PNG-8 для картинок с малым числом цветов и уменьшение размера до нужного экрану.

JPG: фотографии и живопись

JPG создан для изображений с плавными переходами. Там, где PNG раздувается, он выдаёт файл в разы легче при почти том же виде.

Качество 80–90%

Ползунок качества при экспорте — главный параметр JPG. Ориентируйтесь так: 90% практически не отличить от исходника, 80% даёт хороший баланс веса и вида, ниже 70% начинают вылезать блоки. Ставить 100% смысла мало — файл тяжелеет заметно, а разницы глазом не видно. И помните: прозрачность JPG не поддерживает вообще, любой прозрачный фон станет белым.

Почему нельзя пересохранять

Каждое сохранение в JPG — это новая порция потерь. Открыли файл, чуть подправили, сохранили снова — артефакты наложились на артефакты. После десятка таких циклов картинка заметно плывёт, а вернуть её невозможно. Правило простое: правьте всегда исходник со слоями, а JPG делайте одним финальным экспортом. Чек-лист безопасного сохранения собран в статье про то, как сохранить рисунок без потери качества.

WEBP и современные форматы

WEBP появился как замена сразу и PNG, и JPG. Он умеет оба типа сжатия и поддерживает прозрачность.

Меньше вес при том же качестве

При визуально одинаковой картинке WEBP обычно весит ощутимо меньше JPG. Для сайта это прямая выгода: страница грузится быстрее, а рисунок выглядит так же. Прозрачность работает как в PNG, но файл получается легче. Если вы выкладываете портфолио на свой сайт, WEBP — разумный выбор по умолчанию. Как собрать такую подборку работ, разобрано в материале про портфолио художника.

Поддержка браузерами

Все актуальные браузеры читают WEBP без проблем. Сложности начинаются за пределами веба: некоторые старые графические программы и часть типографий его не принимают. Поэтому держите на всякий случай копию в PNG или JPG. Формат AVIF сжимает ещё сильнее, но поддержка у него пока менее ровная, и как основной вариант его брать рано.

SVG: только для вектора

SVG стоит отдельно от остальных трёх. Он вообще не хранит пиксели — только описание линий, точек и заливок.

Логотипы и иконки

Файл SVG — это текст с координатами и командами вроде «провести кривую отсюда сюда». Браузер читает его и заново рисует картинку под нужный размер. Поэтому логотип остаётся идеально резким и на иконке 24 × 24, и на баннере во всю стену. Вес при этом крошечный, а цвет заливки можно поменять прямо в коде. Логику векторных кривых мы разбираем в статье про растровую и векторную графику.

Почему живопись в SVG не работает

Попробуйте описать формулами мазок текстурной кисти с сотней оттенков. Формально это возможно: программа превратит рисунок в десятки тысяч мелких фигур. На практике файл станет неподъёмным, браузер начнёт тормозить, а мягкие переходы всё равно превратятся в пятна. Растровую картинку внутрь SVG вставить можно, но она останется растром со всеми его ограничениями.

Шпаргалка по задачам

Держите короткий алгоритм выбора. Он закрывает почти все ситуации, с которыми вы столкнётесь.

Соцсети и портфолио

Порядок действий такой:

1. Сохраните исходник со слоями отдельно — это ваш рабочий файл.
2. Уменьшите копию до 2000 пикселей по длинной стороне.
3. Живопись и работы с градиентами экспортируйте в JPG на 90%.
4. Лайн-арт, пиксель-арт и всё с прозрачностью — в PNG.
5. Для своего сайта дополнительно сделайте версию в WEBP.

Соцсети всё равно пережмут картинку по-своему, но с хорошего исходника результат выйдет заметно чище.

Печать и стикеры

Для типографии готовьте PNG или TIFF без сжатия с потерями — JPG здесь сэкономит вес, но подарит артефакты на контурах. Стикеры и наклейки обязательно нужны в PNG с прозрачным фоном, иначе вокруг рисунка останется белая рамка. Логотипы и всё, что печатается в разных размерах, отдавайте в SVG. И проверьте разрешение до отправки: нужные цифры есть в материале про разрешение и DPI.

Пора рисовать, а не читать

Теория без практики выветривается за пару дней. Откройте редактор и потратьте 15 минут на то, о чём только что прочитали, — этого достаточно, чтобы навык закрепился.

Ключевые темы статьи

• png jpg svg разница
• в каком формате сохранять рисунок
• форматы изображений
• формат для печати
• прозрачный фон png

← Горячие клавиши для художника: 12 сочетаний, которые экономят часы Разрешение и DPI: какой размер холста выбрать для рисунка →