Автоматическое уменьшение размера изображения без потери качества

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

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

Выбор оптимального формата изображения – f_auto

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

Cloudinary имеет возможность автоматически определить, какой браузер запрашивает изображение, а затем выбрать наиболее эффективный формат изображения для доставки. Просто добавьте параметр fetch_format и установите его значение в auto (f_auto в URL-адресах).

Ниже приведен пример отображения двух образцов изображений. Первое изображение использует URL-адрес без флага f_auto Cloudinary и, следовательно, доставляется в формате JPEG во всех браузерах (при этом масштабируется на лету до ширины 300 пикселей с сохранением соотношения сторон). Второе изображение содержит f_auto в URL-адресе доставки и поэтому доставляется в формате AVIF (14,6 КБ – экономия 56,5%), WebP (16,1 КБ – экономия 52%) или JPEG-2000 (21,0 КБ – экономия 37%) для поддерживаемых браузеров.

https://res.cloudinary.com/demo/image/upload/w_300,f_auto/docs/shoes.jpg

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

Кроме прямых загрузок, Cloudinary также поддерживает получение изображений через их общедоступные URL-адреса, трансформируя их на лету и доставляя оптимизированные изображения через CDN. Это означает, например, что вы можете легко интегрировать Cloudinary на свой веб-сайт, не изменяя инфраструктуру и код. Просто добавьте префикс URL-адреса изображения в Cloudinary fetch URL.

С функцией автоматического выбора формата Cloudinary вы также можете динамически преобразовывать и доставлять удаленные изображения и улучшать производительность своего сайта.

Например, следующий URL-адрес доставляет изображение Дуэйна Джонсона из удаленного HTTP-URL Wikimedia Commons. Удаленное изображение извлекается Cloudinary, хранится постоянно в облаке, динамически преобразуется в AVIF, WebP или JPEG-2000, если это требуется браузером пользователя, и доставляется оптимизированным и кэшированным через высококлассный CDN.

https://res.cloudinary.com/demo/image/fetch/w_300,f_auto/https://upload.wikimedia.org/wikipedia/commons/6/68/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg

Под капотом с f_auto

Функция автоматического выбора формата предоставляет живую функциональность, и по мере развития и изменения поддержки браузеров, клиенты Cloudinary получают непрерывно растущую ценность, так как наша служба постоянно обновляется.

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

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

Уменьшение размера изображения без потери качества

Функцию динамического выбора формата Cloudinary можно дополнительно улучшить, используя ее вместе с функцией автоматического выбора качества. Включение параметра quality и установка его значения на auto (q_auto в URL-адресах) указывает Cloudinary автоматически определить оптимальные настройки качества для изображения на основе его формата и содержимого, что приводит к наименьшему размеру файла с сохранением визуального качества. Когда вы добавляете f_auto вместе с q_auto в URL-адрес доставки, алгоритм Cloudinary также проверяет, может ли другой формат изображения дать меньший размер файла при сохранении визуального качества.

Например, изображение каньонов с изменением размера до ширины 400 пикселей и доставкой с автоматическим выбором качества и автоматическим выбором формата (q_auto и f_auto) будет доставлено либо в формат:

https://res.cloudinary.com/demo/image/upload/w_400,f_auto,q_auto/canyons.jpg

Кроме того, при использовании f_auto и q_auto вместе, не только учитывается браузер посетителя при выборе лучшего формата изображения, но также и содержимое изображения. Например, алгоритм Cloudinary может определить, что формат PNG лучше подходит для конкретных изображений, содержащих контент, такой как рисунки. Для некоторых изображений может быть автоматически выбран даже формат PNG8, обеспечивающий отличные результаты с очень эффективным размером файла.

Например, следующий URL динамически генерирует версию рисунка шириной 400 пикселей только с помощью автоматического выбора качества изображения (q_auto без f_auto).

https://res.cloudinary.com/demo/image/upload/w_400,q_auto/cloud_castle.jpg

Результатом является изображение в формате JPEG (20,4 КБ), на котором, если внимательно посмотреть, можно заметить визуальные артефакты, вызванные потерями качества, характерными для формата JPEG. В следующем примере с тем же рисунком мы сочетаем q_auto и f_auto:

https://res.cloudinary.com/demo/image/upload/w_400,q_auto,f_auto/cloud_castle.jpg

В данном случае алгоритм решил закодировать изображение, используя формат PNG8. Изображение выглядит лучше, не имеет артефактов и весит еще меньше – всего 16,5 КБ.

Итог – Автоматическая передача формата

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

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