Сети доставки контента изображений (CDN) отлично подходят для оптимизации изображений для Интернета. Переключение вашего веб-сайта на CDN изображений может дать 40–80% экономии размера файла изображения, и в большинстве случаев они могут оптимизировать ваши изображения лучше, чем скрипт оптимизации изображений во время сборки.
Что такое CDN изображений?
Сети доставки изображений специализируются на преобразовании, оптимизации и доставке изображений. Вы также можете рассматривать их как API для доступа и управления изображениями, используемыми на вашем сайте. Для изображений, загруженных из сети доставки изображений, 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 изображений начинает их поддерживать.
Типы сетей доставки изображений
Существует две основные категории сетей доставки изображений: самоуправляемые и управляемые третьей стороной.
Самостоятельно управляемые сети доставки изображений
Самостоятельно управляемые сети доставки контента могут стать хорошим выбором для объектов с инженерным персоналом, который может самостоятельно обслуживать свою инфраструктуру.
- Thumbor — самая популярная самоуправляемая CDN изображений. Она имеет открытый исходный код и бесплатна в использовании, но у нее меньше функций, чем у большинства коммерческих CDN, а ее документация несколько ограничена. Сайты, использующие thumbor, включают Wikipedia , Square и 99designs . Инструкции по настройке см. в разделе Как установить CDN изображений Thumbor .
- Воображаемый
- Имагор
Сторонние CDN изображений
Сторонние CDN изображений предоставляют CDN изображений как услугу. Так же, как облачные провайдеры предоставляют серверы и другую инфраструктуру за плату, CDN изображений предоставляют оптимизацию и доставку изображений за плату. Поскольку сторонние CDN изображений поддерживают базовую технологию, вы обычно можете начать использовать ее довольно быстро, хотя полная миграция для большого сайта может занять больше времени. Сторонние CDN изображений обычно оцениваются на основе уровней использования, при этом большинство CDN изображений предоставляют либо бесплатный уровень, либо бесплатную пробную версию, чтобы вы могли опробовать их продукт.
Выберите изображение CDN
Существует много хороших вариантов CDN для изображений. Некоторые из них имеют больше функций, чем другие, но любой из них может помочь вам сэкономить байты на ваших изображениях и, следовательно, быстрее загружать ваши страницы. Помимо набора функций, другие факторы, которые следует учитывать при выборе CDN для изображений, — это стоимость, поддержка, документация и простота настройки или миграции.
Эффекты на наибольшем содержательном оттенке (LCP)
Изображения являются важной частью пользовательского опыта на многих веб-сайтах, поэтому они являются важным фактором в Largest Contentful Paint сайта. Вот несколько вещей, которые следует иметь в виду, если вы решите использовать CDN изображений:
- Изображения, обслуживаемые CDN, могут поступать с сервера с кросс-источником, что может увеличить время настройки соединения вашего сайта. По возможности старайтесь использовать CDN изображений, который проксирует основной источник, чтобы не добавлять дополнительные источники для подключения браузера. Это имеет тот же эффект, что и самостоятельное размещение изображений на основном источнике.
- Рассмотрите возможность использования значения атрибута
fetchpriority"high"для элемента изображения LCP, чтобы браузер мог начать загрузку этого изображения как можно скорее. - Если изображение не сразу обнаруживается в исходном HTML-коде, рассмотрите возможность использования подсказки
rel=preloadдля вашего изображения-кандидата LCP, чтобы браузер мог загрузить это изображение заранее. - Если вы не можете подключиться через свой источник и браузер не узнает, какое изображение загрузить, пока не наступит конец загрузки страницы, настройте подключение к CDN изображений из разных источников как можно раньше, чтобы сократить фазу загрузки ресурсов для потенциальных изображений-кандидатов LCP.