Преобразуйте непрозрачный PNG в WebP и сравните результат

фотографический PNG может стоит тестировать как WebP для сайта. Это может быть изображение камеры, экспортированное из инструмента дизайна, визуализированная сцена в комнате или сплющенная рекламная графика. сделать отдельный экспорт и сравнить его с оригиналом, а не удалять PNG немедленно. Размер файла зависит от изображения, поэтому полезное сохранение , это тот, который вы на самом деле измеряете.

Прозрачность здесь нуждается в особом уходе. Хотя WebP Формат может хранить альфа, этот инструмент в настоящее время отображает WebP Вывод на белом фоне. Таким образом, прозрачный вклад потеряет эту прозрачную область экспорта. Держать PNG Для логотипов, вырезов и накладок, которые должны находиться на разных фонах, и использовать это преобразование для изображений, где уместен непрозрачный результат.

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

Если PNG является скриншотом интерфейса, читабельность может иметь большее значение, чем сбривать несколько байтов. Сравните А PNG экспорт или оставьте источник, когда WebP смягчит критические детали. Для большой непрозрачной фотографии проверьте соответствие фактическим границам дисплея, прежде чем снижать качество. Сначала уменьшите ненужные пиксели, когда веб-сайт их никогда не показывает, но сохраняйте достаточное разрешение для предполагаемого размещения.

Ползунок качества WebP контролирует кодировку с потерями в экспорте. Более высокая настройка не восстанавливает детали, отсутствующие в источнике, и одно и то же число не подразумевает один и тот же визуальный результат в разных форматах. Используйте его в качестве инструмента сравнения: немного отрегулируйте, проверьте результат и сохраните самую маленькую версию, которая соответствует вашим потребностям.

PNG не использует этот контроль качества таким же образом, поэтому изменение расширения является реальным выбором рабочего процесса. Если ваша PNG содержит крошечные метки диаграммы или точные цветовые границы, сохранение PNG может быть правильным решением, даже если его файл больше. Этот конвертер не уменьшает цветовую палитру PNG, не создает настройку WebP без потерь или редактирует объекты и слои внутри сплющенной графики.

Загрузите преобразованное изображение и загрузите его на тестовую страницу в вашей реальной системе веб-сайта. Подтвердите, что браузер получает WebP, отображаемая обрезка правильная, и ни один прозрачный края не стали белыми. Просмотрите его на фоне страницы, особенно если источник был разработан для темной секции. Преобразование должно быть проверено в контексте, а не только в предварительном просмотре файла.

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

Например, протестируйте белую метку на прозрачных пикселях, прежде чем конвертировать активы любых брендов. Белый непрозрачный вывод может полностью скрыть отметку, которую пропустит только сравнение размеров файла.