← Referenční architektury / reference-architecture / diagrams / content-delivery
Optimalizace doručování obrázků pomocí Cloudflare image resizing a R2
Úvod
Optimalizace doručování obrázků na webech je klíčová pro zlepšení uživatelského komfortu. Jelikož obrázky často tvoří největší část dat webu, výrazně ovlivňují dobu načítání stránek, umístění ve vyhledávačích, náklady na doručování i celkový výkon. Tento diagram referenční architektury vás provede přímočarým, škálovatelným a vysoce výkonným řešením. Stačí upravit řetězec URL tak, aby specifikoval velikost a kvalitu obrázku, a optimalizovaný obrázek pak lze uložit do mezipaměti a doručit každému uživateli, který o daný formát požádá. Níže jsou uvedeny komponenty Cloudflare, které se na tomto řešení podílejí:
- Cloudflare CDN ↗ - Využijte Globální síť Cloudflare ↗ k ukládání vašich transformovaných obrázků do cache pro rychlé a spolehlivé doručování koncovým uživatelům.
- Cloudflare Images ↗ - Využijte Cloudflare Images ke změně velikosti, optimalizaci a transformaci obrázků uložených v řešení pro objektové úložiště, jako je Cloudflare R2. Transformace se provádějí na základě speciálně formátované URL adresy, jejíž podpora vyžaduje jen minimální úpravy vaší aplikace.
- Cloudflare R2 Object Storage ↗ - R2 umožňuje uživatelům ukládat velké množství nestrukturovaných dat a v tomto případě použití poslouží k uložení původních obrázků (v nejvyšší kvalitě) určených k transformaci.
- Cloudflare Transform Rules - Pokud přecházíte na Cloudflare z jiného řešení, Transform Rules vám umožní přepsat URL ze syntaxe jiného řešení do syntaxe specifické pro Cloudflare, což migraci výrazně zjednoduší.
Image Delivery pomocí Cloudflare Image Resizing a R2
- Požadavek uživatele: Uživatel odešle HTTP požadavek na obrázek (image.jpg), přičemž transformace, jako je šířka a kvalita, zadá přímo v URL adrese jako seznam parametrů oddělených čárkami.
- Cache Hit: Cloudflare zpracuje požadavek v místě přítomnosti nejbližším uživateli. Nejprve zkontroluje, zda požadovaná transformace obrázku už není v cache Cloudflare. Pokud ano, obrázek se uživateli vrátí okamžitě a další zpracování odpadá. Pokud ne, požadavek pokračuje do dalšího kroku.
- Transform Rules (volitelné): Pokud přecházíte z jiného řešení pro obrázky, může být potřeba přepsat cestu URL a query string pomocí pravidla pro přepis, abyste se při migraci vyhnuli složitým úpravám na úrovni aplikace. Podporovány jsou dynamické i statické přepisy, přičemž dynamické přepisy navíc podporují složité výrazy pro širokou škálu přepisů URL.
- Cache MISS - R2: Pokud požadovaný obrázek není v cache Cloudflare k dispozici, požadavek se odešle na origin server, kterým je v tomto scénáři R2 Object Storage od Cloudflare platformě. V R2 se ukládají pouze původní obrázky, žádné zmenšené varianty se do R2 bucketu neukládají, což usnadňuje provoz R2 bez pravidel životního cyklu objektů.
- Transformace obrázku: Na základě syntaxe URL odeslané v kroku 1 nebo transformované v kroku 3 Cloudflare Images transformuje obrázek a odešle ho do mezipaměti (Cache), než ho vrátí koncovému uživateli v podobě požadovaného obrázku.
Referenční přehled syntaxe URL pro Image Resizing
Obrázky můžete snadno konvertovat a měnit jejich velikost tím, že je vyžádáte prostřednictvím speciálně formátované URL adresy. Tato část vysvětluje strukturu URL adresy pro transformaci obrázků, odkazuje zpět na diagram a podrobně popisuje jednotlivé součásti URL adresy:
- Část 1 - Váš konkrétní název domény na Cloudflare, tedy zóna, kterou jste do Cloudflare zaregistrovali a odkud se obsluhuje váš web nebo obrázky, např. https://www.mywebsite.com/ ↗
- Část 2 - Pevná předpona označující, že jde o speciální cestu zpracovávanou vestavěným Workerem Cloudflare.
- Část 3 - Seznam možností obrázku oddělených čárkami, například width=80,quality=75
- Část 4 - Absolutní cesta na origin serveru, například /uploads/image.jpg
Konečná adresa URL použitá v požadavku by vypadala takto:
https://www.mywebsite.com/cdn-cgi/image/width=80,quality=75/uploads/image.jpg