← Справочные архитектуры / reference-architecture / diagrams / content-delivery
Оптимизация доставки изображений с помощью Cloudflare image resizing и R2
Введение
Оптимизация доставки изображений на сайтах критически важна для улучшения пользовательского опыта. Поскольку изображения часто составляют наибольшую часть данных сайта, они существенно влияют на время загрузки страниц, позиции в поисковой выдаче, стоимость доставки и общую производительность. Эта диаграмма эталонной архитектуры покажет вам простое, масштабируемое и высокопроизводительное решение. Достаточно изменить строку URL, чтобы указать размер и качество изображения, и оптимизированное изображение будет кешировано и доставлено любому пользователю, запросившему этот формат. Ниже перечислены компоненты Cloudflare, задействованные в этом решении:
- Cloudflare CDN ↗ - Используйте Глобальная сеть Cloudflare ↗ для кеширования преобразованных изображений и их быстрой и надёжной доставки конечным пользователям.
- Cloudflare Images ↗ - Используйте Cloudflare Images для изменения размера, оптимизации и преобразования изображений, которые хранятся в решении для объектного хранения, например Cloudflare R2. Преобразования выполняются на основе URL особого формата, для поддержки которого приложению требуется минимальная доработка.
- Cloudflare R2 Object Storage ↗ - R2 позволяет пользователям хранить большой объем неструктурированных данных и в этом сценарии используется для хранения исходных изображений (лучшего качества) для преобразования.
- Cloudflare Transform Rules - если вы переходите на Cloudflare с другого решения, Transform Rules позволяют переписать URL из синтаксиса другого решения в специфичный для Cloudflare синтаксис, что снижает сложность миграции.
Доставка изображений с Cloudflare Image Resizing и R2
- Запрос пользователя: Пользователь отправляет HTTP-запрос на изображение (image.jpg), указывая преобразования, такие как width и quality, непосредственно в URL в виде списка параметров, разделённых запятыми.
- Cache Hit: Cloudflare обрабатывает запрос в точке присутствия, ближайшей к пользователю. Сначала проверяется, есть ли нужное преобразование изображения в кеше Cloudflare. Если да, изображение сразу возвращается пользователю и дальнейшая обработка не требуется. Если нет, запрос переходит к следующему шагу.
- Transform Rules (необязательно): если вы переходите с другого решения для работы с изображениями, может потребоваться переписать путь URL и строку запроса с помощью rewrite, чтобы избежать сложного рефакторинга на уровне приложения при миграции. Поддерживаются как Dynamic, так и Static rewrites, при этом dynamic rewrites поддерживают сложные выражения для множества вариантов переписывания URL.
- Cache MISS - R2: Если запрошенное изображение отсутствует в кеше Cloudflare, запрос отправляется на источник, которым в этом сценарии является R2 Object Storage от Cloudflare платформа. В R2 хранятся только оригинальные изображения, изменённые по размеру варианты в бакете R2 не сохраняются, что упрощает работу с R2 без правил жизненного цикла объектов.
- Transform Image: В зависимости от синтаксиса URL, отправленного на шаге 1 или преобразованного на шаге 3, Cloudflare Images преобразует изображение и отправляет его в кеш, прежде чем вернуть конечному пользователю запрошенное изображение.
Справочник по синтаксису URL для Image Resizing
Изображения легко конвертировать и изменять в размере, запрашивая их через специально сформированный URL. В этом разделе объясняется структура URL для трансформации изображений: со ссылкой на диаграмму разбирается каждый компонент URL:
- Часть 1 - Ваше конкретное доменное имя в Cloudflare, то есть зона (Zone), которую вы подключили к Cloudflare и с которой обслуживается ваш сайт или изображения. Например, https://www.mywebsite.com/ ↗
- Часть 2 - фиксированный префикс, указывающий, что это специальный путь, обрабатываемый встроенным Worker Cloudflare.
- Часть 3 - список параметров изображения через запятую, например width=80,quality=75
- Часть 4 - абсолютный путь на origin сервере. Например: /uploads/image.jpg
Итоговый URL, используемый в запросе, будет выглядеть так:
https://www.mywebsite.com/cdn-cgi/image/width=80,quality=75/uploads/image.jpg