← Images / images / optimization

Возможности

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

В этом руководстве описаны все параметры, которые можно использовать для изменения размера, обрезки, обработки изображений и применения к ним визуальных эффектов.

Используйте возможности оптимизации изображений Cloudflare с помощью:

• Интерфейс URL, применяйте параметры непосредственно в URL изображения, чтобы указать, как изображения должны оптимизироваться при отдаче в браузер.
• Workers, привяжите Images API напрямую к своему Worker или задайте cf.image параметры для fetch подзапрос для построения программных сценариев работы с изображениями.

Cloudflare использует разную структуру URL в зависимости от того, оптимизируете ли вы удалённый или размещённый изображение:

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE-ID>/<VARIANT-OR-OPTIONS>

При использовании Images с Workers, вы можете:

• Задайте собственную логику для порядка операций оптимизации. Например, по умолчанию Images применяет flip перед rotate; вместо этого вы можете использовать привязку Images, чтобы настроить процесс оптимизации и повернуть изображение перед его отражением.
• Используйте пользовательскую схему URL вместо структуры URL по умолчанию.
• Реализуйте согласование содержимого, чтобы динамически подстраивать размер, формат и качество изображения под устройство и состояние сети.

Задаёт, сохранять ли кадры анимации исходных файлов.

• true (по умолчанию), выводит анимированное изображение со всеми кадрами.
• false, преобразует первый кадр анимированного изображения в статичное.

Этот параметр рекомендуется использовать при увеличении изображений или обработке произвольного контента, загружаемого пользователями, так как анимированные GIF могут иметь большой размер файла и увеличивать время загрузки страницы. При использовании format=json, также полезно задать anim=false чтобы получить более быстрый ответ, не учитывая количество кадров.

Оригинал	anim=false

anim=false

cf: {image: {anim: false}}

Задаёт непрозрачный или прозрачный цвет для заполнения пустых или прозрачных пикселей изображения. Значение по умолчанию: %23FFFFFF (белый).

Принимает следующие свойства:

• HEX-код цвета в формате %23RRGGBB.
• Название цвета CSS, например, white или red.
• Одна rgb() или rgba() функция цвета CSS, например rgba(250,40,145,0.5).

Цвет фона виден на изображениях с прозрачными пикселями, в том числе на изображениях, изменённых в размере с помощью fit=pad.

Оригинал 1080 x 720	Вывод 1080 x 900

background=%23ff0000
background=red
background=rgb%28240%2C40%2C145%29

cf: {image: {background: "#RRGGBB"}}
cf: {image: {background: "rgba(240,40,145,0)"}}

Применяет радиус размытия к изображению. Принимает целое число от 0 (без размытия) до 250 (максимальное размытие). Значение по умолчанию: 0.

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

Оригинал	blur=50

blur=50

cf: {image: {blur: 50}}

Добавляет рамку вокруг изображения.

Принимает следующие свойства:

• color, задаёт цвет границы. Принимает любое допустимое значение цвета CSS, например #FF0000, rgb(0,0,0), или red.
• width, задаёт одинаковую границу в пикселях со всех четырёх сторон.
• top, right, bottom, left, задаёт ширину границы в пикселях для отдельных сторон.

Рамка добавляется после изменения размера изображения. Ширина рамки автоматически масштабируется вместе с dpr чтобы обеспечить чёткость на экранах высокого разрешения.

cf: {image: {border: {color: "rgb(0,0,0,0)", top: 5, right: 10, bottom: 5, left: 10}}}
cf: {image: {border: {color: "#FFFFFF", width: 10}}}

Изменяет общую яркость изображения с помощью множителя.

• 1 (по умолчанию), исходная яркость не изменяется.
• < 1.0, затемняет изображение, например 0.5 вдвое менее яркое.
• > 1.0, осветляет изображение, например 2 вдвое ярче.

Оригинал	brightness=0.5	brightness=2

brightness=0.5

cf: {image: {brightness: 0.5}}

Выбирает формат вывода, который сжимается быстрее всего. Принимает fast. Значение по умолчанию отсутствует.

compression=fast отдаёт приоритет скорости кодирования, а не качеству и размеру файла, и обычно имеет приоритет над format чтобы выбрать JPEG вместо более эффективных форматов, таких как AVIF или WebP. Это немного снижает задержку при промахе кеша, но может увеличить размер файла и снизить качество изображения.

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

compression=fast

cf: {image: {compression: "fast"}}

Изменяет общую разницу между самыми тёмными и самыми светлыми участками изображения с помощью множителя.

• 1 (по умолчанию), исходная контрастность не изменяется.
• < 1.0, уменьшает контраст, из-за чего тени становятся светлее, а света темнее.
• > 1.0, увеличивает контраст, из-за чего тени становятся ближе к чёрному, а света ближе к белому.

Оригинал	contrast=0.5	contrast=2

contrast=0.5

cf: {image: {contrast: 0.5}}

Масштабирует выходное разрешение с помощью множителя в соответствии с плотностью экрана пользователя (например, Retina или 4K). Значение по умолчанию: 1, который выдаёт изображение точно с запрошенными шириной и высотой. Максимально поддерживаемое значение: 2.

Современные устройства имеют больше физических пикселей, чем пикселей CSS. Если отдавать изображение размером 300px в контейнере 300px на смартфоне с высокой плотностью пикселей, оно будет выглядеть размытым. Используя dpr=2 указывает Cloudflare отправлять изображение 600px для того же контейнера 300px, что даёт более чёткое и резкое изображение.

dpr можно использовать вместе с srcset к раздача адаптивных изображений.

width=300,height=200,dpr=1	width=300,height=200,dpr=2

dpr=1

cf: {image: {dpr: 1}}

Задаёт способ вписывания изображения в целевую область.

Fit выполняется после настройки width и height размеры изображения.

fit=pad

cf: {image: {fit: "pad"}}

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

Если исходное изображение меньше целевой области, оно возвращается в исходных размерах. Например, при запросе изображения 1080x720 в размере 2000x2000 будет возвращено изображение 1080x720.

Если изображение больше целевой области, оно уменьшается до нужного размера с сохранением исходного соотношения сторон.

В примере ниже изображение 1080x720 изменяется так, чтобы вписаться в целевую область 500x500. Поскольку scale-down сохраняет исходное соотношение сторон (3:2), итоговые размеры выходного изображения составляют 500x333.

Оригинал 1080 x 720 (3:2)	Запрошено 500 x 500 (1:1)	Вывод 500 x 333 (3:2)

Изменяет размер изображения так, чтобы оно было максимально большим в пределах целевого width и height размеры с сохранением исходного соотношения сторон.

Если исходное изображение больше целевой области, оно уменьшается под её размеры (как в режиме scale-down).

Если изображение меньше, оно, наоборот, увеличивается (как в режиме scale-up). Работает с upscale чтобы задать алгоритм увеличения изображения. Чтобы избежать увеличения, используйте scale-down.

Заполняет всю целевую область, уменьшая или увеличивая изображение при необходимости. Итоговая область всегда соответствует запрошенным width и height размеры точно.

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

Работает с upscale чтобы задать алгоритм увеличения изображения.

В примере ниже изображение 1080×720 сначала изменяется до 750×500 (в соответствии с запрошенной высотой), чтобы вписаться в целевую область, а затем обрезается слева и справа до конечных размеров 500x500.

Оригинал 1080 x 720 (3:2)	Запрошено 500 x 500 (1:1)	Вывод 500 x 500 (1:1)

Если исходное изображение меньше целевой области, оно, наоборот, увеличивается. Чтобы избежать увеличения, используйте crop.

Изменяет размер изображения, чтобы заполнить целевую область без увеличения масштаба.

Если исходное изображение меньше целевой области, оно сохраняет исходный размер и соотношение сторон (как в режиме scale-down).

В примере ниже исходное изображение (1080x720) меньше целевой области (1296x1296), поэтому оно сохраняет исходный размер и соотношение сторон.

Оригинал 1080 x 720 (3:2)	Запрошено 1296 x 1296 (1:1)	Вывод 1080 x 720 (3:2)

Если исходное изображение больше целевой области, оно ведёт себя так же, как в режиме cover (заполняет целевую область и обрезает остальное) вместо этого.

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

Если исходное изображение больше целевой области, оно уменьшается до минимального размера, при котором всё ещё заполняет целевые размеры, а затем обрезается под целевое соотношение сторон (как в режиме cover).

Если исходное изображение меньше целевой области, оно сохраняет исходный размер, но обрезается под целевое соотношение сторон. В отличие от режима crop, при котором исходный размер и пропорции меньших изображений сохраняются, aspect-crop всегда обеспечивает соблюдение целевого соотношения сторон.

Например, изображение 612x613 при запросе с размером 1920x1120 не будет увеличено. Оно останется в исходном размере и будет обрезано до 612x357, чтобы соответствовать соотношению сторон 1920:1120. Используйте gravity чтобы задать, какая часть изображения сохраняется при обрезке.

Изменяет размер изображения так, чтобы оно было максимально большим в пределах заданных размеров. При необходимости область вывода будет расширена в соответствии с width и height размеры точно.

Работает с background чтобы заполнить пустые или прозрачные пиксели. Однако для веб-приложений того же визуального результата часто можно добиться с помощью contain вместе с CSS object-fit: contain что позволяет не кодировать заполняющие пиксели в самом изображении.

В примере ниже исходное изображение (1080x720) меньше целевой области (1080x1080), поэтому создаётся пространство для оставшихся пикселей.

Оригинал 1080 x 720 (3:2)	Запрошено 1080 x 1080 (1:1)	Вывод 1080 x 1080 (1:1)

Изменяет размер изображения точно по заданным ширине и высоте, без обрезки краёв и без сохранения пропорций отдельных частей.

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

Оригинал 1080 x 720	Вывод 1080 x 540

Оригинал 1080 x 1080	Вывод 1080 x 540

Изменяет размер изображения, чтобы оно вписывалось в заданные размеры с сохранением исходного соотношения сторон, но никогда не уменьшает изображение. Это противоположность scale-down.

Если исходное изображение больше целевой области, оно возвращается в исходных размерах.

Если исходное изображение меньше целевой области, оно увеличивается под целевые размеры. Используйте upscale чтобы задать алгоритм увеличения изображений: задайте upscale=generate для увеличения масштаба с помощью ИИ или upscale=interpolate (по умолчанию) для бикубической интерполяции.

Отражает изображение по горизонтали, по вертикали или в обоих направлениях.

Принимает следующие значения:

• h, переворачивает изображение по горизонтали.
• v, переворачивает изображение по вертикали.
• hv, переворачивает изображение по горизонтали и по вертикали.

Flip можно использовать вместе с параметром rotate чтобы задать ориентацию изображения. Отражение выполняется до поворота. Например, если применить flip=h,rotate=90, то изображение будет сначала отражено по горизонтали, а затем повёрнуто на 90 градусов.

Оригинал	flip=h	flip=v

flip=h

cf: {image: {flip: "h"}}

Задаёт формат выходного изображения.

Принимает следующие значения:

• auto, автоматически отдаёт наиболее эффективный формат, поддерживаемый запрашивающим браузером. При отдаче изображение в Images, это значение по умолчанию format опцию.
• avif, перекодирует изображение в AVIF, если это возможно. Кодирование в AVIF может выполняться на порядок медленнее, чем в другие форматы. Если изображение слишком велико для быстрого кодирования в AVIF, Cloudflare переключается на WebP или JPEG.
• webp, перекодирует изображение в формат Google WebP. Используйте quality=100 чтобы возвращать формат WebP без потерь.
• jpeg, перекодирует изображение в чересстрочный прогрессивный формат JPEG, при котором данные сжимаются за несколько проходов с постепенным повышением детализации.
• baseline-jpeg, перекодирует изображение в базовый последовательный формат JPEG. Используйте его, если целевые устройства не поддерживают прогрессивный JPEG или другие современные форматы файлов.
• json, выводит информацию об изображении в виде объекта JSON. Она включает такие данные, как размер изображения (до и после изменения), MIME-тип исходного изображения и размер файла.

format=auto
f=auto

cf: {image: {format: "avif"}}

Чтобы использовать format=auto с собственным Worker, нужно разобрать Accept заголовок. См. этот пример Worker для полного обзора настройки Worker для преобразования изображений.

const accept = request.headers.get("accept");
let image = {};

if (/image\/avif/.test(accept)) {
	image.format = "avif";
} else if (/image\/webp/.test(accept)) {
	image.format = "webp";
}

return fetch(url, { cf: { image } });

Изменяет экспозицию изображения с помощью множителя. Гамма регулирует яркость средних тонов, не затрагивая самые тёмные и самые светлые участки изображения.

• 0 и 1 (по умолчанию), исходная гамма не изменяется.
• < 1.0, увеличивает яркость средних тонов, из-за чего изображение выглядит светлее в целом.
• > 1.0, уменьшает яркость средних тонов, из-за чего изображение выглядит темнее в целом.

Оригинал	gamma=0.5	gamma=2

gamma=0.5

cf: {image: {gamma: 0.5}}

Задаёт способ обрезки изображения при использовании с fit=cover и fit=crop. По умолчанию Cloudflare обрезает изображение по центру исходного изображения.

Принимает auto, face, сторону (left, right, top, bottom), а также относительные координаты (XxY).

gravity=auto
g=auto
gravity=face
gravity=left
gravity=0.5x1

cf: {image: {gravity: "auto"}}
cf: {image: {gravity: "face"}}
cf: {image: {gravity: "left"}}
cf: {image: {gravity: {x:0.5, y:0.2}}}

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

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

Оригинал	Обрезка по умолчанию	gravity=auto

Автоматически задаёт точку фокуса на основе лиц на изображении.

Это можно комбинировать с zoom чтобы задать, насколько плотно изображение обрезается по лицу.

Оригинал	Обрезка по умолчанию	gravity=face

Фотография: Suad Kamardeen (@suadkamardeen) on Unsplash ↗

Задаёт сторону изображения, которую нельзя обрезать.

В примере ниже изображение 1080x720 обрезается до области 1080x400, начиная от нижнего края:

Оригинал	gravity=bottom

Задаёт точку фокуса (X,Y), чтобы относительные координаты выходного изображения соответствовали относительным координатам исходного изображения. Принимает пару координат в формате XxY, где X и Y представляют собой десятичные значения от 0.0 и 1.0.

• Значение по горизонтали (X), 0.0 это левый край, а 1.0 это правый край изображения.
• Значение по вертикали (Y), 0.0 это верхний край, а 1.0 это нижний край изображения.

В примере ниже изображение размером 900x900 обрезается до 300x900 с использованием точки гравитации 0.33x0.5:

• И у исходного изображения, и у целевой области точки гравитации будут заданы на 1/3 ширины от левого края и 1/2 высоты от верхнего края.
• Относительные координаты точки гравитации выходного изображения совпадают с относительными координатами исходного изображения. То есть целевая область располагается так, что ее точка гравитации оказывается в той же относительной позиции исходного изображения (0.33, 0.5).
• Затемнённые части изображения показывают область за пределами запрошенного результата, которая будет обрезана.
• Итоговый обрезанный результат содержит область 300x900 вокруг точки гравитации (0.33, 0.5).

Оригинал	Align	Crop	Вывод

При оптимизации через Workers используйте объект {x, y} чтобы указать координаты. Например, {fit: "cover", gravity: {x:0.5, y:0.2}} обрежет каждую сторону, чтобы сохранить максимум пространства вокруг точки на высоте 20% от высоты исходного изображения.

Задаёт высоту выходного изображения в пикселях в виде положительного целого числа. По умолчанию Cloudflare использует исходную высоту входного изображения.

Когда height задано, точное поведение зависит от fit параметр.

height=250
h=250

cf: {image: {height: 250}}

Определяет объём скрытых метаданных (EXIF), которые сохраняются для изображения JPEG. Для всех остальных выходных форматов (например, WebP или PNG) метаданные всегда удаляются.

Цветовые профили и поворот EXIF применяются к изображению, даже если метаданные удаляются.

Принимает следующие значения:

• copyright (по умолчанию), удаляет все метаданные, кроме тега авторских прав EXIF.
• keep, сохраняет большую часть метаданных EXIF, включая данные о местоположении GPS, если они есть.
• none, удаляет все скрытые метаданные EXIF.

metadata=none

cf: {image: {metadata: "none"}}

Перенаправляет пользователя на URL исходного изображения, если критическая ошибка не позволяет преобразовать изображение. Принимает redirect. Значение по умолчанию отсутствует.

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

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

onerror=redirect

Задаёт качество выходного изображения для форматов JPEG, WebP и AVIF в виде фиксированного значения или уровня перцептивного качества. Значение по умолчанию: 85.

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

Если выходной формат PNG, явный параметр quality параметр позволяет использовать вариант формата PNG8 (палитровый).

quality=50
quality=low
q=50

cf: {image: {quality: 50}}
cf: {image: {quality: "high"}}

Поворачивает изображение на заданное количество градусов. Принимает 90, 180, или 270. Значение по умолчанию: 0 (без поворота).

Поворот выполняется до изменения размера; width и height параметры будут относиться к осям после поворота изображения.

Оригинал	rotate=180

rotate=90

cf: {image: {rotate: 90}}

Изменяет насыщенность цвета изображения с помощью множителя.

• 0, полностью обесцвечивает изображение (оттенки серого).
• < 1.0, снижает насыщенность цвета. Например, 0.5 вдвое менее насыщенное.
• 1 (по умолчанию), исходная насыщенность не изменяется.
• > 1.0, увеличивает насыщенность цвета. Например, 2 вдвое насыщеннее.

Оригинал	saturation=0	saturation=2

saturation=0.5

cf: {image: {saturation: 0.5}}

Автоматически выделяет объект на изображении, заменяя фон прозрачными пикселями. Принимает foreground. Значение по умолчанию отсутствует.

Эта функция использует модель BiRefNet с открытым исходным кодом через Workers AI. Подробнее о продукте Cloudflare подход к ответственному ИИ ↗.

Оригинал	segment=foreground

segment=foreground

cf: {image: {segment: "foreground"}}

Применяет фильтр резкости для улучшения чёткости краёв на изображении. Принимает десятичное значение от 0 (без повышения резкости) до 10 (максимальная резкость). Значение по умолчанию: 0. Рекомендуемое значение для уменьшенных изображений: 1.

Оригинал	sharpen=5

sharpen=2

cf: {image: {sharpen: 2}}

Переопределяет quality значение при обнаружении медленного соединения. Принимает те же фиксированные или перцептивные настройки, что и качество. Значение по умолчанию отсутствует.

Чтобы определять медленные соединения, включите в HTTP-заголовке любые из следующих client hints:

accept-ch: rtt, save-data, ect, downlink

slow-connection-quality применяется, если присутствует client hint и выполняется любое из следующих условий:

• rtt ↗: Больше 150ms.
• save-data ↗: Значение "on".
• ect ↗: Одно из следующих значений: slow-2g|2g|3g.
• downlink ↗: Меньше 5Mbps.

slow-connection-quality=50
scq=50

Удаляет пиксели по краям изображения.

Эта функция позволяет обрезать изображение по цвету краев или на заданное количество пикселей с одной или нескольких сторон.

Trim учитывает dpr и выполняется до изменения размера и поворота.

Автоматически обрезает края изображения по цв ету рамки.

trim=border можно дополнительно настроить с помощью следующих параметров:

• trim.border.color, выбирает цвет границы для обрезки. Принимает любой цвет CSS в современном синтаксисе CSS4. Если не указан, цвет определяется автоматически.
• trim.border.tolerance, задаёт, насколько близко по цвету должны совпадать определяемые пиксели. Принимает целое число от 0 (совпадение не обязательно) и 255 (точное совпадение обязательно).
• trim.border.keep, задаёт количество пикселей исходной границы, которые остаются необрезанными.

Задаёт количество пикселей, удаляемых с краёв изображения. Принимает четыре значения, разделённых точкой с запятой, чтобы задать обрезку сразу для всех четырёх сторон изображения.

Все значения обрезки принимают целое число (количество пикселей) либо десятичную дробь в диапазоне от 0 и 1 представляющее собой долю размера изображения. Например, 0.25 обрезает 25% с этой стороны.

Trim также можно применить к определенной стороне с помощью следующих параметров:

• trim.top, удаляет пиксели сверху изображения.
• trim.left, удаляет пиксели слева от изображения.
• trim.height, задаёт высоту изображения от верхнего края, обрезая всё, что ниже.
• trim.width, задаёт ширину изображения от левого края, обрезая всё, что правее.

trim=border
trim.height=800
// This sets the height of the image to 800 pixels from the top of the image, then trims everything below that point

trim.left=800
// This removes 800 pixels from the left of the image

trim=0.1;0.2;0.1;0.2
// This trims 10% from the top and bottom, and 20% from the left and right

trim.top=0.25
// This trims 25% of the image height from the top

cf: {image: {trim: {top: 12, right: 78, bottom: 34, left: 56, width: 678, height: 678}}}
// Using decimals to trim 10% from each side:
cf: {image: {trim: {top: 0.1, right: 0.1, bottom: 0.1, left: 0.1}}}

Определяет алгоритм, используемый при увеличении изображения. Этот параметр работает с любым fit режим с увеличением размера, например contain, cover, а также scale-up. Это не имеет эффекта, если fit=scale-down или когда целевые размеры меньше исходных.

Принимает следующие значения:

• interpolate (по умолчанию), использует бикубическую интерполяцию, которая может снизить качество изображения. Это поведение по умолчанию, если upscale не указано.
• generate, использует масштабирование на основе ИИ (ESRGAN ↗) чтобы получить более чёткие и детализированные результаты при увеличении изображений.

Когда upscale=generate указан, модель ИИ выполняет один проход с ближайшим поддерживаемым масштабом (2x или 4x), а затем подгоняет изображение под точные целевые размеры. Коэффициенты масштабирования свыше 4x обрабатываются так: сначала увеличение с помощью ИИ до 4x, затем бикубическая интерполяция для оставшейся части.

upscale=generate

cf: {image: {upscale: "generate"}}

Задаёт ширину выходного изображения в пикселях в виде положительного целого числа. По умолчанию Cloudflare использует исходную ширину входного изображения.

Когда width задано, точное поведение зависит от fit параметр.

Принимает следующие значения:

• Число в пикселях (например, 250).
• auto, автоматически отдаёт изображение с оптимальной шириной на основе доступной информации о браузере и устройстве. Принимает wbreakpoints (client hints), wmobile (определение по user-agent), а также wdesktop (определение по user-agent) в качестве подпараметров.

width=250
w=250

cf: {image: {width: 250}}

Когда width=auto указан, Cloudflare изменяет размер изображения на основе client hints (передаваемых браузером) или, если их нет, по данным user-agent.

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

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

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

wbreakpoints=320;768;960;1920 // Changes the largest breakpoint to 1920 pixels
wbreakpoints=320;768;960;1200;1920 // Adds another breakpoint at 1920 pixels

cf: {image: {wbreakpoints: "320;768;960;1920"}}

Задаёт, насколько плотно изображение обрезается по обнаруженным лицам при использовании вместе с gravity=face Допустимый диапазон значений от 0.0 (включает как можно больше фона) и 1.0 (обрезает изображение как можно ближе к лицу). Значение по умолчанию: 0.

zoom=0.1

cf: {image: {zoom: 0.5}}

В идеале размеры изображения должны точно соответствовать размеру, в котором оно отображается на странице. Если страница содержит миниатюры с разметкой вида <img width="200" …>, то изображения следует изменить до размера width=200.

Чтобы раздача адаптивных изображений, вы можете использовать HTML srcset атрибут, чтобы позволить провайдеру выбрать наиболее оптимальный размер. Если вы не можете использовать <img srcset> разметку и вынуждены жёстко задавать конкретные максимальные размеры, Cloudflare рекомендует следующие размеры:

• Максимум 1920 пикселей для браузеров на настольных компьютерах.
• Максимум 960 пикселей для планшетов.
• Максимум 640 пикселей для мобильных телефонов.

Например, fit=scale-down,width=1920 задаёт максимальный размер 1920px и не даёт изображению увеличиваться без необходимости.

Определить тип устройства можно, включив CF-Device-Type заголовок через Cache Rule.

При оптимизации с помощью Images исходное изображение запрашивается с сервера источника и кешируется по обычным правилам HTTP кеширования, Cache-Control заголовок и так далее. Запросы для нескольких разных размеров изображения, скорее всего, будут повторно использовать кешированное исходное изображение без дополнительных передач с исходного сервера.

Если Custom Cache Keys используются для исходного изображения, оно может не кешироваться, что приведёт к увеличению числа обращений к источнику.

Оптимизированные изображения подчиняются тем же правилам кэширования, что и исходное изображение, из которого они были изменены, за исключением того, что минимальное время кэширования составляет один час. Если вам нужно, чтобы изображения обновлялись чаще, добавьте must-revalidate к Cache-Control заголовок. Сервис Images поддерживает ревалидацию кеша, поэтому мы рекомендуем передавать изображения с Etag заголовок. См. Документация по кешированию для получения дополнительной информации.

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