← Images / images / optimization

Vytváření responzivních obrázků

Responzivní design přizpůsobuje mediální prvky obrazovce, na které se zobrazují.

Bez toho mohou obrázky přetékat mimo svůj kontejner a rozbíjet rozvržení na malých obrazovkách, na displejích s vysokou hustotou pixelů vypadat rozmazaně a plýtvat přenosovým pásmem tím, že si každé zařízení musí stáhnout stejný, zbytečně velký soubor.

Pomocí Images můžete obrázky automaticky přizpůsobit velikostí tak, aby se optimálně zobrazovaly na každém zařízení. Cloudflare podporuje dva způsoby, jak na požadavek poskytovat responzivní obrázky:

Obrazovka zobrazuje obrázky pomocí fyzických pixelů (jednotlivých bodů, které vidíte), zatímco prohlížeč pracuje s pixely CSS (abstraktní jednotkou používanou pro rozvržení stránky).

Na standardním displeji si tyto hodnoty odpovídají 1:1. Na displejích s vysokou hustotou pixelů (například Retina, 4K) se každý CSS pixel vykresluje pomocí více fyzických pixelů, například 4 fyzické pixely na displeji 2x a 9 na displeji 3x.

Tento poměr, poměr pixelů zařízení (device pixel ratio, DPR), určuje, jak ostrý bude obrázek. Když na displeji s hustotou 2x zobrazíte obrázek 960px, prohlížeč jej roztáhne na 1920 fyzických pixelů, takže bude vypadat rozmazaně.

Aby obrázky zůstaly ostré, můžete pro obrazovky s vysokým rozlišením (high-DPI) poskytnout samostatnou verzi ve vyšším rozlišení pomocí dpr parametr:

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

Pokud obrázek vkládáte pomocí <img> prvku můžete použít jeho srcset ↗ atribut, který prohlížeči poskytne seznam téhož obrázku v různých velikostech.

Prohlížeč vyhodnotí velikost obrazovky, hustotu pixelů a stav sítě a poté vybere jedinou nejlépe odpovídající variantu.

Následující úryvek ukazuje, jak srcset lze použít v rámci <img> značku, aby obsluhovala jednu ze dvou možných velikostí podle poměru pixelů zařízení uživatele:

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

Místo předgenerování každé velikosti použijte Images a nasměrujte každý srcset záznam u stejného zdrojového obrázku s jiným width a deskriptor hustoty pixelů (například 2x). Jakmile prohlížeč vybere správnou šířku pro poměr pixelů zařízení uživatele, Cloudflare na vyžádání dynamicky vygeneruje verzi se změněnou velikostí:

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

Ve výše uvedeném příkladu src atribut obsahuje obrázek pro 1x displeje (například monitory HD/1080p). srcset atribut přidává větší obrázek s vysokým rozlišením DPI pro 2x displeje (například většina mobilních zařízení, 4K stolní displeje). Používejte zdrojové obrázky ve vysokém rozlišení, protože zvětšení obrázku s nízkým rozlišením zvětší velikost souboru, aniž by se zlepšila kvalita.

Deskriptory hustoty pixelů se používají v případě, že má obrázek pevnou velikost CSS (např. produktová fotografie s rozměrem 960px), takže na šířce viewportu nezáleží. V takovém případě přesně víte, kolik CSS pixelů bude mít obrázek, a chcete pro obrazovky s vysokým rozlišením poskytnout verze ve vyšším rozlišení.

Pokud se však obrázek přizpůsobuje velikosti okna, tedy pokud se jeho velikost v CSS mění podle šířky obrazovky (například width: 100%, width: 50vw), a poté použijte deskriptor šířky (w), abyste zadali rozsah šířek:

<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 hodnoty sdělují prohlížeči šířku každé možnosti v pixelech. Prohlížeč při výběru nejlepší shody zohledňuje jak šířku viewportu, tak hustotu displeje.

Prohlížeč ve výchozím nastavení předpokládá, že obrázek vyplňuje celý viewport. Pokud obrázek zabírá jen část obrazovky, můžete použít sizes aby prohlížeči sdělil, jak je ve skutečnosti široký:

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

Pokud může mít obrázek různou velikost v závislosti na mediálních dotazech nebo jiných vlastnostech CSS (například max-width), poté zadejte všechny podmínky v sizes atribut:

<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"
/>

Ve výše uvedeném příkladu:

• Pokud je velikost obrazovky menší než 640px, obrázek vyplní celé okno prohlížeče.
• Pokud je velikost obrazovky větší než 640px, obrázek se přizpůsobuje velikosti okna a je omezen na 640px.
• Na displeji s hustotou 2x nad 640px potřebuje prohlížeč k vyplnění šířky rozvržení 640px celkem 1280 fyzických pixelů, a proto zvolí položku 1280w.

S srcset, máte přesnou kontrolu nad tím, které velikosti jsou k dispozici, což ale vyžaduje úpravu HTML u každého obrázku.

Na druhou stranu width=auto používá jiný přístup, kdy Cloudflare určuje správnou šířku pro každý požadavek z jediné URL:

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

To je užitečné zejména při optimalizaci vzdálených obrázků pomocí transformační postupy, kde můžete použít width=auto v rámci celé zóny, aniž byste museli upravovat jakýkoli markup.

Pokud požadavek obsahuje width=auto, Cloudflare určí šířku na základě velikosti obrazovky pomocí client hints, pokud jsou odeslány, případně jako záložní možnost pomocí detekce user-agentu.

Prohlížeče, které podporují client hints (Chrome, Edge, Opera), odesílají šířku viewportu v hlavičce požadavku. Cloudflare tuto hodnotu přečte a vybere správnou velikost obrázku.

Cloudflare negeneruje jedinečný obrázek pro každou možnou šířku viewportu, ale zvolí nejmenší breakpoint, který se rovná zjištěné šířce obrazovky nebo je větší.

Výchozí breakpointy pro client hints jsou: 320, 768, 960, a 1200 pixelů.

Následující tabulka ukazuje šířky, které Cloudflare zvolí na základě výchozích breakpointů. Pokud zjištěná šířka viewportu překročí největší breakpoint, obrázek se doručí v tomto největším breakpointu.

Výchozí breakpointy můžete přepsat pomocí wbreakpoints podparametr, který přijímá kladná celá čísla oddělená středníky.

Client hints poskytují Cloudflare nejpřesnější informace, ale váš web je musí aktivně povolit. Bez nich width=auto přechází zpět na detekci pomocí user-agenta.

Client hints můžete povolit jedním z následujících způsobů:

HTML <meta> tag

Přidejte následující do <head> vaší stránky před všemi ostatními prvky:

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

HTTP hlavičky odpovědi

Do odpovědi HTML přidejte tyto hlavičky:

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

Pokud nejsou k dispozici client hints, Cloudflare zařadí zařízení jako mobilní nebo stolní na základě řetězce user-agent a zvolí odpovídající velikost.

Výchozí velikosti pro detekci user-agenta jsou:

Výchozí velikosti můžete přepsat pomocí wmobile a wdesktop podparametry, které přijímají kladná celá čísla.