Сети доставки контента изображений

Узнайте, как CDN для изображений способны преобразовывать и оптимизировать содержимое изображения.

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

Image CDN может обеспечить все эти преимущества с одним ключевым отличием: возможностью преобразования и оптимизации содержимого изображения на основе строк URL-адреса, используемого для доступа к нему.

Пользователь загружает каноническое изображение высокого разрешения провайдеру, который генерирует URL, используемый для доступа к нему:

https://res.cloudinary.com/demo/image/upload/sample.jpg

Хотя точный синтаксис используется у разных провайдеров по-разному, как минимум все CDN для изображений позволяют изменять размеры исходного изображения, его кодировку и параметры сжатия. Например, Cloudinary выполняет динамическое изменение размеров загруженного изображения с помощью следующих синтаксисов: h_ - числовая высота в пикселях, w_ - ширина и значение c_, которое позволяет указать подробную информацию о том, как изображение должно быть масштабировано или обрезано.

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

<img
    src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg"
    alt="…"
/>

При первом обращении пользователя к URL-адресу, содержащему эти преобразования, создается и отправляется новая версия изображения, пропорционально масштабированная до ширины 400px (w_400). Затем этот вновь созданный файл кэшируется в CDN, чтобы он мог быть отправлен любому пользователю, запрашивающему тот же URL, а не воссоздан по требованию.

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

<img
    src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
    srcset="
        https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg   800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg   600w
    "
    alt="…"
/>

Мы можем вручную указать желаемый уровень сжатия, используя уже ставший привычным синтаксис: q_, сокращение от "quality", за которым следует числовое обозначение степени сжатия:

<img
    src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"
    alt="…"
/>

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

Автоматическое сжатие

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

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

Как бы сложно ни звучал этот процесс, его реализация не может быть проще: для Cloudinary добавление q_auto в URL-адрес изображения позволяет реализовать эту функцию:

<img
    src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg"
    alt="…"
/>
<!-- 250 KB-->

<img
    src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg"
    alt="…"
/>
<!-- 134 KB-->

Автоматизированное кодирование и согласование контента

Получив запрос на изображение, CDN изображений определяют наиболее современную кодировку, поддерживаемую браузером, с помощью HTTP-заголовков, передаваемых браузером вместе с запросами на активы, в частности, заголовка Accept. Этот заголовок указывает на кодировки, которые браузер способен понять, используя те же media types, которые мы использовали бы для заполнения атрибута type элемента <picture> в <source>.

Например, добавление параметра f_auto в список преобразований изображения в URL актива явно указывает Cloudinary на то, что нужно передавать наиболее эффективную кодировку, которую способен понять браузер:

<img
    src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg"
    alt="…"
/>

Затем сервер генерирует версию изображения с этой кодировкой и кэширует результат для всех последующих пользователей с тем же уровнем поддержки браузера. Этот ответ содержит заголовок Content-Type, явно информирующий браузер о кодировке файла, независимо от его расширения. Даже если пользователь с современным браузером сделает запрос на файл, заканчивающийся .jpg, этот запрос будет сопровождаться заголовком, информирующим сервер о поддержке AVIF, и сервер пошлет файл в кодировке AVIF вместе с явным указанием обрабатывать его как AVIF.

В итоге получается процесс, который не только избавляет вас от необходимости создавать файлы с альтернативной кодировкой и вручную настраивать параметры сжатия (или поддерживать систему, выполняющую эти задачи за вас), но и избавляет от необходимости использовать <picture> и атрибут type для эффективного предоставления этих файлов пользователям. Таким образом, используя только синтаксисы srcset и sizes, вы можете предоставлять пользователям изображения, закодированные, например, как AVIF, возвращаясь к WebP (или JPEG-2000, только для Safari) и снова возвращаясь к наиболее разумной традиционной кодировке.

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

Источник — Image content delivery networks

Комментарии