Возможно, вы уже знакомы с концепцией сети доставки содержимого (content delivery network, CDN) — это сеть распределённых, но взаимосвязанных серверов, которые быстро и эффективно доставляют ресурсы пользователям. Когда файл загружается на сервер CDN, его дубликат создаётся на других узлах сети CDN по всему миру. Когда пользователь запрашивает файл, данные будут отправлены узлом, географически расположенным ближе всего к пользователю, что сокращает время ожидания. Распределённый характер CDN также обеспечивает дублирование на случай перебоев в работе сети или отказа оборудования, а также баланс нагрузки для смягчения скачков трафика.
CDN для изображений предлагают все эти преимущества, но с одним ключевым отличием: они способны преобразовывать и оптимизировать изображения, основываясь на адресной строке, используемой для доступа.
Пользователь загружает каноничное изображение с высоким разрешением к провайдеру, который генерирует адрес, применяемый для его доступа:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Хотя точный синтаксис у разных провайдеров может отличаться, как минимум все CDN для изображений позволяют менять размеры, кодировку и параметры сжатия исходного изображения. К примеру, Cloudinary выполняет динамическое изменение размера загруженного изображения с помощью следующего синтаксиса: значение h_, за которым идёт числовая высота в пикселях; w_, за которым идёт ширина; и значение c_, которое позволяет указать подробную информацию о том, как изображение должно быть масштабировано или обрезано.
Любое количество преобразований может быть выполнено путём добавления значений, разделённых запятыми, в адресе перед именем файла и его расширением, это означает, что при необходимости загруженным изображением можно манипулировать через атрибут src элемента <img>, который его запрашивает.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Когда пользователь впервые посещает адрес, содержащий эти преобразования, создаётся и отправляется новая версия изображения, пропорционально масштабированная до ширины 400px (параметр w_400). Этот вновь созданный файл затем кэшируется в CDN, поэтому его можно отправить любому пользователю, запрашивающему тот же адрес, а не создавать заново по требованию.
Хотя провайдеры CDN для изображений нередко предлагают наборы программ, облегчающие использование и интеграцию с разными технологическими стеками, только один этот предсказуемый шаблон адреса позволяет нам легко превратить единственный загруженный файл в работоспособный атрибут 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 в адрес изображения включает эту функцию:
<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. Этот заголовок указывает на форматы, которые браузер способен понять, используя те же медиа-типы, которые мы писали бы для заполнения атрибута type элемента <source>, расположенного внутри <picture>.
Например, добавление параметра f_auto в список преобразований изображения в адресе ресурса явно указывает 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 для изображений предлагают многофункциональные бесплатные тарифные планы для личного использования, создание ресурсов изображений требует полосы пропускания и места для хранения загружаемых файлов, обработки на сервере для преобразования изображений и дополнительного места для кэширования результатов преобразования, поэтому для расширенного использования и приложений с высокой посещаемостью может потребоваться платный тарифный план.