Используйте CDN изображений для оптимизации изображений

Jeremy Wagner

Katie Hempenius

Barry Pollard

Сети доставки контента изображений (CDN) превосходно оптимизируют изображения для Интернета. Переключение вашего веб-сайта на CDN изображений может привести к экономии размера файла изображения на 40–80% , и в большинстве случаев они могут оптимизировать ваши изображения лучше, чем сценарий оптимизации изображений во время сборки.

Что такое CDN изображений?

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

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

Как CDN изображений используют URL-адреса для указания вариантов оптимизации

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

Источник

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

В предыдущем примере используется домен CDN изображения («example-cdn.com») с персонализированным поддоменом вместо личного домена.

Изображение

CDN изображений обычно можно настроить на автоматическое получение изображений из существующих мест, когда они необходимы. Эта возможность часто достигается путем включения полного URL-адреса существующего изображения в URL-адрес изображения, созданного CDN изображения. Например, вы можете увидеть 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-адрес, чтобы он мог соответствующим образом обработать URL-адрес. Это может вызвать путаницу, если файл сохранен на диске и используется другой программой, которая ожидает, что формат будет соответствовать расширению файла.

Другой широко поддерживаемый способ загрузки изображений в CDN изображений — это отправка их в HTTP-запросе POST к API CDN изображений.

Ключ безопасности

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

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

Преобразования

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

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

• Подсказки клиента (например, ширина области просмотра, DPR и ширина изображения)
• Заголовок Save-Data
• Заголовок запроса User-Agent
• API сетевой информации

Например, CDN изображений может передавать AVIF в браузер Chrome, WebP в браузер Edge и JPEG в очень старый браузер. Автоматические настройки популярны, поскольку они позволяют вам воспользоваться опытом CDN изображений в оптимизации изображений без необходимости изменять код для внедрения новых технологий, когда CDN изображений начнет их поддерживать.

Типы CDN изображений

Существует две основные категории CDN изображений: самоуправляемые и сторонние.

CDN с самоуправляемыми изображениями

Самоуправляемые CDN могут быть хорошим выбором для сайтов с инженерным персоналом, которым удобно поддерживать собственную инфраструктуру.

• Thumbor — самый популярный CDN с самоуправляемыми изображениями. Он имеет открытый исходный код и бесплатен для использования, но у него меньше функций, чем у большинства коммерческих CDN, а его документация несколько ограничена. Сайты, использующие Thumbor, включают Wikipedia , Square и 99designs . Инструкции по настройке см. в разделе «Как установить CDN образа Thumbor» .
• Воображаемый
• Имагор

Сторонние CDN для изображений

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

Выберите изображение CDN

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

Влияние на наибольшую содержательную отрисовку (LCP)

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

• Изображения, передаваемые из CDN, могут поступать с сервера перекрестного происхождения, что может увеличить время установки соединения вашего сайта. По возможности старайтесь использовать CDN изображений, который проксирует основной источник, чтобы не добавлять дополнительные источники для подключения браузера. Это имеет тот же эффект, что и самостоятельные изображения в первичном источнике.
• Рассмотрите возможность использования атрибута fetchpriority со значением "high" для элемента изображения LCP, чтобы браузер мог начать загрузку этого изображения как можно скорее.
• Если изображение невозможно сразу обнаружить в исходном HTML-коде, рассмотрите возможность использования подсказки rel=preload для изображения-кандидата LCP, чтобы браузер мог загрузить это изображение заранее.
• Если вы не можете проксировать через свой источник, и браузер не будет знать, какое изображение загружать до поздней загрузки страницы, настройте соединение с CDN изображения из разных источников как можно раньше, чтобы сократить фазу загрузки ресурса для потенциальные изображения-кандидаты LCP.