Web je vizuální médium. Převážná většina této vizuální krajiny je díky obrázkům. Zatímco mnoho možností lze dosáhnout pomocí CSS a SVG inline, většina webů stále potřebuje obrazové soubory.
V průměru se zobrazovaly obrazy více než polovina velikost stránky v loňském roce a meziroční zvýšení velikosti obrázků; byl tam 21% růst ve velikosti obrazu pouze v roce 2014.
Současně stále roste počet a rozmanitost zařízení, které přistupují k webu. Rozlišení se nyní liší kdekoli mezi 72ppi (klesající frekvence) a 600ppi.
Vytvoření obrázku pro obrazovku, která bude mít dostatečnou kvalitu pro jakékoliv zařízení, je jednoduché: uložte jej na 1000ppi a zavolejte jej den. Výsledný snímek bude ostrý i na nejvyšších zařízeních typu hi-res. Ale zatímco vaše kvalita bude vysoká, tak i vaše velikost souboru. Při načítání stránky a klíčový faktor v UX je na nás povinnost zajistit, aby stránky byly okamžitě doručovány našim uživatelům. Když jsou obrazy tak vysoké kvality, že trvají tucet vteřin, než se stáhnou na širokopásmové připojení, natož mobilní připojení, pak jsou skutečně nepoužitelné.
Cílem citlivých obrazů tedy není přinášet obraz s vyšší kvalitou na obrazovkách, které ho mohou zobrazovat (což můžeme udělat snadno), cílem je poskytnout obraz podporovaný nejvyšší kvalitou a nic víc.
Tato příručka je navržena tak, aby vás naučila, co funguje, kde stále leží problémy a úskalí, a jak dnes můžete využívat citlivé obrázky na webových stránkách.
Proč záleží na rychlosti? Určitě už nikdo není na připojení 3G? Nikdo nepoužívá telefonické připojení. Pokud váš cílový demografický cíl vašeho klienta bydlí v městském Manhattanu, proč byste měl zájem o venkovské Lesotho? Faktem je, že je to mýtus, že jsme všichni na super-rychlém širokopásmovém připojení, které prodávají společnosti, které profitují z touhy po stále rostoucích rychlostech.
Většina lidí tráví nejméně dvě hodiny každý den na špatném spojení. Často jsem se ocitl s nejvíce času procházet při dojíždění, kdy dokonce i spolehlivé připojení 3G zní jako nějaký vzdálený sen.
V dubnu Google oznámil že mobilita je vhodná pro vyhledávání vyhledávaných zařízení, která považuje za "mobilní". Ještě před tím, rychlost byla faktorem v žebříčku stránek - a to jak explicitně jako součást výpočtů společnosti Google, tak implicitně jako faktor přispívající k míře okamžitého opuštění.
Ve dvou identicky seřazených místech by vám další 1Kb mohl odhodit třetí místo na Googlu na 4. nebo 5. místě. Mohlo by vás dokonce propadnout z desátého do jedenáctého - jinými slovy ze strany 1 na stránku 2 - se všemi souvisejícími dopady na příjmy vašeho klienta.
Nejvíce optimalizovaný obraz je, není žádný obrázek vůbec. Pokud máte na svém webu pět obrázků a vy jste jeden z nich, ušetřili jste si 20%, možná ještě důležitější, že jste si uložili žádost http. Pokud bychom upustili všechny obrázky z našich stránek, ušetřili bychom 100% a všech pět požadavků http. Tak proč to neudělat?
Obrázky z našich stránek neunikáme, protože v krátké době komunikují efektivněji než text. Vytvářejí emoční spojení, které přitahuje uživatele do obsahu.
Víme, že uživatelé nečtou webové stránky . Velmi málo lidí čte hlubší obsah online. Obrázky nám umožňují spojit se, komunikovat a posilovat značku za zlomek času, který může text spravovat.
Obrázky mohou být velké a těžkopádné ke stahování, ale po vykreslení v prohlížeči jsou mnohem efektivnější než než text pro vytvoření interaktivního uživatelského rozhraní a posílení zprávy značky.
Odpovědné obrázky nám pomáhají zajistit, že vytváření citových spojení se neztratí, když netrpělivý uživatel stiskne tlačítko Zpět.
SVG (Scaleable Vector Graphics) je jednou z pravých průkopnických technologií na webu. Je to tak daleko před křivkou, že většina designérů ještě neuznává svůj skutečný potenciál.
SVG - jak název napovídá - je založen na vektoru. To znamená, že grafiky SVG jsou konstruovány z bodů, úhlů a vzdáleností. SVG je také - jak název napovídá - škálovatelný, což znamená, že se bude zobrazovat stejně dobře i na 5k iMac nebo na smartphonu s Androidem, aniž by došlo ke ztrátě kvality a žádné změně velikosti souboru.
Pokud máte plochou ilustraci, ikonu, logo, téměř vše, co lze zobrazit jako SVG, pak je cesta SVG.
Většina obrázků na webu jsou bitmapy. Obecně řečeno, jak funguje bitmapa, je popsat každý pixel jeden po druhém, jeho barvu (v RGB - červené, zelené a modré) a v některých případech jeho průhlednost. Pokud máte obraz o rozměrech 100 × 100 × 100 pixelů, pak máte obrázek s 10 000 pixely; jestliže každý pixel má 4 hodnoty pro jeho popis, pak obrázek má s ním 40 000 bitů dat. Zní to jako hodně, že? Někdy je to méně než vektorová grafika.
Zvažte obrázek 1px za 1px; , které by vyžadovaly 4 bit dat, které by se měly zaznamenávat jako bitmapa (červená, zelená, modrá a alfa). Nyní zvažte stejný čtverečný pixel zaznamenaný jako vektor; které by kromě hodnot RGBA vyžadovalo i x, y, šířku a výšku obdélníku.
To jsou hrubé příklady, ale jsou přesné. Často je vektorová verze obrázku - pokud máme k dispozici i jeden - přesahuje velikost souboru ekvivalentní bitmapy a bitmapa je jedinou rozumnou volbou.
Stejně jako většina problémů v životě (pokud je váš život online) mohou být citlivé obrázky řešeny pomocí JavaScriptu. Ve skutečnosti již několik let byl problém JavaScriptu jediným možným řešením. JavaScript může testovat schopnosti agenta uživatele, určit, jaký prohlížeč je, a psát standardní značku HTML, která obsahuje příslušný obrázek.
Weboví návrháři, kteří chtějí používat JavaScript, obvykle tak činí, protože někteří lidé ji vypnou . To však není pravda, zejména na mobilním webu, ale existují určité přetrvávající problémy: psaní obrázku pomocí JavaScriptu znamená, že obraz nebude analyzován boty pro vyhledávače a bude zobrazen pouze po skriptu jako např. běh.
Největším problémem při používání JavaScriptu je to, že se jedná o zneužití jádrového záměru jazyka JavaScript. HTML uchovává data, CSS zpracovává prezentaci, funkci JavaScript zpracovává. Když se rozbijeme z těchto strukturovaných rolí, začneme se setkávat s problémy, které vyžadují hackery k jejich opravě. Obrázky jsou data, a proto by měly být zpracovány pomocí HTML.
Vzhledem k tomu, že byl RWD nejprve přemýšlel, byly snímky největším úskokem. Ale teď začínáme najít způsoby, jak vyřešit různé problémy. Techniky, které jsou tvrdě bojující a dostatečně úspěšné, aby byly považovány za nejlepší praxi. Vyhrazené vývojáři se vzdali svého času lobbovat WC3 pro oficiální řešení, a nyní, poprvé, citlivé obrázky jsou praktické.
Klíčem k citlivým obrazům je, že byly navrženy s plným vědomím nedostatků na webu. Zaručila se, že řešení citlivých obrazů neporušuje stávající prohlížeče, takže i v prohlížečích, které nepodporují citlivé obrázky, bude kód ticho chybět a budou zobrazeny výchozí snímky.
V tomto článku se podíváme na dva oficiální prvky HTML, které odpovídají na obrázek: srcset a obrázek.
V současnosti Edge, Safari a iOS Safari podporují pouze podmnožinu specifikace srcset . Firefox, Chrome, Opera, prohlížeč Android a nadcházející verze Safari a iOS Safari ji plně podporují. (Budeme diskutovat o rozdílech níže.)
V současné době je obrazový prvek plně podporován prohlížeči Firefox, Chrome, Opera a Android. Edge, Safari a iOS Safari jej nepodporují a neoznámili časový harmonogram pro jeho implementaci.
I mezi prohlížeči, který podporuje nový kód, existují nesrovnalosti, protože různí výrobci prohlížečů interpretují specifikace W3C různými způsoby. Například při specifikaci změny obrazu z malého na velký na základě velikosti výřezu se některé prohlížeče přepnou na velký obrázek, pokud je výřez větší o 1px než je požadovaná velikost malého snímku, ostatní přepínají na velký obrázek pouze v případě, že výřez zvýhodněný velkým obrazem je plně shodný.
Stručně řečeno, prohlížeče jsou rozděleny do dvou táborů: ty, které upřednostňují obrázky s vyšší kvalitou, pokud je to možné, a ty, které upřednostňují menší stahování, pokud je to možné. Výrobci prohlížečů stále touží po tomto, někdy se ukázalo, že někoho se bude ukázat jako nejpopulárnější - osobně doufám, že je to druhá, protože jak bylo uvedeno výše, výkonnost je pro uživatele velmi důležitá.
Zatím nejlepší volbou pro webové designéry je dodržet specifikaci a nepokoušejte se odhadnout prohlížeč. Koneckonců, výchozí zkušenost v prohlížeči (vyšší kvalita nebo rychlejší stahování) je součástí toho, co uživatel zvolí výchozí prohlížeč, takže pokud je uživatel vědom rozdílných přístupů, pak je přednost prohlížeče pravděpodobně také preferováno uživatelem .
Během historie webu jsme použili jeden prvek pro označení obrázku, prvku img . V HTML5 elementu img prošel jemný posun ve své roli, který je navržen tak, aby umožňoval citlivé obrázky: element img již nepředstavuje obrázek, je nyní zástupným místem pro obrázek.
Tento rozdíl je důležitý, protože zatímco prvek img dříve obsahoval jednu sadu obrazových dat - ať už bitmap nebo vektor - nyní může obrázek obsahovat více souborů dat.
Prvek img (k získání rekapitulace pro všechny nekódovače) vypadá takto:
Odpovídající verze obrázku prvku img vypadá takto:
Sotva nějaká změna vůbec. Při pohledu na tento kód si všimnete jednu důležitou věc: kód je zpětně kompatibilní. Pokud dojde k prohlížeči, který nerozumí atributu srcset , jednoduše jej ignoruje a vykreslí obraz podle původních specifikací z roku 1993.
Co to znamená, že nyní můžeme v našem značení používat citlivé obrázky bez nutnosti detekce vlastností.
V novém citlivém prvku img se src používá především jako výchozí obrázek a pro prohlížeče, které nerozpoznávají srcset, zatímco srcset obsahuje všechny dostupné obrázky ve formátu high-res pro tento zástupný symbol.
Při vykreslování elementu img se prohlížeč sám rozhodne, který obrazový soubor je nejvhodnější.
Nyní, když víme, že srcset bude tiše selhat v prohlížečích, které jej nepodporují, můžeme přidávat další obrázek:
V tomto případě prohlížeč, který podporuje srcset , zobrazí image-b.jpg a prohlížeč, který nepodporuje srcset , zobrazí image-a.jpg.
Je důležité si uvědomit, že prohlížeč stahuje pouze obrázek, který rozhodne, že se chce zobrazit, neposune oba obrázky a pak si je vybere.
Bohužel tohle nás nedostane příliš daleko, protože pokud neprokazujeme podporu srcset , neexistuje žádná praktická aplikace pro přepínání obrázků na základě samotné podpory srcset .
Řešením je poskytnout prohlížeči další informace o tom, který obraz by si měl vybrat. K tomu je třeba poskytnout informace o dostupném prostoru nebo o hustotě pixelů.
Popisovač x udává prohlížeč, jak hustý jsou obrazové body v obraze.
Pokud například chcete jako standardní obrázek poskytnout obraz o síle s dvojnásobným počtem obrazových bodů, určit srdeční obraz v sítnici, poté mezera a poté klíčové slovo "2x".
Máme náš obrázek:
Chcete-li do prohlížeče přidat možnost sítnice, přidáme následující srcset:
V tomto případě existují tři možné výsledky:
Podpora prohlížeče je dobrá a rychle se zlepšuje. S jedním atributem jsme vyřešili hádanku citlivých obrázků.
Jedna poslední věc, kterou je třeba poznamenat o deskriptoru x: volba, který obraz se má načíst, je založen na hustotě pixelů, takže pokud uživatel přiblíží svůj prohlížeč na 200% (účinně sníží velikost obrazu o polovinu a zdvojnásobí tak hustotu pixelů), 2x obraz se načte. To může mít nepříznivý vliv na přístupnost - rozhodně nechceme vidět stránky, které se zatěžují pro zrakově postižené, jen proto, že se rozhodnou přiblížit prohlížeč.
W-deskriptor je o něco pokročilejší než deskriptor x. W-deskriptor pracuje tak, že řekne prohlížeči, kolik skutečných pixelů existuje na ose x (šířka) konkrétní volby obrazu.
Edge, Safari a iOS Safari nepodporují w popisovač v době psaní, takže jeho užitečnost je poněkud snížena.
Vraťme se k původnímu obrazu:
Je-li tento obrázek nativní šířka 1600 pixelů a pokud chceme přidat obrázek sítnice, stejně jako u výše uvedeného deskriptoru x , specifikujeme obrázek v atributu srcset, který má šířku 3200 pixelů:
Existuje jeden hlavní gotcha s popisem w: ačkoli atribut src je při zadávání snímků pomocí x-deskriptoru považován za výchozí , ignoruje jej zcela prohlížeče, které podporují srcset, pokud používáte deskriptor w. Při použití w-deskriptoru musíme explicitně specifikovat výchozí přidáním druhé volby image srcset s vlastním popisem w a oddělovat je čárkou:
Což nás vede úhledně na ...
Být schopen určit volbu obrazu s vysokým rozlišením pro prohlížeč přímo v našem kódu HTML je rozhodně cool, ale jak jste pravděpodobně uhádli, dostane se ještě chladnější, když specifikujeme více obrázků.
Cílem citlivých obrázků je poskytnout obraz nejvyšší kvality, který lze použít přístupovým zařízením, ale nic víc. Takže jednoduché dodávání obrazu sítnice není přiměřené, potřebujeme dodat obrazy např. 1x, 1,5x, 2x, 2,5x a 3x.
Znovu je zde naše původní značka obrázku:
Zde je obrázek, který je dodáván jako volitelný prohlížeč:
Tady je, tentokrát s dalšími možnostmi v srcsetu, oddělených čárkami:
Protože klíčová slova znamenají různé věci různým lidem, považuji za vhodné jmenovat své obrázky podle x-deskriptoru, ke kterému patří, a to jak jako pomůcka pro osobní paměť, tak i pro to, aby různé velikosti byly jasné ostatním členům týmu:
Nezapomeňte, že prohlížeč neříkáme, jaký obrázek se má zobrazovat, necháváme si je seznámit s možnostmi, které jsou k dispozici, a umožňují mu, aby si sám vybral. Prohlížeč stahuje pouze jeden z těchto obrázků.
Jeden gotcha s několika obrázky: nikdy nespecifikujte dva obrázky v atributu srcset s odpovídajícím deskriptorem x a deskriptem w, například:
Atribut velikosti je obzvláště zajímavým přírůstkem specifikace, protože atribut velikosti přebírá jeho hodnoty relativně k výřezu, nikoliv k obrázku.
Pomocí hodnoty vw (šířka výřezu) určíme oblast obrazu vzhledem k šířce prohlížeče - nezapomeňte, že element img je nyní skutečně jen zástupným symbolem, takže nejsme specifikovat skutečnou velikost obrazu, specifikujeme velikost zástupného symbolu, který bude obsahovat obrázek.
100vw je 100% šířky výřezu, 50vw je 50% šířky výřezu, 25vw je 25% šířky výřezu, atd.
Pokud bychom chtěli nastavit šířku img na polovinu šířky prohlížeče, měli bychom použít:
To není zvlášť užitečné, dokud jej nezkombinujeme s dotazy médií ...
Atribut velikosti je mnohem silnější, když jej kombinujeme s dotazy médií. Můžeme oddělit různé šířky výřezu pomocí čárkami a řekněme prohlížeč, který má používat dotaz ve stylu CSS.
Představte si například, že chceme, aby obraz dosahoval 80% šířky našeho výřezu na většině zařízení, ale na malých zařízeních (jako jsou telefony) o šířce 380 pixelů nebo méně, chceme co nejvíce využít prostor, který je k dispozici až po 100% šířky, bychom psali takto:
Podle této logiky bude každý prohlížeč s výřezem 380 pixelů nebo méně nastavovat šířku obrazu na 100% výřezu. Jakýkoli jiný prohlížeč způsobí, že se mediální dotaz vrátí na hodnotu false a prohlížeč se přesune na další hodnotu atributů velikosti , což je v tomto případě 80vw.
Obecně platí, že jsem nepohodlná při použití dotazy médií v HTML. Stejně jako citlivé obrazové údaje patří do HTML (ne JavaScript), mediální dotazy patří do CSS (ne HTML). Možnost je však pro vás, pokud ji potřebujete.
Nevím o vás, ale jsem nadšený možností srcset. Je to jednoduché řešení obtížného problému a zdá se, že doručuje vše, co potřebujeme.
Ale, jako autobusy, vy čekáte 20 let pro oficiální řešení citlivých obrazů a pak se dva najednou objeví. Stejně jako atribut srcset prvku img máme také obrazový prvek.
Prvek obrázku je jiným zástupným znakem, i když tradičním. Byla navržena tak, aby napodobovala video a audio prvky v HTML5, takže její syntaxe bude většinou známa. Prvek obrázku je určen k použití, když potřebujete větší kontrolu než srcset může poskytnout.
Je smutné, že obrazový prvek má mnohem méně podpory prohlížeče než srcset a ne vždy se tiše podaří .
Zde je náš originální obrazový prvek:
Zde je náš obrázek vnořený uvnitř obrazového prvku:
Můžeme také specifikovat srcset pro prvek img uvnitř prvku obrazu :
Prvek obrazu nezažije, dokud nepřidáme zdrojový prvek:
Při výběru souboru, který má být použit, bude prohlížeč spouštět s prvním prvkem zdroje a přesunutím prvků, dokud nenalezne ten, jehož atribut média se změní na true, pak použije srcset tohoto zdrojového prvku .
Mohli bychom například určit různé obrázky pro formáty na výšku a na šířku:
Můžeme také zadat více obrazů pomocí deskriptoru x a w-deskriptoru:
Stejně jako při použití dotazů médií v atributu velikosti , zpochybňuji moudrost ovládání verzí obrázků založených na stylu, v značce namísto stylu. Možnost použití atributu médií však existuje, pokud ji potřebujete.
Prvek obrázku skutečně přichází do své vlastní, když se používá k výměně různých typů obrázků.
Představte si, že máme standardní soubor PNG, ale chceme použít a WebP soubor, což je typicky o 26% menší - nezapomeňte, že citlivé obrázky představují nejvyšší kvalitu obrazu v nejmenší velikosti - avšak v současné době podporují pouze prohlížeče Chrome, Opera a prohlížeč Android. Abychom zjistili, zda je podpora WebP podporována, musíme použít atribut type :
V takovém případě prohlížeč zkontroluje, zda je podporován formát obrazu WebP. Pokud ano, zjistí, zda má obrazovka dostatek hustoty pixelů k zobrazení obrázku retina-image.webp , pokud ne, zobrazí obrázek image.webp . Pokud WebP není podporován, prohlížeč bude přeskočit přímo na element img a pracovat přes volby srcset a src způsobem, jakým jsme již obeznámeni.
Atribut typu znamená, že můžeme poskytnout mnohem menší formáty obrázků, které jsou podporovány, což vede k menší velikosti souborů.
IE9 má známý problém, který zabraňuje tomu, aby obrazový prvek selhal tiše. Abyste mohli zvládnout IE9, musíte IE9 popřít, že zdrojové prvky jsou součástí prvku videa :
Je to ošklivé řešení, ale lepší než žádné řešení. Můžeme jen doufat, že vydání systému Windows 10 urychlí zánik IE9, protože zatímco Edge ještě nepodporuje obrazový prvek, nepodporuje ho správným způsobem (tím, že ho ignoruje).
Existují polyfily které vám pomohou podporovat obrazový prvek v IE, ale mým vlastním předstihem je vyhnout se jim. Nedůvěřuji k problémům s opravou JavaScript, ovlivňuje výkon a vede k méně udržovatelnému kódu.
Z tohoto důvodu vám nyní doporučuji vyhnout se obrazovému prvku. Pokud nepoužíváte rozsáhlý web pro elektronické obchodování, je nadstandardní úspora času stahování, který nabízí formát WebP, pravděpodobné, že vyváží potíže s opravou nápisu pomocí skriptu.
Jakmile IE9 klesne pod 1%, což by mělo dojít v určitém okamžiku příštího roku, obrazový prvek se stane životaschopným. Pokud si to přečtete v roce 2016, pravděpodobně budete chtít jít.
Na rozdíl od SVG, bitmapové obrázky se nemění. Naše strategie pro jejich zpracování, ať už používáme srcset nebo prvek obrázku , je dodat jiný obrázek na základě možností prohlížeče. Abychom to mohli zvládnout, musíme dodat různé velikosti obrazu.
Většina aplikací pro úpravu obrázků automatizuje proces exportu více verzí jednoho snímku. Nezáleží na tom, jakou aplikaci používáte, za předpokladu, že skončíte s více obrazovými velikostmi, aniž byste museli ručně měnit velikost a ukládat každou z nich.
Adobe Photoshop je de facto bitmapový editor. Není to skvělá volba pro konstrukční práci, ale její pracovní proces zpracování obrazu je hladký a spolehlivý. Generování více rozlišení v aplikaci Photoshop je poměrně jednoduché:
Kredit za obraz přejde Philip Collier .
Další informace o vytváření obrázků ve Photoshopu, viz zde.
Na základě těchto obrázků můžeme prohlížeč nabídnout pět různých možností:
Element img zašel za 20 let. Nebo, abych byl přesnější, element img byl nepřetržitý po dobu 18 let, poté byl za linku v posledních dvou letech spuštěn, až do té míry, že je nyní poměrně sofistikovaný.
Důležité je, že jsme se dostali k řešení (řešením).
Ze dvou možností, které jsou k dispozici, srcset a obrázek, první je zdaleka nejvíce podporovaná. Pokud stavíte 95% webů tam, pak je nejlepší volbou lepší podpora a jednodušší implementace atributu srcset .
Pokud provozujete velký web elektronického obchodu s tisíci produktovými obrázky, může být užitečná práce ve formátu WebP, zejména proto, že podpora prvku obrazu se v příštích několika letech zvyšuje.
Největší slabostí v současných volbách je, že prohlížeče v současné době nemají způsob výběru snímku na základě rychlosti připojení. Jsme nuceni věřit, že schopnější zařízení jsou také na špičkových přípojkách.
Nakonec můžeme konečně sloužit nejkvalitnějším obrazům prakticky možným v nejmenším rozměru. To znamená lepší zkušenost, v kratším čase, což může být jen něco, co bychom přijali.
Doporučené obrázky používají, horský obraz a obrázek zařízení přes Shutterstock.