Преобразование JPG в WebP для библиотеки изображений вашего сайта

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

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

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

Сделайте отдельный экспорт для разных ролей отображения, а не заставляйте одно крошечное изображение заполнять каждое пространство. Миниатюра, изображение статьи и большой вид продукта служат разным целям. Изменение размера изображения сетчатки Объясняет, как выбрать иллюстративные кандидаты с более высокой плотностью, не предполагая, что каждому устройству нужен один и тот же файл. Избегайте увеличения небольшого источника для удовлетворения большого количества экспорта; Увеличение не может создать недостающие детали.

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

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

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

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

Например, сравните листовой пейзаж статьи с простым студийным портретом. Им могут потребоваться разные настройки качества, даже с одинаковой шириной. Обратите внимание на размеры и измеренные байты рядом с каждым кандидатом, чтобы решение оставалось привязанным к реальному файлу.