Возможно, вы уже знакомы с основной концепцией сети доставки контента (CDN): сеть распределенных, но взаимосвязанных серверов, которая быстро и эффективно доставляет ресурсы пользователям. Когда файл загружается провайдеру CDN, дубликат будет создан на других узлах сети CDN по всему миру. Когда пользователь запрашивает файл, данные будут отправлены узлом, географически ближайшим к этому пользователю, что снижает задержку. Распределенная природа CDN также обеспечивает избыточность в случае сбоев сети или сбоя оборудования, а также балансировку нагрузки для смягчения пиков трафика.
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-адрес, содержащий эти преобразования, создается и отправляется новая версия изображения, пропорционально масштабированная до ширины 400 пикселей ( 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_ , сокращение от «качество», за которым следует числовое сокращение уровня сжатия:
<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 . Этот заголовок указывает кодировки, которые браузер способен понять, используя те же типы мультимедиа, которые мы использовали бы для заполнения атрибута 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 изображений обычно предлагают многофункциональные бесплатные планы для личного использования, создание ресурсов изображений требует пропускной способности и места для хранения для загрузки, обработки на сервере для преобразования изображений и дополнительного места для кэшированных результатов преобразования — поэтому расширенное использование и приложениям с высоким трафиком может потребоваться платный план.
,Возможно, вы уже знакомы с основной концепцией сети доставки контента (CDN): сеть распределенных, но взаимосвязанных серверов, которая быстро и эффективно доставляет ресурсы пользователям. Когда файл загружается провайдеру CDN, дубликат будет создан на других узлах сети CDN по всему миру. Когда пользователь запрашивает файл, данные будут отправлены узлом, географически ближайшим к этому пользователю, что снижает задержку. Распределенная природа CDN также обеспечивает избыточность в случае сбоев сети или сбоя оборудования, а также балансировку нагрузки для смягчения пиков трафика.
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-адрес, содержащий эти преобразования, создается и отправляется новая версия изображения, пропорционально масштабированная до ширины 400 пикселей ( 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_ , сокращение от «качество», за которым следует числовое сокращение уровня сжатия:
<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 . Этот заголовок указывает кодировки, которые браузер способен понять, используя те же типы мультимедиа, которые мы использовали бы для заполнения атрибута 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 изображений обычно предлагают многофункциональные бесплатные планы для личного использования, создание ресурсов изображений требует пропускной способности и места для хранения для загрузки, обработки на сервере для преобразования изображений и дополнительного места для кэшированных результатов преобразования — поэтому расширенное использование и приложениям с высоким трафиком может потребоваться платный план.