← Images / images / optimization

Создание адаптивных изображений

Адаптивный дизайн масштабирует медиаэлементы под размер экрана, на котором они отображаются.

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

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

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

На обычном экране это соответствие 1:1. На экранах с высокой плотностью пикселей (например, Retina, 4K) каждый пиксель CSS отображается с помощью нескольких физических пикселей: например, 4 физических пикселя на экране с плотностью 2x и 9 на экране с плотностью 3x.

Это соотношение, известное как device pixel ratio (DPR), определяет резкость изображения. Если изображение размером 960px выводится на экране 2x, браузер растягивает его до 1920 физических пикселей, из-за чего оно выглядит размытым.

Чтобы изображения оставались четкими, можно предоставить отдельную версию с более высоким разрешением для экранов с высоким DPI, используя dpr параметр:

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

При встраивании изображения с помощью тега <img> элементе можно использовать его srcset ↗ атрибут, чтобы предоставить браузеру список одного и того же изображения в разных размерах.

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

В приведенном ниже фрагменте показано, как srcset можно использовать внутри <img> тег, чтобы отдавать один из двух возможных размеров в зависимости от плотности пикселей устройства пользователя:

<img
	src="portrait-800w.jpg"
	srcset="
		portrait-1600.jpg 2x,
	"
/>

Вместо того чтобы заранее генерировать каждый размер, используйте Images и направьте каждый srcset запись для того же исходного изображения с другим width и дескриптор плотности пикселей (например, 2x). После того как браузер выберет подходящую ширину для коэффициента пикселей устройства пользователя, Cloudflare динамически создаёт изменённую версию по запросу:

<img
	src="/cdn-cgi/image/fit=contain,width=960/assets/product.jpg"
	srcset="/cdn-cgi/image/fit=contain,width=1920/assets/product.jpg 2x"
/>

В приведённом выше примере src атрибут содержит изображение для дисплеев 1x (например, мониторов HD/1080p). srcset атрибут добавляет более крупное изображение с высоким DPI для дисплеев 2x (например, большинства мобильных устройств, настольных 4K дисплеев). Используйте исходные изображения высокого разрешения, поскольку масштабирование изображения низкого разрешения увеличивает размер файла без улучшения качества.

Дескрипторы плотности пикселей используются, когда изображение имеет фиксированный размер CSS (например, фото товара шириной 960px) и ширина области просмотра не имеет значения. В этом случае вы точно знаете, сколько пикселей CSS займёт изображение, и хотите предоставить версии с более высоким разрешением для экранов с высоким DPI.

Однако если изображение масштабируется вместе с областью просмотра, то есть его CSS-размер меняется в зависимости от ширины экрана (например, width: 100%, width: 50vw), затем используйте дескриптор ширины (w) вместо этого, чтобы задать диапазон ширин:

<img
	width="100%"
	srcset="
		/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg   320w,
		/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg   640w,
		/cdn-cgi/image/fit=contain,width=960/assets/hero.jpg   960w,
		/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w,
		/cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w
	"
	src="/cdn-cgi/image/width=960/assets/hero.jpg"
/>

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

По умолчанию браузер считает, что изображение заполняет всю область просмотра. Если изображение занимает только часть экрана, можно использовать sizes чтобы сообщить браузеру его фактическую ширину:

<!-- Image fills 50% of the viewport -->
<img style="width: 50vw" srcset="..." sizes="50vw" />

Если размер изображения может меняться в зависимости от медиазапросов или других свойств CSS (например, max-width), затем укажите все условия в sizes атрибут:

<img
	style="max-width: 640px"
	srcset="
		/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg   320w,
		/cdn-cgi/image/fit=contain,width=480/assets/hero.jpg   480w,
		/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg   640w,
		/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w
	"
	sizes="(max-width: 640px) 100vw, 640px"
/>

В приведённом выше примере:

• Если размер экрана меньше 640px, изображение заполняет всю область просмотра.
• Если размер экрана превышает 640px, изображение масштабируется вместе с областью просмотра, но не более 640px.
• На экране с плотностью 2x при ширине больше 640px браузеру нужно 1280 физических пикселей, чтобы заполнить макет шириной 640px, поэтому он выбирает вариант 1280w.

С srcset, вы точно контролируете, какие размеры доступны, но при этом придётся обновлять HTML для каждого изображения.

С другой стороны, width=auto использует другой подход: Cloudflare сама определяет нужную ширину для каждого запроса на основе одного URL:

/cdn-cgi/image/width=auto/assets/hero.jpg

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

Если запрос включает width=auto, Cloudflare определяет ширину на основе размера экрана, используя client hints, если они отправлены, или определение user-agent в качестве запасного варианта.

Браузеры, поддерживающие client hints (Chrome, Edge, Opera), передают ширину окна просмотра в заголовке запроса. Затем Cloudflare считывает это значение и выбирает подходящий размер изображения.

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

Точки перелома по умолчанию для client hints: 320, 768, 960, а также 1200 пикселей.

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

Переопределить контрольные точки по умолчанию можно с помощью wbreakpoints подпараметр, который принимает положительные целые числа, разделённые точкой с запятой.

Client hints дают Cloudflare наиболее точную информацию, но требуют, чтобы сайт явно включил эту функцию. Без них width=auto переключается на определение по user-agent.

Client hints можно включить одним из следующих способов:

HTML <meta> тег

Добавьте следующее в <head> страницы раньше всех остальных элементов:

<meta
	http-equiv="Delegate-CH"
	content="sec-ch-dpr {ZONE}; sec-ch-viewport-width {ZONE}"
/>

Заголовки HTTP-ответа

Добавьте следующие заголовки в ответ HTML:

critical-ch: sec-ch-viewport-width, sec-ch-dpr
permissions-policy: ch-dpr=("{ZONE}"), ch-viewport-width=("{ZONE}")

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

Размеры по умолчанию для определения user-agent:

Переопределить размеры по умолчанию можно с помощью wmobile и wdesktop подпараметры, которые принимают положительные целые числа.