Сети доставки контента (CDN) изображений отлично подходят для оптимизации изображений для Интернета. Переход на CDN для изображений может уменьшить размер графических файлов на 40–80 %. В большинстве случаев это позволяет оптимизировать изображения лучше, чем скрипт, выполняемый во время сборки.
Что такое CDN для изображений?
Сети доставки контента для изображений специализируются на преобразовании, оптимизации и доставке изображений. Их также можно рассматривать как API для доступа к изображениям, используемым на сайте, и управления ими. Для изображений, загруженных из CDN, URL указывает не только на то, какое изображение нужно загрузить, но и на такие параметры, как размер, формат и качество. Это позволяет создавать варианты изображения для разных целей.
Сети доставки контента для изображений отличаются от скриптов оптимизации изображений во время сборки тем, что они создают новые версии изображений по мере необходимости. В результате CDN обычно лучше подходят для создания изображений, которые сильно настроены для отдельных клиентов, чем скрипты сборки.
Как сети доставки контента для изображений используют URL, чтобы указывать параметры оптимизации
URL-адреса изображений, используемые CDN изображений, передают важную информацию об изображении, а также о преобразованиях и оптимизациях, которые должны быть к нему применены. Форматы URL зависят от используемой CDN, но в целом они похожи. Вот некоторые из наиболее распространенных функций.
Происхождение
CDN для изображений может находиться в вашем домене или в домене CDN. Сторонние CDN для изображений обычно предлагают возможность использовать собственный домен за плату. Использование собственного домена упрощает последующее переключение CDN изображений, поскольку изменения URL не потребуются.
В предыдущем примере используется домен CDN для изображений (example-cdn.com) с персонализированным субдоменом вместо собственного домена.
Изображение
Обычно сети доставки контента для изображений можно настроить так, чтобы они автоматически извлекали изображения из существующих местоположений, когда это необходимо. Для этого в URL изображения, созданного CDN, часто включают полный URL исходного изображения. Например, URL может выглядеть так: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Этот URL будет извлекать и оптимизировать изображение, которое находится по адресу https://flowers.com/daisy.jpg.
Запрошенный формат файла (в примере – JPG) может не совпадать с форматом возвращенного графического файла (в примере – WebP). HTTP-заголовок content-type сообщает браузеру, в каком формате указан URL, чтобы браузер мог правильно его обработать. Это может привести к путанице, если файл сохранен на диск и используется другой программой, которая ожидает, что формат будет соответствовать расширению имени файла.
Другой широко поддерживаемый способ загрузки изображений в CDN изображений – отправка их в HTTP-запросе POST к API CDN изображений.
электронный ключ;
Электронный ключ не позволяет другим пользователям создавать новые версии ваших изображений. Если эта функция включена, для каждой новой версии образа требуется уникальный ключ безопасности.
Если кто-то попытается изменить параметры URL изображения, не указав действительный ключ безопасности, создать новую версию не получится. Ваша CDN изображений позаботится о деталях генерации и отслеживания ключей безопасности для вас.
Преобразования
CDN для изображений предлагают десятки, а в некоторых случаях и сотни различных преобразований изображений. Эти преобразования указываются в строке URL, и вы можете использовать несколько преобразований одновременно. Для производительности веб-страниц наиболее важными преобразованиями изображений являются размер, плотность пикселей, формат и сжатие. Именно благодаря этим преобразованиям переход на CDN для изображений обычно позволяет уменьшить размер графических файлов на сайте.
Поскольку обычно существует объективно наилучшая настройка для преобразований производительности, некоторые CDN изображений поддерживают режим «авто» для этих преобразований. Например, вместо того чтобы указывать, что изображения должны быть преобразованы в формат WebP, вы можете разрешить CDN автоматически выбирать и использовать оптимальный формат. CDN для изображений может определить наилучший способ преобразования изображения, используя, помимо прочего, следующие сигналы:
- Подсказки клиента (например, ширина области просмотра, DPR и ширина изображения)
- Заголовок
Save-Data - Заголовок запроса User-Agent
- Network Information API
Например, CDN для изображений может передавать AVIF в браузер Chrome, WebP в браузер Edge и JPEG в очень старый браузер. Автоматические настройки популярны, потому что они позволяют воспользоваться опытом CDN изображений в оптимизации изображений без необходимости изменять код для внедрения новых технологий, когда CDN изображений начинает их поддерживать.
Типы CDN для изображений
Существует две основные категории CDN изображений: самоуправляемые и управляемые третьей стороной.
Самостоятельно управляемые CDN для изображений
Самостоятельно управляемые сети CDN могут быть хорошим выбором для сайтов, у которых есть инженеры, способные поддерживать собственную инфраструктуру.
- Thumbor – самая популярная сеть доставки контента для изображений, которой можно управлять самостоятельно. Это бесплатный инструмент с открытым исходным кодом, но у него меньше функций, чем у большинства коммерческих сетей доставки контента, а его документация несколько ограничена. Thumbor используют такие сайты, как Википедия, Square и 99designs. Инструкции по настройке приведены в статье Как установить CDN для изображений Thumbor.
- Imaginary
- Imagor
Сторонние сети доставки контента для изображений
Сторонние сети доставки контента предоставляют CDN для изображений как услугу. Точно так же, как поставщики облачных сервисов предоставляют серверы и другую инфраструктуру за плату, CDN изображений предоставляют оптимизацию и доставку изображений за плату. Поскольку сторонние сети доставки контента для изображений поддерживают базовую технологию, вы можете начать использовать одну из них довольно быстро, хотя полный перенос большого сайта может занять больше времени. Сторонние CDN изображений обычно оцениваются на основе уровней использования, при этом большинство CDN изображений предоставляют либо бесплатный уровень, либо бесплатную пробную версию, чтобы вы могли опробовать их продукт.
Выберите CDN для изображений
Существует множество хороших вариантов CDN для изображений. Некоторые из них имеют больше функций, чем другие, но любой из них может помочь вам сохранить байты на ваших изображениях и, следовательно, быстрее загрузить ваши страницы. Помимо наборов функций, при выборе CDN для изображений следует учитывать стоимость, поддержку, документацию и простоту настройки или миграции.
Влияние на Largest Contentful Paint (LCP)
Изображения – важная часть многих сайтов, поэтому они существенно влияют на показатель Largest Contentful Paint. Вот несколько вещей, о которых следует помнить, если вы решите использовать CDN для изображений:
- Изображения, размещенные в сетях доставки контента, могут поступать с сервера, находящегося в другом домене, что может увеличить время подключения к вашему сайту. По возможности используйте CDN для изображений, которая работает через прокси-сервер основного источника, чтобы не добавлять дополнительные источники для подключения браузера. Это дает тот же эффект, что и размещение изображений на основном источнике.
- Рекомендуем использовать
fetchpriorityзначение"high"атрибута для элемента изображения LCP, чтобы браузер мог начать загрузку этого изображения как можно скорее. - Если изображение не сразу обнаруживается в исходном HTML-коде, попробуйте использовать подсказку
rel=preloadдля изображения, которое может быть самым крупным отрисованным контентом, чтобы браузер мог загрузить его заранее. - Если вы не можете использовать прокси-сервер, а браузер не знает, какое изображение загружать, пока не загрузится страница, как можно раньше настройте подключение к CDN для изображений из разных источников. Это сократит этап загрузки ресурсов для потенциальных кандидатов на LCP.