← Images / images / optimization / transformations

Vytvoření transformačních toků

Flows umožňují automaticky použít optimalizaci obrázků na požadavky ve vaší zóně.

Každý flow spojuje sadu podmíněných spouštěčů (například obrázek je ve formátu JPEG nebo PNG) s parametry optimalizace (například převod na AVIF).

Pokud požadavek na obrázek odpovídá toku, Cloudflare jej transparentně přesměruje přes službu Images a doručí optimalizovaný výsledek.

Pro migraci z jiných služeb pro optimalizaci obrázků (například Fastly) můžete využít předpřipravené flows, nebo si vytvořit vlastní flows.

A postup poskytovatele je překladová vrstva, která mapuje adresy URL obrázků z jiné služby pro optimalizaci obrázků na Cloudflare. Vaše stávající adresy URL, včetně parametrů specifických pro daného poskytovatele, budou fungovat i nadále beze změny.

Cloudflare v současné době podporuje toky pro Fastly Image Optimizer. Po zapnutí Cloudflare automaticky převede parametry Fastly na jejich ekvivalenty v Cloudflare. Například:

• Fastly brightness přijímá rozsah od -100 na 100, zatímco Cloudflare brightness funguje jako násobitel. Hodnota se podle toho přizpůsobí.
• Fastly orient se mapuje na Cloudflare flip a rotate parametry.

A vlastní flow umožňuje definovat vlastní podmínky a akce pro optimalizaci obrázků.

Hodí se to pro situace, kdy chcete obrázky optimalizovat plošně a konzistentně, například:

• Automatická konverze formátu : Překódujte všechny obrázky na celém webu do moderních formátů, jako jsou AVIF nebo WebP.
• Responzivní velikost : Automaticky měňte velikost obrázků podle zařízení jednotlivých uživatelů.
• Optimalizace podle adresářů : Vynuťte jednotnou velikost pro všechny obrázky v dané cestě, například 100x100 pro obrázky, jejichž cesta obsahuje /thumbnail.

Než nastavíte tok, ujistěte se, že jsou pro vaši zónu zapnuté transformace v části Obrázky > Transformace v Cloudflare dashboard ↗.

Když je na vaší zóně vyžádán obrázek, Cloudflare zkontroluje, zda požadavek odpovídá podmínkám některého z vašich nakonfigurovaných toků:

• Flows se vyhodnocují shora dolů v pořadí, ve kterém se zobrazují na dashboardu.
• Pokud požadavek odpovídá více než jednomu toku, spustí se pouze první odpovídající tok.
• Pokud neodpovídá žádný tok, požadavek projde na váš origin server beze změny.
• Chcete-li řídit prioritu, můžete postupy v dashboardu přeuspořádat.

Pokud požadavek odpovídá podmínkám toku, Cloudflare přepíše adresu URL tak, aby procházela službou Images se zadanými parametry:

• Vlastní tok se spustí pouze u požadavků na podporované přípony obrázků. HTML stránky, soubory CSS a další neobrazové soubory nejsou nikdy ovlivněny.
• Tok poskytovatele vyhodnocuje požadavky na základě optimalizačních parametrů specifických pro daného poskytovatele. Tok poskytovatele Fastly se například spustí pouze tehdy, když požadavek obsahuje parametry jako ?width, ?height, nebo ?fit. Cloudflare veškeré nerozpoznané parametry ignoruje.

V rámci životního cyklu požadavku se flows vyhodnocují až po standardním HTTP pravidla přesměrování:

• Veškerá existující pravidla pro přepis URL adres nebo přesměrování se použijí dříve, než požadavek vyhodnotí Images, což může ovlivnit způsob porovnávání.
• Flows obsahují vestavěnou ochranu proti smyčkám. Pokud požadavek už přichází ze služby Images, flow se pro tento dílčí požadavek znovu nespustí.

Cloudflare v současné době podporuje toky pro zpracování migrace z Fastly Image Optimizer.

Přidání postupu poskytovatele:

1. Přihlaste se do Cloudflare dashboard ↗ a vyberte svůj účet.
2. Přejděte na Obrázky > Transformace a vyberte svou zónu.
3. Vyberte Automatizace kartě a poté vyberte Přidání toku poskytovatele.
4. Vyberte Fastly jako poskytovatele.
5. Save ve svém postupu.

V Cloudflare dashboardu přejděte na Obrázky > Transformace ↗ a vyberte zónu, ve které chcete nastavit vlastní postup.

Přejděte na Automatizace kartu a vyberte Přidání vlastního toku k otevření bočního panelu, kde můžete nakonfigurovat svůj workflow.

Vlastní tok se spustí, když příchozí požadavek odpovídá všem podmínkám nakonfigurovaným v daném toku:

• Přípona souboru : Shodujte požadavky pro všechny formáty obrázků, nebo jen pro konkrétní přípony souborů, například JPEG, PNG nebo WebP.
• Cesta URL : Shodujte požadavky, jejichž cesta URL odpovídá zadanému vzoru, například /images/* nebo /assets/thumbnails/*.
• Parametr dotazu : Shodujte požadavky, jejichž query string obsahuje zadaný parametr, například orient.

Dále definujte optimalizační parametry, které se mají použít při spuštění postupu.

V rámci jednoho postupu můžete použít více akcí najednou. Úplný seznam dostupných parametrů najdete v Funkce.

Klíčové parametry pro většinu případů použití jsou:

Nastavte format=auto pro automatické doručování obrázků v nejefektivnějším formátu (např. AVIF, WebP) pro každý požadující prohlížeč.

Pokud prohlížeč nepodporuje AVIF, Cloudflare použije jako náhradu WebP nebo standardní formát.

Viz format

Ovládá kompresní kvalitu výstupního obrázku. Přijímá jednu z těchto hodnot:

• A pevná hodnota z 1 (nízká kvalita, malá velikost souboru) až 100 (vysoká kvalita, velká velikost souboru).
• A úroveň percepční kvality: high, medium-high, medium-low, nebo low.

Viz quality

Přepsat quality když je pomalé připojení zjištěno pomocí client hints. Přijímá stejné pevné nebo percepční hodnoty jako quality. Uživatelům na pomalých sítích se tak doručují obrázky nižší kvality (a menší), aniž by to ovlivnilo uživatele na rychlém připojení.

Viz slow-connection-quality

Nastavte width=auto pro automatickou úpravu velikosti obrázků podle požadujícího zařízení.

Cloudflare určuje optimální šířku buď pomocí client hints (odesílané prohlížečem), případně jako záložní řešení detekci user-agenta.

Můžete jemně doladit width=auto chování pomocí následujících dílčích parametrů:

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ů.

Vyberte Save v postranním panelu a přidejte svůj vlastní Flow, poté vyberte Save v seznamu Flows a zapněte svůj Flow.