← Images / images / optimization

Funkce

Cloudflare umožňuje vývojářům optimalizovat obrázky ve velkém měřítku díky dynamickému generování různých verzí v reálném čase.

Tento průvodce popisuje všechny parametry, které lze použít ke změně velikosti, oříznutí, úpravě a aplikaci vizuálních efektů na obrázky.

Možnosti optimalizace obrázků od Cloudflare můžete využít prostřednictvím:

• Rozhraní URL : Zadejte parametry přímo v URL adrese obrázku a určete tak, jak se mají obrázky optimalizovat při doručení do prohlížeče.
• Workers : Připojte Images API přímo k vašemu Workeru, nebo nastavte cf.image u fetch dílčí požadavek k vytváření programových workflow pro obrázky.

Cloudflare používá odlišnou strukturu adresy URL podle toho, zda optimalizujete vzdálené nebo hostovaný obrázek:

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

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

Při použití Images s Workers, můžete:

• Pomocí vlastní logiky určete pořadí optimalizačních operací. Images například ve výchozím nastavení použije flip před rotate; místo toho můžete použít Images binding a přizpůsobit si pracovní postup optimalizace tak, aby se obrázek před překlopením nejprve otočil.
• Použijte vlastní schéma URL místo výchozí struktury URL adresy.
• Implementujte vyjednávání obsahu, abyste dynamicky přizpůsobili velikost, formát a kvalitu obrázku podle zařízení a stavu sítě.

Určuje, zda se mají zachovat snímky animace ze vstupních souborů.

• true (výchozí): výstupem je animovaný obrázek se všemi snímky.
• false : Převede první snímek animovaného vstupu na statický obrázek.

Toto nastavení se doporučuje při zvětšování obrázků nebo zpracování libovolného obsahu nahraného uživateli, protože animované GIFy mohou mít velkou velikost souboru a prodlužovat dobu načítání stránky. Při použití format=json, je také užitečné nastavit anim=false k rychlejší odpovědi bez počtu snímků.

Původní	anim=false

anim=false

cf: {image: {anim: false}}

Určuje neprůhlednou nebo průhlednou barvu pro vyplnění prázdných nebo průhledných pixelů v obrázku. Výchozí hodnota je %23FFFFFF (bílá).

Přijímá následující vlastnosti:

• Hexadecimální kód barvy ve formátu %23RRGGBB.
• Název barvy CSS, např. white nebo red.
• rgb() nebo rgba() CSS funkce barvy, např. rgba(250,40,145,0.5).

Barva pozadí je viditelná u obrázků s průhlednými pixely, včetně obrázků, jejichž velikost se mění pomocí fit=pad.

Původní 1080 x 720	Output 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)"}}

Použije na obrázek poloměr rozostření. Přijímá celé číslo od 0 (bez rozostření) až 250 (maximální rozostření). Výchozí hodnota je 0.

Tento parametr byste neměli používat ke spolehlivému skrytí obsahu obrázku při optimalizaci přes URL adresu, protože URL adresu lze upravit tak, aby parametr blur odstranila. Místo toho můžete omezit přístup k původnímu obrázku prostřednictvím Workers.

Původní	blur=50

blur=50

cf: {image: {blur: 50}}

Přidá kolem obrázku okraj.

Přijímá následující vlastnosti:

• color : Nastavuje barvu okraje. Přijímá libovolnou platnou hodnotu barvy CSS, například #FF0000, rgb(0,0,0), nebo red.
• width : Nastavuje jednotný okraj v pixelech na všech čtyřech stranách.
• top, right, bottom, left : Nastavuje šířku okraje v pixelech pro jednotlivé strany.

Okraj se použije až po změně velikosti obrázku. Šířka okraje se automaticky přizpůsobí dpr pro zajištění ostrosti na obrazovkách s vysokým rozlišením.

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

Upraví celkový jas obrázku pomocí násobitele.

• 1 (výchozí): žádná změna původního jasu.
• < 1.0 : Ztmaví obrázek, např. 0.5 má poloviční jas.
• > 1.0 : Zesvětlí obrázek, např. 2 je dvakrát jasnější.

Původní	brightness=0.5	brightness=2

brightness=0.5

cf: {image: {brightness: 0.5}}

Vybere výstupní formát, který se komprimuje nejrychleji. Přijímá fast. Výchozí hodnota je none.

compression=fast upřednostňuje rychlost kódování před kvalitou výstupu a velikostí souboru a obvykle přepíše format pro upřednostnění formátu JPEG před efektivnějšími formáty jako AVIF nebo WebP. Tím se mírně sníží latence při zásahu mimo mezipaměť (cache miss), ale může se zvětšit velikost souboru a snížit kvalita obrázku.

Tato možnost se nedoporučuje, s výjimkou neobvyklých případů, jako je změna velikosti dynamicky generovaných obrázků, které nelze ukládat do mezipaměti.

compression=fast

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

Upraví pomocí násobitele celkový rozdíl mezi nejtmavšími a nejsvětlejšími místy obrázku.

• 1 (výchozí): žádná změna původního kontrastu.
• < 1.0 : Snižuje kontrast, díky čemuž jsou stíny světlejší a světla tmavší.
• > 1.0 : Zvyšuje kontrast, díky čemuž se stíny přibližují černé a světla bílé.

Původní	contrast=0.5	contrast=2

contrast=0.5

cf: {image: {contrast: 0.5}}

Škáluje výstupní rozlišení pomocí násobitele tak, aby odpovídalo konkrétní hustotě obrazovky uživatele (například Retina nebo 4K). Výchozí hodnota je 1, která doručí obrázek přesně v požadované šířce a výšce. Maximální podporovaná hodnota je 2.

Moderní zařízení mají více fyzických pixelů než pixelů CSS. Pokud zobrazíte obrázek 300px v kontejneru 300px na smartphonu s vysokým rozlišením (high-DPR), bude vypadat rozmazaně. Pomocí dpr=2 řekne Cloudflare, aby pro stejný kontejner o velikosti 300px odeslala obrázek 600px, což vede k ostřejšímu a čistšímu obrázku.

dpr lze použít s srcset na doručovat responzivní obrázky.

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

dpr=1

cf: {image: {dpr: 1}}

Určuje způsob, jakým se obrázek přizpůsobí cílové oblasti.

Fit se provádí po nastavení width a height rozměry obrázku.

fit=pad

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

Změní velikost obrázku tak, aby se vešel do zadaných rozměrů při zachování původního poměru stran, ale nikdy jej nezvětší. Jedná se o výchozí fit chování.

Pokud je původní obrázek menší než cílová oblast, vrátí se v původních rozměrech. Například požadavek na zobrazení obrázku 1080x720 v rozměru 2000x2000 vrátí obrázek v rozměru 1080x720.

Pokud je obrázek větší, zmenší se tak, aby se vešel do cílové oblasti při zachování původního poměru stran.

V níže uvedeném příkladu je obrázek 1080x720 změněn tak, aby se vešel do cílové oblasti 500x500. Protože scale-down zachovává původní poměr stran (3:2), konečné rozměry výstupního obrázku jsou 500x333.

Původní 1080 x 720 (3:2)	Požadováno 500 x 500 (1:1)	Output 500 x 333 (3:2)

Zvětší obrázek na maximální možnou velikost v rámci cílového width a height rozměry při zachování původního poměru stran.

Pokud je původní obrázek větší než cílová oblast, zmenší se tak, aby se do ní vešel (podobně jako scale-down).

Pokud je menší, místo toho se zvětší (podobně jako scale-up). Funguje s upscale pro řízení algoritmu zvětšování obrázku. Chcete-li se vyhnout zvětšování (upscaling), použijte scale-down.

Vyplní celou cílovou oblast, přičemž obrázek podle potřeby zmenší nebo zvětší. Výstupní oblast vždy odpovídá požadované width a height přesně dané rozměry.

Pokud se poměr stran originálu a cíle liší, obrázek se změní tak, aby pokryl celou cílovou oblast, a přebytečná část se ořízne. Použijte gravity pro řízení, která část obrázku se zachová při oříznutí.

Funguje s upscale pro řízení algoritmu zvětšování obrázku.

V níže uvedeném příkladu je obrázek 1080×720 nejprve změněn na 750×500 (podle požadované výšky), aby se vešel do cílové oblasti, a poté oříznut zleva a zprava na konečné rozměry 500x500.

Původní 1080 x 720 (3:2)	Požadováno 500 x 500 (1:1)	Output 500 x 500 (1:1)

Pokud je původní obrázek menší než cílová oblast, místo toho se zvětší. Zvětšování obrázku zabráníte použitím crop.

Změní velikost obrázku tak, aby vyplnil cílovou oblast, bez zvětšení nad rámec originálu.

Pokud je původní obrázek menší než cílová oblast, zachová si původní velikost i poměr stran (podobně jako scale-down).

V níže uvedeném příkladu je původní obrázek (1080x720) menší než cílová oblast (1296x1296), takže si zachovává původní velikost a poměr stran.

Původní 1080 x 720 (3:2)	Požadováno 1296 x 1296 (1:1)	Output 1080 x 720 (3:2)

Pokud je původní obrázek větší než cílová oblast, chová se stejně jako cover (vyplní cílovou oblast a zbytek ořízne) místo toho.

Ořízne obrázek podle cílového poměru stran, v případě potřeby ho zmenší, ale nikdy nezvětší.

Pokud je původní obrázek větší než cílová oblast, zmenší se na nejmenší velikost, která ještě vyplní cílové rozměry, a poté se ořízne podle cílového poměru stran (podobně jako cover).

Pokud je původní obrázek menší než cílová oblast, zachová si původní velikost, ale ořízne se podle cílového poměru stran. Na rozdíl od crop, která u menších obrázků zachová jejich původní velikost a rozměry, aspect-crop vždy vynucuje cílový poměr stran.

Obrázek 612x613 požadovaný ve velikosti 1920x1120 se tedy nezvětší. Zůstane ve své původní velikosti a oříznutím se upraví na 612x357, což odpovídá poměru stran 1920:1120. Použijte gravity pro řízení, která část obrázku se zachová při oříznutí.

Zvětší obrázek na maximální možnou velikost v rámci daných rozměrů. V případě potřeby se výstupní oblast rozšíří tak, aby odpovídala width a height přesně dané rozměry.

Funguje s background pro vyplnění prázdných nebo průhledných pixelů. U webových aplikací však často dosáhnete stejného vizuálního výsledku pomocí contain s vlastností CSS object-fit: contain díky čemuž se do samotného obrázku nekódují vycpávkové pixely.

V níže uvedeném příkladu je původní obrázek (1080x720) menší než cílová oblast (1080x1080), takže vzniká prostor pro zbývající pixely.

Původní 1080 x 720 (3:2)	Požadováno 1080 x 1080 (1:1)	Output 1080 x 1080 (1:1)

Změní velikost obrázku tak, aby přesně odpovídala požadované šířce a výšce, bez oříznutí okrajů nebo omezení částí obrázku.

Pokud se poměr stran originálu a cíle liší, obrázek se zkreslí tak, aby se vešel do cílové oblasti.

Původní 1080 x 720	Output 1080 x 540

Původní 1080 x 1080	Output 1080 x 540

Změní velikost obrázku tak, aby se vešel do zadaných rozměrů při zachování původního poměru stran, ale nikdy jej nezmenší. Jedná se o opak funkce scale-down.

Pokud je původní obrázek větší než cílová oblast, vrátí se v původních rozměrech.

Pokud je původní obrázek menší než cílová oblast, zvětší se tak, aby se vešel do cílových rozměrů. Použijte upscale pro řízení algoritmu použitého při zvětšování obrázků: nastavte upscale=generate pro zvětšování obrázků pomocí AI nebo upscale=interpolate (výchozí) pro bikubickou interpolaci.

Převrátí obrázek horizontálně, vertikálně nebo obojí.

Přijímá následující hodnoty:

• h : Převrátí obrázek vodorovně.
• v : Převrátí obrázek svisle.
• hv : Převrátí obrázek jak vodorovně, tak svisle.

Flip lze použít s rotate pro nastavení orientace obrázku. Převrácení (flip) se provádí před otočením. Pokud například použijete flip=h,rotate=90, pak se obrázek nejprve překlopí vodorovně a poté otočí o 90 stupňů.

Původní	flip=h	flip=v

flip=h

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

Určuje výstupní formát obrázku.

Přijímá následující hodnoty:

• auto : Automaticky doručí nejefektivnější formát, který podporuje prohlížeč odesílající požadavek. Když doručujete hostovaný obrázek, toto je výchozí format možnost.
• avif : Pokud je to možné, překóduje obrázek do formátu AVIF. Kódování do AVIF může být řádově pomalejší než kódování do jiných formátů. Pokud je obrázek na rychlé zakódování do AVIF příliš velký, Cloudflare použije jako náhradu WebP nebo JPEG.
• webp : Překóduje obrázek do formátu Google WebP. Použijte quality=100 k vrácení bezztrátového formátu WebP.
• jpeg : Překóduje obrázek do prokládaného formátu progressive JPEG, ve kterém se data komprimují ve více průchodech s postupně vyšší úrovní detailu.
• baseline-jpeg : Překóduje obrázek do formátu baseline sequential JPEG. Používá se v případech, kdy cílová zařízení nepodporují progresivní JPEG ani jiné moderní formáty souborů.
• json : Vypíše informace o obrázku jako objekt JSON. Ten obsahuje údaje, jako je velikost obrázku (před změnou velikosti a po ní), MIME typ zdrojového obrázku a velikost souboru.

format=auto
f=auto

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

Chcete-li použít format=auto s vlastním Workerem musíte parsovat Accept hlavičku. Více informací najdete v tento ukázkový Worker pro úplný přehled nastavení Workeru pro transformaci obrázků.

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 } });

Upraví expozici obrázku pomocí násobitele. Gama ovládá jas středních tónů, aniž by ovlivnilo nejtmavší nebo nejsvětlejší části obrázku.

• 0 a 1 (výchozí): žádná změna původní hodnoty gama.
• < 1.0 : Zvyšuje jas středních tónů, takže obrázek působí celkově světleji.
• > 1.0 : Snižuje jas středních tónů, takže obrázek působí celkově tmavěji.

Původní	gamma=0.5	gamma=2

gamma=0.5

cf: {image: {gamma: 0.5}}

Určuje, jak se má obrázek oříznout při použití s fit=cover a fit=crop. Cloudflare ve výchozím nastavení ořízne obrázek směrem ke středovému bodu originálu.

Přijímá auto, face, strana (left, right, top, bottom) a relativní souřadnice (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}}}

Automaticky nastaví ohniskový bod pomocí algoritmu detekce významnosti, který najde vizuálně nejzajímavější pixely.

To se hodí v případech, kdy předem neznáte obsah obrázku, například u obsahu generovaného uživateli. U rozsáhlých knihoven obrázků, jako jsou produktové galerie e-shopů, tato funkce odstraňuje nutnost ručně nastavovat ohniskový bod pro každý obrázek.

Původní	Výchozí oříznutí	gravity=auto

Automaticky nastaví ohniskový bod podle tváří na obrázku.

Toto lze kombinovat s zoom pro určení, jak těsně se má obrázek oříznout kolem obličeje.

Původní	Výchozí oříznutí	gravity=face

Fotografie od Suad Kamardeen (@suadkamardeen) on Unsplash ↗

Určuje stranu obrázku, která se nesmí oříznout.

V níže uvedeném příkladu je obrázek 1080x720 oříznut na oblast 1080x400, počínaje od spodního okraje:

Původní	gravity=bottom

Nastaví ohniskový bod (X,Y) tak, aby relativní souřadnice výstupního obrázku odpovídaly relativním souřadnicím původního obrázku. Přijímá dvojici souřadnic ve formátu XxY, kde X a Y jsou desetinné hodnoty mezi 0.0 a 1.0.

• Horizontální hodnota (X), 0.0 je levý okraj a 1.0 je pravý okraj obrázku.
• Svislá hodnota (Y), 0.0 je horní okraj a 1.0 je dolní okraj obrázku.

Následující příklad ořízne obrázek o rozměrech 900x900 na 300x900 pomocí bodu gravitace 0.33x0.5:

• Původní obrázek i cílová oblast budou mít bod gravitace nastavený na 1/3 šířky od levého okraje a 1/2 výšky od horního okraje.
• Relativní souřadnice výstupního bodu gravity odpovídají relativním souřadnicím původního obrázku. Cílová oblast se tedy umístí tak, aby její bod gravity ležel na stejné relativní pozici v původním obrázku (0.33, 0.5).
• Ztmavené části obrázku ukazují oblast mimo požadovaný výstup, která bude oříznuta.
• Výsledný oříznutý obrázek zachycuje obsah 300x900 kolem bodu gravitace (0.33, 0.5).

Původní	Zarovnání	Crop	Output

Při optimalizaci pomocí Workers použijte objekt {x, y} k určení souřadnic. Například {fit: "cover", gravity: {x:0.5, y:0.2}} oříznou každou stranu tak, aby se co nejvíce zachovalo okolí bodu ve výšce 20% původního obrázku.

Nastaví výšku výstupního obrázku v pixelech pomocí kladného celého čísla. Cloudflare ve výchozím nastavení použije původní výšku vstupního obrázku.

Když height je nastaveno, přesné chování závisí na fit .

height=250
h=250

cf: {image: {height: 250}}

Určuje množství neviditelných metadat (EXIF), která mají být zachována u obrázku JPEG. U všech ostatních výstupních formátů (např. WebP nebo PNG) budou veškerá metadata vždy odstraněna.

Barevné profily a rotace EXIF se na obrázek použijí i v případě, že jsou metadata odstraněna.

Přijímá následující hodnoty:

• copyright (výchozí): odstraní veškerá metadata kromě značky EXIF copyright.
• keep : Zachová většinu metadat EXIF, včetně polohy GPS, pokud je k dispozici.
• none : Odstraní veškerá neviditelná metadata EXIF.

metadata=none

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

Přesměruje uživatele na URL adresu původního zdrojového obrázku, pokud transformaci obrázku zabrání fatální chyba. Přijímá redirect. Výchozí hodnota je none.

Tato možnost funguje pouze tehdy, když se obrázek nachází ve stejné zóně (subdomény jsou akceptovány). Pokud původní obrázek pochází z jiné zóny, nemá možnost žádný účinek.

To může být užitečné v případech, kdy obrázek vyžaduje ověření uživatele a nelze jej přes Workers načíst anonymně. Tuto možnost však nedoporučujeme, pokud je zdrojový obrázek velmi velký.

onerror=redirect

Určuje výstupní kvalitu obrázku pro formáty JPEG, WebP a AVIF, vyjádřenou jako pevnou hodnotu nebo úroveň percepční kvality. Výchozí hodnota je 85.

• Pevná kvalita : Přijímá kladné celé číslo od 1 (nízká kvalita, malá velikost souboru) až 100 (vysoká kvalita, velká velikost souboru).
• Percepční kvalita : Přijímá high, medium-high, medium-low, a low.

Pokud je výstupním formátem PNG, výslovné quality nastavení umožňuje použít variantu formátu PNG8 (paletu).

quality=50
quality=low
q=50

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

Otočí obrázek o zadaný počet stupňů. Přijímá 90, 180, nebo 270. Výchozí hodnota je 0 (bez otočení).

Otočení se provádí před změnou velikosti; width a height se budou vztahovat k osám po otočení obrázku.

Původní	rotate=180

rotate=90

cf: {image: {rotate: 90}}

Upraví sytost barev obrázku pomocí násobitele.

• 0 : Zcela odbarví obrázek (převede ho do stupňů šedi).
• < 1.0 : Snižuje sytost barev. Například 0.5 má poloviční sytost.
• 1 (výchozí): žádná změna původní sytosti.
• > 1.0 : Zvyšuje sytost barev. Například 2 je dvakrát sytější.

Původní	saturation=0	saturation=2

saturation=0.5

cf: {image: {saturation: 0.5}}

Automaticky izoluje objekt na obrázku tak, že pozadí nahradí průhlednými pixely. Přijímá foreground. Výchozí hodnota je none.

Tato funkce využívá open-source model s názvem BiRefNet prostřednictvím Workers AI. Přečtěte si více o Cloudflare přístup k odpovědné AI ↗.

Původní	segment=foreground

segment=foreground

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

Použije filtr doostření, který zvýrazní hrany v obrázku. Přijímá desetinnou hodnotu od 0 (bez doostření) až 10 (maximální doostření). Výchozí hodnota je 0. Doporučená hodnota pro zmenšené obrázky je 1.

Původní	sharpen=5

sharpen=2

cf: {image: {sharpen: 2}}

Přepisuje quality hodnotu, kdykoli je zjištěno pomalé připojení. Přijímá stejná pevná nebo percepční nastavení jako kvalita. Výchozí hodnota je none.

Chcete-li detekovat pomalá připojení, povolte v hlavičce HTTP libovolné z následujících client hints:

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

slow-connection-quality se použije, pokud je přítomen client hint a je splněna některá z následujících podmínek:

• rtt ↗: Více než 150ms.
• save-data ↗: Hodnota je "on".
• ect ↗: Hodnota je jedna z slow-2g|2g|3g.
• downlink ↗: Méně než 5Mbps.

slow-connection-quality=50
scq=50

Odstraní pixely po stranách obrázku.

Tuto funkci lze použít k oříznutí obrázku podle barev jeho okrajů nebo podle zadaného počtu pixelů z jeho strany či stran.

Trim zohledňuje dpr a provádí se před změnou velikosti a otočením.

Automaticky ořízne okraje obrázku na základě barvy jeho okraje.

trim=border lze dále upravit pomocí následujících parametrů:

• trim.border.color : Určuje barvu ořezávaného okraje. Přijímá libovolnou barvu CSS v moderní syntaxi CSS4. Pokud ji vynecháte, barva se rozpozná automaticky.
• trim.border.tolerance : Určuje, jak přesně se musí barva rozpoznaných pixelů shodovat. Přijímá celé číslo v rozsahu 0 (nemusí se shodovat) a 255 (musí se shodovat přesně).
• trim.border.keep : Určuje počet pixelů původního okraje, které se mají ponechat neořezané.

Určuje počet pixelů, které se odstraní z okrajů obrázku. Přijímá čtyři hodnoty oddělené středníkem, kterými se najednou nastaví oříznutí na všech čtyřech stranách obrázku.

Všechny hodnoty trim přijímají buď celé číslo (počet pixelů), nebo desetinné číslo mezi 0 a 1 představující zlomek rozměru obrázku. Například 0.25 ořízne 25% z této strany.

Trim lze také použít na konkrétní stranu pomocí následujících parametrů:

• trim.top : Odstraní pixely z horní části obrázku.
• trim.left : Odstraní pixely z levé strany obrázku.
• trim.height : Nastaví výšku obrázku od horního okraje a vše pod ní ořízne.
• trim.width : Nastaví šířku obrázku od levého okraje a vše napravo ořízne.

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}}}

Určuje algoritmus použitý při zvětšování obrázku. Tento parametr funguje s jakýmkoli fit režimu, který zvětšuje obrázek, jako je contain, cover, a scale-up. Nemá žádný účinek, pokud fit=scale-down nebo když jsou cílové rozměry menší než zdrojové.

Přijímá následující hodnoty:

• interpolate (výchozí): používá bikubickou interpolaci, která může snížit kvalitu obrázku. Toto je výchozí chování, když upscale není zadáno.
• generate : Využívá AI upscaling (ESRGAN ↗), abyste při zvětšování obrázků dosáhli ostřejších a detailnějších výsledků.

Když upscale=generate je zadáno, model AI provede jeden průchod na nejbližším podporovaném měřítku (2x nebo 4x) a poté upraví výsledek na přesné cílové rozměry. Faktory měřítka nad 4x se řeší tak, že se obrázek nejprve zvětší pomocí AI na 4x a zbytek se dopočítá bikubickou interpolací.

upscale=generate

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

Nastaví šířku výstupního obrázku v pixelech pomocí kladného celého čísla. Cloudflare ve výchozím nastavení použije původní šířku vstupního obrázku.

Když width je nastaveno, přesné chování závisí na fit .

Přijímá následující hodnoty:

• Číslo v pixelech (například 250).
• auto : Automaticky doručí obrázek v nejvhodnější šířce na základě dostupných informací o prohlížeči a zařízení. Přijímá wbreakpoints (client hints), wmobile (detekce user-agenta) a wdesktop (detekce user-agenta) jako dílčí parametry.

width=250
w=250

cf: {image: {width: 250}}

Když width=auto je zadáno, Cloudflare změní velikost obrázku na základě informací z Client Hints (odesílaných prohlížečem), případně jako záložní řešení pomocí detekce User-Agent.

Můžete přizpůsobit width=auto chování pomocí následujících dílčích parametrů:

Při optimalizaci vzdálených obrázků pomocí width=auto, každá unikátní šířka se počítá jako samostatná zpoplatněná transformace.

Chcete-li se dozvědět, jak width=auto funguje, přečtěte si našeho průvodce k doručování responzivních obrázků.

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

Určuje, jak těsně se obrázek ořízne směrem k rozpoznaným obličejům v kombinaci s gravity=face Přijímá platný rozsah mezi 0.0 (zahrnuje co nejvíce pozadí) a 1.0 (oříznutí obrázku co nejblíže obličeji). Výchozí hodnota je 0.

zoom=0.1

cf: {image: {zoom: 0.5}}

Velikosti obrázků by v ideálním případě měly odpovídat přesné velikosti, ve které se zobrazují na stránce. Pokud stránka obsahuje miniatury se značkováním, jako je například <img width="200" …>, pak by obrázky měly být změněny na velikost width=200.

Chcete-li doručovat responzivní obrázky, můžete použít HTML srcset atribut, aby si poskytovatel mohl vybrat nejvhodnější velikost. Pokud nemůžete použít <img srcset> a musíte natvrdo zadat konkrétní maximální rozměry, Cloudflare doporučuje následující velikosti:

• Maximálně 1920 pixelů pro stolní prohlížeče.
• Maximálně 960 pixelů pro tablety.
• Maximálně 640 pixelů pro mobilní telefony.

Například fit=scale-down,width=1920 nastaví maximální velikost na 1920px a zajistí, že obrázek nebude zbytečně zvětšen.

Typ zařízení můžete detekovat povolením CF-Device-Type hlavička prostřednictvím Cache Rule.

Když optimalizujete pomocí Images, původní obrázek se načte z origin serveru a uloží do cache podle běžných pravidel HTTP cachování, Cache-Control hlavička atd. Požadavky na více různých velikostí obrázků pravděpodobně znovu použijí obrázek uložený v mezipaměti, aniž by způsobily další přenosy z origin serveru.

Pokud Custom Cache Keys se použijí pro původní obrázek, nemusí se tento obrázek uložit do mezipaměti a může to vést k většímu počtu volání na origin.

Optimalizované obrázky se řídí stejnými pravidly ukládání do cache jako původní obrázek, ze kterého vznikly, s tím rozdílem, že minimální doba uložení v cache je jedna hodina. Pokud potřebujete obrázky aktualizovat častěji, přidejte must-revalidate do Cache-Control hlavička. Služba Images podporuje revalidaci mezipaměti, proto doporučujeme doručovat obrázky s Etag hlavička. Podrobnosti najdete v Dokumentace k Cache s dalšími informacemi.

Cloudflare nepodporuje jednotlivé mazání optimalizovaných obrázků z mezipaměti. Adresy URL začínající na /cdn-cgi/ nelze vyčistit. Vyčištění adresy URL původního obrázku ale vyčistí i všechny jeho optimalizované verze.