JPG или PNG
Короткий ответ: фотографии — в JPG, скриншоты, схемы и всё с текстом — в PNG. Дальше о том, откуда это правило берётся.
| JPG | PNG | |
|---|---|---|
| Сжатие | с потерями | без потерь |
| Прозрачность | нет | есть |
| Фотография 1920 × 1080 | 200–400 КБ | 2–5 МБ |
| Скриншот с текстом | ореол вокруг букв | чёткие границы |
| Пересохранение | качество падает каждый раз | файл не меняется |
| Цвета | 16,7 млн | 16,7 млн плюс прозрачность |
Почему фотография в PNG такая тяжёлая
PNG сжимает без потерь: он ищет в картинке повторы и записывает их короче. На однотонных заливках и ровных линиях повторов много, и файл выходит крошечным.
В фотографии повторов нет вообще. Соседние пиксели неба отличаются друг от друга на единицы — это шум матрицы, и сжимать его нечем. Поэтому один и тот же кадр весит 300 КБ в JPG и 4 МБ в PNG, выглядя при этом одинаково.
Почему скриншот в JPG выглядит плохо
JPG работает квадратами 8 × 8 и огрубляет мелкие детали. Резкая граница чёрной буквы на белом фоне для него — как раз мелкая деталь, которую он огрубляет в первую очередь.
Получается ореол: вокруг текста появляется серая муть, тонкие линии интерфейса становятся неровными. На фотографии этого не видно, на скриншоте видно сразу.
Прозрачность
Она есть только у PNG. Логотип, иконка, картинка, которую нужно положить на цветной фон, — всё это PNG.
При переводе в JPG прозрачные места чем-то закрасятся: по умолчанию белым. Если фон страницы не белый, вокруг логотипа получится белая рамка.
Что делать на практике
Снимок с камеры или телефона — JPG. Если исходник пришёл в PNG (так часто сохраняют фото мессенджеры и редакторы), переведите его: вес упадёт в разы, разницу вы не увидите.
Скриншот, схема, чертёж, картинка с текстом — PNG. Он и легче окажется, и чётче.
PNG слишком тяжёлый, а прозрачность не нужна? Иногда помогает уменьшить количество цветов или просто размер картинки — но чаще правильный ответ всё-таки JPG.