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

Jeremy Wagner

Katie Hempenius

Barry Pollard

Зачем использовать CDN изображений?

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

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

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

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

Другой широко поддерживаемый способ загрузки изображений в 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, а его документация несколько ограничена. Wikipedia , Square и 99designs — три сайта, использующие Thumbor. Инструкции по настройке см. в статье «Как установить CDN образа Thumbor ».
• Воображаемый
• Имагор

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

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

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

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

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

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

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

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

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