Форма загрузки упирается: «файл больше 2 МБ». Скриншот таблицы, который вы отправили коллеге, выглядит так, будто его сняли через мутное стекло. Фотография кота весит 9 МБ, хотя нужна была картинка на аватарку. Все три истории — про одно: формат подобрали не глядя.
Разница между JPEG, PNG и WebP не в том, какой «лучше», а в том, какие именно данные каждый из них выбрасывает ради веса. Разобравшись в этом один раз, вы перестанете гадать; а чтобы прямо сейчас уложиться в лимит, достаточно сжать изображение прямо в браузере и сравнить результат с оригиналом.
Почему скриншот в JPEG мылит, а фото в PNG раздувается
JPEG сжимает с потерями и делает это хитро: он разбивает картинку на блоки и выкидывает мелкие детали, которые глаз всё равно плохо различает на плавных переходах. На фотографии — небо, кожа, листва — это работает отлично. Но у скриншота нет плавных переходов: там резкая граница между чёрной буквой и белым фоном, и алгоритм честно превращает её в кашу из сероватых точек. Отсюда знакомая грязь вокруг текста и «ореолы» у линий интерфейса.
PNG действует наоборот: он сжимает без потерь, ища повторяющиеся ряды одинаковых пикселей. У скриншота таких рядов миллионы — сплошные заливки, ровные панели, — поэтому PNG ужимает его прекрасно. У фотографии соседние пиксели почти никогда не совпадают, повторов нет, сжимать нечего, и файл получается в пять-десять раз тяжелее того же кадра в JPEG при неотличимой на глаз картинке.
Отсюда базовое правило, которое закрывает девять случаев из десяти: фотография — JPEG или WebP, всё нарисованное — PNG или WebP.
JPEG: формат для фотографий
JPEG остаётся самым совместимым форматом на планете: его открывает буквально всё, от старого телевизора до типографского софта и приёмных форм госуслуг. Если файл уйдёт неизвестно куда и его должны открыть без вопросов, JPEG — безопасный выбор.
- Силён: фотографии, кадры с камеры, сложные текстуры, любые изображения с плавными градиентами.
- Слаб: текст, скриншоты, логотипы, схемы, иллюстрации с крупными плоскими заливками.
- Не умеет: прозрачность. Прозрачные области при сохранении зальются белым или чёрным — сюрприз, который обнаруживается уже на сайте.
- Накапливает потери: каждое пересохранение отъедает качество заново. Открыли, чуть обрезали, сохранили — картинка стала хуже, даже если вы ничего не меняли.
PNG: резкие края, текст и прозрачность
PNG — формат без потерь. Что записали, то и достанете, сколько бы раз ни пересохраняли. Плюс полноценный альфа-канал: прозрачность с плавными полупрозрачными краями, а не грубая дырка, как в старом GIF.
- Силён: скриншоты, интерфейсы, логотипы, иконки, схемы, диаграммы, картинки с текстом.
- Незаменим: когда нужна прозрачность — логотип поверх цветного фона, водяной знак, элемент интерфейса.
- Слаб: фотографии. Тот же кадр окажется в разы тяжелее, чем в JPEG, без единого видимого преимущества.
Отдельный приём, о котором мало кто помнит: PNG бывает 8-битным, с палитрой до 256 цветов. Для иконки, логотипа или простой схемы этого хватает с запасом, а файл ужимается в разы по сравнению с 24-битным. Прозрачность при этом сохраняется. Если в картинке десяток цветов, держать её в полноцветном PNG просто расточительно.
WebP: то же качество, но легче на четверть-треть
WebP умеет и то, и другое: сжатие с потерями, как у JPEG, и без потерь, как у PNG, плюс прозрачность в обоих режимах и даже анимацию. При сопоставимом качестве он обычно даёт файл на 25–35 % легче JPEG, а на графике с плоскими заливками выигрыш бывает и вдвое больше.
Поддержка давно перестала быть проблемой: все актуальные браузеры — Chrome, Firefox, Safari, Edge — показывают WebP без плясок, Windows и macOS открывают такие файлы штатным просмотрщиком, крупные соцсети и маркетплейсы принимают их при загрузке. Осторожность нужна там, где софт старый или консервативный: корпоративные системы документооборота, часть офисных редакторов прошлых версий, типографии, некоторые старые Android-приложения и госпорталы, которые прямым текстом просят JPEG или PNG. Правило простое: для своего сайта — WebP, для отправки в неизвестность — JPEG или PNG.
- Нужна прозрачность и хочется лёгкости — WebP с потерями, он умеет альфа-канал, в отличие от JPEG.
- Нужна анимация — WebP вместо GIF: цветов больше, вес в разы меньше.
- Файл поедет к подрядчику или в печать — не рискуйте, отдавайте JPEG или PNG.
Что на самом деле означает «качество 80»
Ползунок качества — не проценты сохранённой картинки. Это настройка агрессивности, с которой кодек огрубляет мелкие детали, и шкала у каждого кодировщика своя: «80» в двух разных программах даст разный вес и разную картинку.
Практическая шкала для фотографий выглядит так. В районе 90–95 разница с оригиналом не видна даже при увеличении, но и вес почти не падает. Диапазон 75–85 — рабочая зона: на глаз всё то же самое, файл легче в несколько раз. Ниже 60 начинают лезть блоки и разводы в небе и на однотонных участках, ещё ниже — картинка рассыпается. Мелкое превью переживёт и 50, крупная фотография на всю ширину экрана — нет.
Два правила экономят больше, чем любой ползунок. Первое: сначала уменьшите размер в пикселях. Снимок 4000 пикселей по ширине, который будет показан в блоке шириной 800, содержит впятеро больше данных, чем нужно, и никакое сжатие этого не исправит. Второе: сжимайте всегда из оригинала, а не из уже сжатой копии — иначе потери складываются. Подробнее приёмы разобраны в отдельном материале о сжатии изображений без видимой потери качества.
Как уложиться в лимит и что выбрать для аватарки
Когда форма требует «не больше 2 МБ», действуйте по порядку, а не хватайтесь сразу за качество.
- Уменьшите пиксели. Для документа или анкеты хватает 1500–2000 пикселей по длинной стороне.
- Проверьте формат. Фото в PNG — почти всегда ошибка; переведите в JPEG и удивитесь цифре.
- Сожмите с качеством около 80 и посмотрите результат в полном размере, а не в превью.
- Если лимит совсем жёсткий и площадка принимает WebP — берите его, это самый дешёвый способ выиграть ещё треть веса.
С аватаркой всё проще, чем кажется. Аватар показывается маленьким кружком, поэтому 400×400 или 512×512 пикселей достаточно с запасом. Фотографию лица сохраняйте в JPEG с качеством 80–85, нарисованный или буквенный аватар — в PNG, там резкие края и часто нужна прозрачность. Если исходной фотографии нет или не хочется показывать лицо, можно собрать аккуратный аватар из инициалов за минуту; про варианты без фото есть отдельный разбор. И помните: многие сервисы всё равно пережмут загруженное по-своему, так что заливать туда 8-мегабайтный оригинал бессмысленно.
Частые вопросы
Что лучше для скриншота — PNG или JPEG?
PNG, без вариантов. У скриншота резкие границы букв и линий, а JPEG именно на них и мылит, оставляя вокруг текста серую грязь. WebP без потерь тоже подойдёт и будет легче.
Можно ли вернуть качество, если фотография уже пересохранена в JPEG?
Нет. Потерянные при сжатии детали не восстанавливаются, их просто нет в файле. Поэтому оригиналы стоит хранить отдельно и сжимать всегда из них.
Все ли сайты принимают WebP?
Почти все современные — да, браузеры и обе десктопные системы показывают его штатно. Но старые корпоративные системы, часть офисных программ и типографии по-прежнему просят JPEG или PNG, так что для отправки вовне надёжнее классика.
Какой формат выбрать для логотипа?
PNG, если нужна прозрачность и растр; WebP без потерь, если площадка его принимает и важен вес. Для сайта идеален SVG, но он подходит только векторным логотипам, а не растровым картинкам.
Сколько должна весить фотография для сайта?
Ориентируйтесь на 100–300 КБ для крупной картинки в статье и 20–60 КБ для превью. Если получается заметно больше, дело обычно не в качестве, а в лишних пикселях по ширине.
Проверьте это на своей картинке — сожмите её и сравните вес с оригиналом, разница обычно оказывается больше, чем ожидаешь.
