Зачем сравнивать с помощью ползунка
Два изображения, стоящие рядом, удивительно трудно оценить. Взгляд прыгает с одного на другое, мозг додумывает пробелы, а мелкие различия в резкости или цвете просто проходят незамеченными. Ползунок помещает обе версии точно в одно и то же место экрана, и когда вы двигаете разделитель, всё, что между ними отличается, мелькает прямо на линии.
Это полезно всякий раз, когда одно изображение — обработанная версия другого:
- Проверить, не появились ли заметные артефакты от настроек сжатия, прежде чем применять их ко всей папке.
- Сравнить два варианта экспорта из фоторедактора, например JPG с качеством 80 и WebP с качеством 75.
- Увидеть, что на самом деле изменило ИИ-увеличение или удаление фона.
- Сопоставить отретушированный портрет с исходным файлом.
- Найти различия между двумя почти одинаковыми версиями макета или скриншота.
Как устроен просмотр
Перетащите или выберите сразу два изображения; используются первые два переданных файла. Первое растягивается на всю ширину страницы, второе лежит точно поверх него, масштабированное под ту же рамку. Перетаскивание (или касание) сдвигает разделитель: слева от ручки видно второе изображение, справа — первое.
Под ползунком две карточки показывают размеры в пикселях и вес каждого файла. Вместе они отвечают на главный вопрос большинства сравнений: стоит ли экономия килобайтов видимой разницы.
Несколько деталей, которые стоит знать:
- Порядок, в котором приходят файлы, зависит от того, как вы их выбираете. Если не уверены, где какое, посмотрите на размеры файлов в карточках: обработанная версия обычно меньше.
- Оба изображения должны декодироваться в вашем браузере. Принимаются JPG, PNG, WebP и AVIF; фото в HEIC сначала сконвертируйте инструментом HEIC в JPG.
- Если у изображений разные пропорции, второе масштабируется так, чтобы покрыть рамку первого, и часть его обрезается по краям. Для осмысленного результата сравнивайте изображения с одинаковым соотношением сторон.
- Ничего не загружается на сервер. Оба файла читаются прямо с вашего устройства и остаются на странице, пока вы не выберете новую пару.
На что смотреть
Повреждения от сжатия распределяются по картинке неравномерно. Сначала медленно проведите разделителем по таким участкам:
- Плавные градиенты — небо, студийные фоны, стены. Здесь форматы с потерями первыми показывают полосы или едва заметные квадратные блоки.
- Резкие края на однотонном фоне — текст, логотипы, контуры зданий. Ищите ореолы, «звон» или размытую кайму.
- Насыщенные красные и синие. JPEG хранит цвет с меньшим разрешением, чем яркость, поэтому яркие красные детали размазываются раньше всего остального.
- Мелкая повторяющаяся текстура — волосы, трава, ткань. Пережатые изображения теряют её первой, и она превращается в гладкое пятно.
- Тёмные тени, где шум и блоки хорошо прячутся на тусклом экране, но вылезают на ярком.
Оценивайте изображение в том размере, в котором его действительно будут смотреть. На телефоне сжатие, которое выглядит грубо на 27-дюймовом мониторе, может быть совершенно незаметным.
Практический порядок подбора настроек
Сравнение полезнее всего как часть короткого тестового цикла:
- Выберите из пачки одно типичное изображение — в идеале с небом, кожей и мелкими деталями.
- Экспортируйте его дважды с разными настройками, например с помощью сжатия JPG с качеством 80 и 65.
- Загрузите оригинал и вариант с более низкой настройкой. Если на пяти перечисленных участках разницы не видно, более низкая настройка безопасна.
- Если разница заметна, загрузите оригинал и вариант с более высокой настройкой и повторите.
- Примените победившую настройку ко всей пачке.
Тот же подход работает для уровней палитры PNG, качества WebP и изменения размера. Если два кандидата выглядят одинаково, решают размеры файлов в карточках: берите меньший.