Responzivní obrázky s klientskými radami

Nemusíte být fanatik do výkonu, abyste věděli, že obrázky mohou skutečně zpomalit načítání stránky. Pokud jde o obrázky, ušli jsme dlouhou cestu, od líného načítání k používání lepších formátů obrázků, jako je WebP, ale všechny zahrnují načítání stejné adresy URL statického obrázku, což může být dobré pro počítače, ale ne pro mobilní zařízení, a naopak. . Máme srcset s img značky nyní, ale to může být obtížné pro dynamické weby řízené uživateli.

Mé experimenty s Cloudinary mi ukázaly, že mají řešení téměř pro všechno, pokud jde o média. Mezi mé předchozí experimenty patří:

  • Optimalizace obrazu pomocí Cloudinary
  • Generujte obrázky tvaru vlny ze zvuku pomocí Cloudinary
  • Jak zajistit plynulé přehrávání bez přerušení (ukládání do vyrovnávací paměti)
  • Odstranění pozadí fotografií pomocí Cloudinary
  • Doporučené postupy pro přehrávač videa HTML5

Další nový způsob optimalizace doručování obrázků se nazývá „klientské rady“: nová sada záhlaví požadavků HTTP odeslaných na server, aby poskytly informace o zařízení, což umožňuje inteligentnější výstup. Zde je přesné vysvětlení klientských rad z dokumentu standardů:

Pojďme se podívat na aktuální rady týkající se „responzivního obrázku“ a poté optimalizaci obrázku pomocí tipů pro klienty!

Responzivní obrázky s CSS

V současné době používám CSS pro responzivní obrázky dvěma způsoby. První je nastavením max-width na obrázcích:

img {
    max-width: 100%;
}

Druhou metodou je stanovení rozsahu obrázků na pozadí pomocí dotazů na média CSS:

.logo {
    background-image: url('/path/to/tiny-logo.png');
}
@media (min-width: 1024px) {
    .logo {
        background-image: url('/path/to/large-logo.png');
    }
}

Oba fungují jako své vlastní problémy:první metoda vždy slouží k velké velikosti souboru obrázku bez ohledu na velikost obrazovky, druhá metoda nafukuje vaše CSS (rozsah obrázku pro každý obrázek – hrubé!) a vyžaduje použití obrázku na pozadí.

Responzivní obrázky s JavaScriptem

Existuje spousta knihoven pro responzivní obrázky:

  • Skutečně responzivní obrázky s responsive-images.js
  • obrázková výplň
  • lazySizes

Existuje mnohem více knihoven, které tuto práci udělají, ale můj problém s těmito přístupy založenými na JavaScriptu je ten, že někdy mohou přidat velkou váhu stránce a neposkytují přístup „nativního“ obrázku, tj. počkejte, až se načte model DOM, poté analyzujte obrázky, poté nastavte šířky a odešlete požadavky atd.  Klasičtější přístup by byl výkonnější.

<img srcset>

Současný způsob poskytování responzivních cest obrázků je trochu ošklivý a jeho vytváření může být únavné:

<img sizes="100vw"
     srcset="tiny.jpg      320w,
             small.jpg     512w,
             medium.jpg    640w,
             large.jpg    1024w,
             huge.jpg     1280w,
             enormous.jpg 2048w"
     src="fallback.jpg" 
     alt="To each according to his ability" />

V zásadě zadáváme nový obrázek pro zadané šířky ve formátu s lichým řazením s jedním řetězcem. Pro tuto metodu je třeba vytvořit samostatné obrázky nebo vytvořit inteligentní systém založený na řetězci dotazů pro dynamické generování obrázků. V mnoha případech jsou obě možnosti nepraktické.

Použití klientských rad

První částí používání klientských rad je poskytnutí jediné metaznačky s radami, které byste chtěli poskytnout serveru:

<meta http-equiv="Accept-CH" content="DPR, Width">

Pomocí výše uvedeného úryvku nařídíme prohlížeči, aby během požadavku na obrázek poskytl serveru nápovědu pro šířku a DPR (poměr pixelů zařízení). Pomocí panelu „Síť“ v Chromu vidíme, jak se tato záhlaví odesílají:

Pokud se na chvíli zastavíme a zamyslíme se, můžeme toho hodně udělat tím, že z jejich hlaviček vytáhneme Width, DPR a další rady:

  • Uložte data, abychom mohli analyzovat vzory a případně oříznout různé rozměry obrázku
  • Vygenerujte, uložte a vraťte vlastní obrázek pro danou velikost souboru
  • Vraťte jiný typ obrázku pro dané zařízení

Nápověda pro klienty je něco, co jsme vždy chtěli: tip od klienta ohledně velikosti a dalších vizuálních charakteristik! Líbí se mi, že klientské rady lze snadno implementovat na straně klienta:přidejte <meta> přidejte značku sizes přiřaďte svému obrazu a jste zlatí. Nejtěžší část je na straně serveru:musíte přidat dynamickou, optimalizovanou logiku odezvy – v tom může Cloudinary pomoci.

Klientské rady s Cloudinary

Cloudinary chce, aby vytváření a správa responzivních snímků byl jejich problém. Cloudinary nabízí rozhraní API pro mnoho jazyků (Python, Node.js atd.), které dokonce umožňují doručování dynamických obrázků prostřednictvím adresy URL. Vytvořme obrázek s automatickou nápovědou DPR:

<meta http-equiv="Accept-CH" content="DPR"> <img src="http://res.cloudinary.com/demo/w_512,dpr_auto/bike.jpg">

w_512,dpr_auto část adresy URL obrázku spouští odeslání jiného zdroje obrázku každému uživateli na základě jeho kontextu. Pro prohlížeče, které podporují klientské rady, obdrží 1x zařízení 1x zdroje; 2x obrazovky obdrží 2x zdroje; hustota zobrazení spouští rozdíl v poskytování zdrojů.

Nyní provedeme automatickou šířku obrázku s klientskými radami:

<img src="https://res.cloudinary.com/demo/w_auto,dpr_auto/bike.jpg">

Stejný efekt: w_auto odešle různou velikost obrázku ze stejné adresy URL na základě nápovědy klienta – neuvěřitelně pohodlné při vytváření dynamického obsahu – není potřeba ošklivý srcset management!

Pokročilé klientské rady s Cloudinary

w_auto může mít dva volitelné parametry:

<!-- In the <head> -->
<meta http-equiv="Accept-CH" content="DPR, Width">

<!-- Image in the page -->
<img sizes="100vw"
     src="http://res.cloudinary.com/demo/w_auto:100:400/bike.jpg" 
     alt="Smiling girl with a bike." />

Pojďme si rozebrat kód výše, konkrétně w_auto:100:400 díl:

  • 100 představuje přírůstek, o který se obrázek vypočítá ve vztahu k nápovědě klienta, pokud není 1 V takovém případě bude obrázek zmenšen na přesnou šířku rozvržení (to je špatné – pokud klient nemá standardní šířku zařízení, bude to mít vliv na výkon). Pokud klient tipuje Width je 444 , obrázek se zaokrouhlí nahoru a zobrazí se 500 pixelový obrázek bude vrácen.
  • 400 představuje šířku záložního obrázku v případě, že klientské rozhraní API není podporováno prohlížečem nebo není jednoduše odeslána nápověda (tj. Width není uveden v <meta> štítek). Pokud tento argument není uveden, vrátí se plná velikost obrázku, takže pokud je váš obrázek velmi velký (tj. originální fotografie), určitě budete chtít uvést tento argument.

Bohužel v tuto chvíli podporují klientské rady pouze Opera a Chrome, zatímco Firefox a Edge zvažují přidání podpory klientských tipů. Řeknu, že toto nové vylepšení považuji za dokonalé spojení komunikace na straně serveru a klienta, pokud jde o aktiva a zobrazení zařízení. Doufejme, že klientské rady budou celosvětově přijaty – budeme schopni opravdu zpřísnit doručování obrázků, zvláště když používáte úžasnou službu, jako je Cloudinary!