← Images / images / optimization / transformations

Создание потоков преобразования

Потоки позволяют автоматически применять оптимизацию изображений к запросам в вашей зоне.

Каждый поток сопоставляет набор условных триггеров (например, изображение в формате JPEG или PNG) с параметрами оптимизации (например, перекодирование в AVIF).

Если запрос на изображение соответствует потоку, Cloudflare прозрачно перенаправляет его через сервис Images и отдаёт оптимизированный результат.

Для миграции с других сервисов оптимизации изображений (например, Fastly) можно использовать готовые flow, либо создавать собственные.

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

На данный момент Cloudflare поддерживает потоки для Fastly Image Optimizer. При включении Cloudflare автоматически преобразует параметры Fastly в их эквиваленты Cloudflare. Например:

• Параметр Fastly brightness принимает диапазон от -100 к 100, в то время как Cloudflare brightness работает как множитель. Значение масштабируется соответственно.
• Параметр Fastly orient сопоставляется с flip и rotate параметры.

A пользовательский Flow позволяет задавать собственные условия и действия для оптимизации изображений.

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

• Автоматическое преобразование формата, перекодируйте все изображения на всём сайте в современные форматы, такие как AVIF или WebP.
• Адаптивное масштабирование, автоматически изменяйте размер изображений в зависимости от устройства пользователя.
• Оптимизация на основе каталогов, задайте единый размер для всех изображений по определённому пути, например 100x100 для изображений, путь которых содержит /thumbnail.

Прежде чем настраивать процесс, убедитесь, что для вашей зоны включены transformations в разделе Изображения > Преобразования в Панель управления Cloudflare ↗.

Когда на вашей зоне запрашивается изображение, Cloudflare проверяет, соответствует ли запрос условиям одного из настроенных потоков:

• Потоки оцениваются сверху вниз, в том порядке, в котором они отображаются в панели управления.
• Если запрос соответствует более чем одному потоку, выполнится только первый подходящий поток.
• Если ни один поток не подходит, запрос передаётся на ваш источник без изменений.
• Чтобы настроить приоритет, порядок flows можно изменить в Dashboard.

Если запрос соответствует условиям потока, Cloudflare переписывает URL, чтобы направить его через сервис Images с указанными параметрами:

• Пользовательский поток запускается только для запросов к поддерживаемые расширения изображений. HTML-страницы, CSS-файлы и другие файлы, не являющиеся изображениями, никогда не затрагиваются.
• Поток провайдера оценивает запросы на основе параметров оптимизации, специфичных для конкретного провайдера. Например, поток провайдера Fastly запускается только тогда, когда запрос содержит такие параметры, как ?width, ?height, или ?fit. Cloudflare игнорирует все нераспознанные параметры.

В жизненном цикле запроса потоки обрабатываются после стандартного HTTP правила перенаправления:

• Любые существующие правила перезаписи URL или переадресации применяются раньше, чем Images обрабатывает запрос, что может повлиять на результат сопоставления.
• Потоки включают встроенную защиту от зацикливания. Если запрос уже поступает от сервиса Images, поток не сработает повторно на этот подзапрос.

На данный момент Cloudflare поддерживает потоки для миграции с Fastly Image Optimizer.

Чтобы добавить provider flow:

1. Войдите в Панель управления Cloudflare ↗ и выберите свой аккаунт.
2. Перейдите в Изображения > Преобразования и выберите свою зону.
3. Выберите Автоматизация вкладке, а затем выберите Add provider flow.
4. Выберите Fastly в качестве провайдера.
5. Save в свой процесс.

В панели управления Cloudflare перейдите в Изображения > Преобразования ↗ и выберите зону, в которой нужно настроить пользовательский процесс.

Перейдите в Автоматизация и выберите Add custom flow чтобы открыть боковую панель, где можно настроить процесс.

Пользовательский поток запускается, когда входящий запрос соответствует всем условиям, настроенным в этом потоке:

• Расширение файла, сопоставляйте запросы для всех форматов изображений или только для определённых расширений файлов, таких как JPEG, PNG или WebP.
• Путь URL, сопоставляйте запросы, у которых путь URL соответствует указанному шаблону, например /images/* или /assets/thumbnails/*.
• Параметр запроса, сопоставляйте запросы, у которых строка запроса содержит указанный параметр, например orient.

Затем определите параметры оптимизации, которые должны применяться при запуске потока.

В рамках одного flow можно применить несколько действий. Полный список доступных параметров см. в Возможности.

Ключевые параметры для большинства сценариев использования:

Задайте format=auto чтобы автоматически отдавать изображения в наиболее эффективном формате (например, AVIF, WebP) для каждого запрашивающего браузера.

Если браузер не поддерживает AVIF, Cloudflare переключается на WebP или стандартный формат.

См. format

Управляйте качеством сжатия выходного изображения. Принимает одно из следующих значений:

• A фиксированное значение от 1 (низкое качество, малый размер файла) до 100 (высокое качество, большой размер файла).
• A уровень воспринимаемого качества: high, medium-high, medium-low, или low.

См. quality

Переопределить quality при обнаружении медленного соединения через client hints. Принимает те же фиксированные или перцептивные значения, что и quality. Благодаря этому пользователи с медленным соединением получают изображения более низкого качества и меньшего размера, при этом пользователи с быстрым соединением не затрагиваются.

См. slow-connection-quality

Задайте width=auto чтобы автоматически подбирать размер изображений в зависимости от запрашивающего устройства.

Cloudflare определяет оптимальную ширину, используя либо Client Hints (отправляются браузером) либо, в качестве запасного варианта, определение по user-agent.

Вы можете точно настроить width=auto поведение с помощью следующих подпараметров:

Чтобы узнать, как width=auto работает, см. наше руководство по раздача адаптивных изображений.

Выберите Save на боковой панели, чтобы добавить собственный поток, затем выберите Save в списке потоков, чтобы включить свой поток.