От автора: при разработке или обновлении сайта среди основных целей должны быть обеспечение оптимального пользовательского опыта и повышение конверсии. Эти два фактора являются ключевыми для повышения доходов вашей компании. Однако вы можете столкнуться с одной проблемой: все большее использование изображений делает ваш дизайн привлекательнее, но это негативно сказывается на производительности сайта.
Сегодня изображения составляют 60% от всего загружаемого контента с веб-страницы. Оптимизация изображений может дать значимый рост производительности. Оптимизация изображений – это одновременно искусство и наука. Она требует аккуратной оценки множества параметров и деликатного баланса между контентом, форматами, качеством и разрешениями.
Если в вашем веб-приложении пользователи могут сами загружать изображения, вы сами загружаете статичные изображения или отображаете картинку профиля из социальных сетей, то, скорее всего, вам необходимо будет их подстраивать под дизайн вашего сайта. В этом уроке мы изучим возможности Cloudinary, полноценного облачного инструмента для управления изображениями и видео. Вы узнаете, как с его помощью можно оптимизировать изображения и намного повысить производительность вашего сайта.
Автоматический выбор самого эффективного формата
Форматы изображений могут существенно влиять на время загрузки. Однако ручной подбор оптимального формата и настроек кодировки для каждого изображения слишком сложны и неэффективны.
Cloudinary динамически определяет и конвертирует все изображения в самый подходящий формат на основе контента из изображений для текущего браузера. Вы легко можете загрузить изображения на Cloudinary и конвертировать их в другие форматы. К примеру, сервис может автоматически конвертировать изображения в формат WebP для Chrome и JPEG-XR для IE. Если необходимо сохранить прозрачность, можно выбрать PNG. Есть множество причин, по которым вы захотите сменить формат изображения:
JPEG для фотографий, которые должны быстро загружаться (или WebP, если пользователи сидят через Chrome или мобильное приложение).
GIF, если изображение состоит из нескольких цветов.
PNG (24 bit) для изображений высокого качества с прозрачным фоном.
Чтобы изменить формат изображений, просто укажите новый формат в конце URL. В Cloudinary SDK новый формат можно указывать в виде расширения в имени файла или в параметре формата. Пример:
Точная настройка качества сжатия и кодировка могут существенно снизить размер файлов без заметных визуальных ухудшений. Однако подобрать правильные визуальные настройки для каждого изображения намного сложнее, чем звучит.
Cloudinary автоматически подбирает размер файла и качество. Умные алгоритмы качества и кодировки анализируют каждое изображение для достижения оптимального баланса. На выходе мы получаем отличное качество и минимальный вес. Индивидуальное сканирование всех изображений и нахождение оптимального уровня сжатия и настроек кодировки позволяют точно настроить уровень сжатия, а также точно подогнать настройки кодировки, что может существенно снизить размер файлов без заметных для человеческого глаза изменений.
Автоматическое масштабирование и кадрирование изображений для подстройки под любой макет страницы
Изображения с разрешением больше необходимого используют лишнюю пропускную способность и замедляют скорость загрузки страницы. Однако ручное создание нескольких версий одного изображения под разные разрешения может отнять много ресурсов. Cloudinary позволяет автоматически масштабировать изображения до оптимальных значений, чтобы предоставить подходящее разрешение для всех устройств пользователя.
Кроме того, изображения часто кадрируются для адаптивных макетов и различных разрешений устройств. Алгоритм обрезания Cloudinary учитывает контент и использует комбинацию методов для автоматического определения интересующей области, после чего производит кадрирование изображения прямо на лету.
Умное кадрирование правильно обрезает все изображения, а не только фото с лицами. Все изображения анализируются отдельно для нахождения оптимальной области фокуса. Исходное изображение:
Примеры кадрирования:
Динамический URL
Cloudinary позволяет легко трансформировать ваши изображения на лету в любой формат, стиль и разрешение, а также оптимизирует изображения под минимальный вес, что повышает пользовательский опыт и экономит пропускную способность.
В сердце Cloudinary лежит доставка изображений по динамическим URL через быструю CDN сеть. В адресе хранится публичный ID изображения и любые другие параметры для трансформации. Публичный ID – уникальный идентификатор изображения. Задается после загрузки изображения в аккаунт Cloudinary, автоматически присваивается сервисом.
В URL можно добавить любые инструкции по трансформации до публичного ID. При первом посещении ссылки на лету создается производная от изображения и доставляется пользователю. Полученное изображение сохраняется в кэш CDN сети и становится доступно сразу для всех последующих пользователей, запрашивающих то же изображение.
Заключение
Эти советы – лишь несколько способов по оптимизации изображений на вашем сайте, улучшающие производительность и пользовательский опыт.
Автор: Alok Shah
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
