Чем отличаются пиксели и векторные контуры, почему PNG не всегда лучше JPEG и как выбрать формат без потери смысла.
Две картинки, два способа хранения
Представь вывеску кофейни. На ней есть фотография чашки и короткое название с круглым значком. Пока вывеска маленькая, оба изображения выглядят чётко. При увеличении фотография может стать размытой, а значок остаться идеально ровным. Причина не обязательно в качестве работы дизайнера: эти картинки могут храниться принципиально разными способами.
Растровое изображение — сетка пикселей. У каждой ячейки есть цвет, а у всей сетки — определённая ширина и высота. Векторное изображение описывает фигуры: где начинается линия, как изгибается контур, каким цветом заполнена область. Когда размер меняется, браузер заново строит эти фигуры. Это не означает, что вектор подходит для любого изображения: подробную фотографию неудобно описывать миллионами отдельных контуров.
Что происходит при увеличении
Возьмём растровую иконку шириной 100 пикселей и растянем до 400. Исходных сведений о деталях больше не стало. Программе нужно заполнить пространство между известными точками: повторить соседние цвета или вычислить промежуточные. Поэтому получается либо заметная клетка, либо сглаженная, но мягкая картинка. Увеличение файла само по себе не возвращает потерянные детали.
Проверить это можно без специальной программы. Сохрани один и тот же простой знак маленьким PNG и SVG, поставь рядом и увеличь масштаб страницы. Сравни края диагоналей. Затем повтори опыт с фотографией, вставленной внутрь SVG: она всё равно будет растровой. Расширение файла описывает контейнер, но не превращает вложенный снимок в набор математических линий.
Сжатие без потерь и с потерями
Размеры изображения и вес файла — разные характеристики. Два файла 1200 × 800 могут занимать разное количество байтов: один хранит данные эффективнее, другой отбрасывает часть подробностей. Сжатие без потерь позволяет восстановить исходные значения пикселей. Сжатие с потерями жертвует частью информации ради меньшего файла; результат зависит от изображения и настроек.
Практический пример — портрет на однотонном фоне. Небольшие изменения оттенков кожи могут остаться незаметными, зато вокруг тонкой чёрной подписи появятся грязные края. Поэтому «выглядит нормально на фотографии» не равно «подходит для текста». Если несколько раз открывать JPEG, редактировать и снова сохранять с потерями, изменения могут накапливаться. Рабочий оригинал лучше хранить отдельно от версии для публикации.
Как выбирать формат под содержимое
Для логотипа, диаграммы или простой иконки обычно стоит сначала проверить SVG. Для фотографии — сравнить JPEG, WebP и AVIF при приемлемом качестве. Для изображения, где важны точные пиксели или прозрачность, полезен PNG; WebP также поддерживает прозрачность и режим без потерь. Универсального победителя по весу нет: решение проверяют на конкретной картинке.
Сделай три экспорта одного снимка, открой их в одинаковом размере и сравни лицо, мелкий рисунок ткани и границы объектов. Потом посмотри вес. Сравнение честно только при одинаковых размерах: файл шириной 300 пикселей почти неизбежно легче версии на 2000, но это ещё ничего не говорит о качестве формата.
| Изображение | Что проверить первым | Где смотреть дефекты |
|---|---|---|
| Логотип | SVG | Контуры и шрифт |
| Фото | JPEG, WebP, AVIF | Лицо, градиенты, детали |
| Скриншот с текстом | PNG или WebP без потерь | Буквы и тонкие линии |
Почему хороший файл всё равно выглядит плохо
Предположим, карточка занимает 300 CSS-пикселей по ширине. На экране с плотностью 2 пикселя устройства на один CSS-пиксель для чёткой растровой версии часто нужен исходник около 600 пикселей. Но отправлять всем огромный оригинал тоже невыгодно. Адаптивные изображения позволяют браузеру выбрать подходящий вариант, учитывая доступное место и плотность экрана.
Есть и другая ошибка: картинку принудительно растягивают до ширины и высоты блока, не сохраняя пропорции. Круг становится овалом, лицо — широким, ноутбук — приплюснутым. Замена PNG на WebP это не исправит: проблема в отображении. Сначала проверь пропорции и способ вписывания, затем разрешение, и только после этого настройки сжатия.
Проверка на одном макете
Представь конкретную задачу: на странице мастерской нужны квадратная карточка, широкий баннер и маленький знак в меню. В качестве исходника есть фотография 2400 × 1600 и векторный логотип. Для карточки сначала выбираем квадратный фрагмент, где предмет не обрезан; для баннера — более широкий. Простое изменение размеров одного и того же прямоугольника не заменяет кадрирование: смысловые части изображения могут оказаться за границей.
Затем проверяем три вида качества отдельно. Первый — детализация: хватает ли исходных пикселей для выбранного размера. Второй — геометрия: не изменились ли пропорции. Третий — сжатие: не появились ли пятна вокруг букв и на плавном фоне. Такой порядок позволяет назвать причину, а не сказать общее «картинка плохая». У каждого дефекта своё исправление.
Наконец, посмотри на страницу с медленным подключением. Если баннер появляется последним, попробуй уменьшить именно его вес и сравнить результат. Не нужно ухудшать все изображения сразу. Запиши размеры и параметры удачного экспорта: следующий похожий материал можно будет подготовить осознанно, а не заново угадывать настройки.
Небольшой эксперимент вместо спора о качестве
Возьми один логотип, один портрет и один скриншот. Для каждого запиши назначение: аватар, обложка или иллюстрация внутри статьи. Выбери конечный размер, сделай несколько экспортов и посмотри их на телефоне и компьютере. Не оценивай только при увеличении до 800 процентов: дефект, который никто не увидит в реальном размере, может быть приемлемой ценой за быстрый показ.
Итогом должна стать понятная пара: рабочий оригинал и подготовленная публикация. Оригинал нужен для будущих изменений, публикация — для конкретного места. Если завтра маленькая карточка станет широким баннером, её лучше заново экспортировать из исходника, а не растягивать вчерашний файл. Так качество становится управляемым решением, а не надеждой на «самый хороший формат».