Zastavte pronásledování rozlišení obrazovky
Žijeme v tak vzrušující době ve světě internetu. Technologie a normy se pohybují dopředu rychlostí, která je možná rychlejší a vzrušující než kdy předtím. Jak se mění věci, tak i naše zvyky a jedna oblast, o které se domnívám, že zaznamenala větší změny než většina, by měla být změna v rozlišení, kterou nyní používají naše zařízení.
Rozlišení je zábavná věc, kterou lze měřit; není to změna fyzické velikosti, ale změna jasnosti. Nevytváří obraz, je jasnější a bohatší, ale zpevňuje je. Je to také něco, co lidé zřídka pochopí hodnotu, dokud ji neuvidí pro sebe.
Samozřejmě, když dostaneme chuť displejů s vysokým rozlišením, jsme zvedáni. A my všichni chceme, aby naše webové stránky (a webové stránky našich klientů) vypadaly skvěle na zařízeních, která sportují tyto displeje. Mnoho webových designérů závodí na tento cíl tím, že vytváří obrazy pro každé nové rozlišení, které přijde naším způsobem. Nebo, jak jej volám v tomto článku, "pronásleduje rozlišení obrazovky".
Úvod do SVG
Mnoho z nás ví, jaké jsou SVG (Scalable Vector Graphics). Viděli jsme to na webových stránkách W3C HTML5 v sekci "3D, grafika a efekty". SVG je standardní technologie HTML5, která zobrazuje obrázky s kódem. Nebo něco.
Přinejmenším to je obecná reakce, kterou jsem dostal, když jsem se zeptal lidí o grafice SVG. Není to opravdu něco, o co se lidé zajímají, protože jeho hodnota není zcela pochopena.
Chci vám ukázat, jak se vyhnout "pronásledování rozlišení obrazovky" a právě tak se stává, že standard SVG nám může pomoci udělat to.
Stav grafiky sítnice
Když říkám "grafiky sítnice", odkazuji se na všechna zařízení, která mají rozlišení obrazovky vyšší než u tradičních displejů, které mají rozlišovací schopnost nad 72ppi (pixely na palec).
Apple skvěle rozbil bariéru 72ppi s iPhone 4, zařízením, které mělo fantastický nový displej s vysokým rozlišením, který vypadá na rozdíl od čehokoli jiného, co jsme viděli dříve. Kromě toho, když jste jej použili k procházení webu ... web vypadal jako odpad.
Web měl 72ppi optimalizované obrázky. V době psaní této zprávy, většina webu stále dělá, dva roky po spuštění iPhone 4.
Nyní máme nejrůznější zařízení s grafikou kvality Retina. Je to pomalu dělat jeho cestu přes celou řadu Apple, rozšíření na iPod Touch, iPad a dokonce i nejnovější MacBook Pro. Inteligentní telefony se objevují po celém místě s displeji s vysokým rozlišením, takže "standardní" zobrazení rozlišení téměř v tomto okamžiku cítí starou klobouk.
Je stále závislý na rozlišení
Když komunita webového designu překonala problém s rozmazaným obrazem s podmíněně načteným @ 2x obrázky (obrazy, které byly vytvořeny tak, aby byly dvakrát větší než jejich originální protějšky, naložené pouze na zařízeních s vysokým rozlišením), web vypadal znova dobře, z větší části . Někteří designéři dokonce inzerovali své webové stránky jako "nezávislé řešení".
Samozřejmě, co by skutečně měli inzerovat své stránky, jak bylo "optimalizováno pro dvě rozlišení obrazovky".
Zařízení budou stále lepší, řešení se bude stále zlepšovat a web bude i nadále užívat na rostoucím počtu tvarových faktorů. Co s nevyhnutelnou budoucností @ 3x? A co @ 4x? Co když se standardní "1x" stává zbytečným? Co dělá 3x "@ 3x" a ne "@ 2.5x"?
Špatně.
A co víc, tento druh techniky není příliš rozšířený. Procházím web na výše uvedeném MacBook Pro s Retina Displayem a většina webu je smutně přesně tam, kde to bylo vždy od iPhone 4: rozmazané. Vytvoření všech vašich webových snímků je opět náročným zvukem, obzvláště když celý svět webového designu vytváří tak dlouho s bitmapami.
Nezrozumitelný web
Dokonce i dnes, s našimi @ 2x obrázky, stále nemůžeme přiblížit webové stránky, aniž by to znova bylo ošklivé. Text zvládne zoom v pohodě, ale pro srovnání, obrazy jen vykřikují pro ty budoucí @ 4x exporty (něco, co nikdo nepovažuje za vhodné sloužit právě na off-šanci, že někdo by chtěl přiblížit 4x na ikonu RSS) .
Chystáte se skutečně nezávisle na řešení
Problém je v bitmapových obrázcích. Vždy jsme věděli, že se nezvyšují, a teď se nijak neliší. Potřebujeme vektorovou grafiku na našich webových stránkách. Vektorová grafika je vypočítána pomocí řady instrukcí, nikoli pečených na mřížku, kde každý pixel představuje barvu. Zadejte, SVG.
Jedna velikost pro všechny
Vzhledem k tomu, že grafika SVG je vektorová grafika (odtud název "škálovatelná vektorová grafika"), budou vypadat úžasně na včerejších, dnešních i dokonce zítřejších rozlišeních obrazovky. Navíc díky vzorec vektorové grafiky můžete přiblížit libovolné zařízení a obrázky zůstávají skvěle vypadající.
Rychlejší zatížení
Vytváření obrázku o šířce 2 000 pixelů na 2000 pixelů webovému návrháři nezaznamenává nic absurdního. Bude to trvat příliš dlouho, než se načtou, přinesou nějaká mobilní zařízení na kolena a 4000px x 4000px "@ 2x" by byla bláznivost. A jak se rozlišení zlepšuje a zlepšuje, je to prostě neudržitelné. S SVG, protože je to vektorový formát, nezáleží na tom, zda je obraz 20px nebo 2000px; doba načítání bude přesně stejná. Jediné, co dělá rozdíl v době načítání, je složitost každého obrazového souboru.
Můžete jej použít dnes
SVG nemusí být podporována napříč deskou, ale Modernizr může funkci - detekovat. Svou verzí SVG a non-SVG můžete využívat všech výhod programu SVG, zatímco staré prohlížeče ponecháte s @ 1x PNG. Je to tak jednoduché:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Omezení SVG
Není to obtížné vytvářet grafiku SVG z jakéhokoliv vektorového obrazu. Mnoho aplikací, jako je Adobe Illustrator a Inkscape, lze exportovat do SVG nativně. Existuje však několik věcí, které musíte znát o stránkách SVG pro web.
Nemohou obsahovat bitmapové obrázky libovolného druhu.
Jistě, můžete je přidat do aplikací pro tvorbu SVG, jako je Illustrator nebo InkScape, a uložit svou práci jako SVG, ale nebudou vykreslovat, kde je to důležité: váš webový prohlížeč. CSS wizardry bude nutné načíst bitmapu v horní části SVG tam, kde je to vhodné.
Může být navždy zatíženo, pokud je komplikované
Pokud uděláte komplikovaný SVG, budete narazeni na dobu načítání, která není na rozdíl od výše uvedeného obrázku 2000px x 2000px. Nechcete například kreslit složitou malbu ve formátu SVG.
Musí to být jednoduché
Aplikace jako Illustrator a Inkscape mohou dělat mnohem víc, než je váš webový prohlížeč schopen zvládnout. Jsou to plné foukané ilustrační aplikace, nikoliv webové aplikace SVG pro tvůrce. Ve skutečnosti je bezpečné předpokládat, že 90% funkcí, které tyto typy nabídek aplikací nebudou dostupné divákům na webu. Pokud jste obeznámeni s vektorovým softwarem, budete se muset naučit alternativní způsoby, jak vytvořit efekty, které jste milovali.
Zkuste jazyk naučit
Kód SVG není něco, co můžete "vidět ve vaší mysli", jako můžete při čtení HTML. Jedná se o řadu instrukcí namapovaných proti sobě, prvku podle prvku, vrstvy po vrstvě. Bohužel, od dnešního dne budete muset čas od času ponořit, protože existují některé výsledky, které Adobe Illustrator nenabízí.
Například obrázky v aplikaci Illustrator mají plátno, na kterém kreslíte; je nastavená šířka o nastavenou výšku. To je skvělé, ale pokud chcete tyto informace ovládat v prohlížeči, potřebujete tyto informace odstranit ze samotného SVG (poznámka: některé prohlížeče budou interpretovat váš CSS bez ohledu na deklarované rozměry SVG, ale ne všechny to dělají). Není to obzvláště těžké, ale může to být bolest hlavy. Hodně stojí za to strávit trochu času poznáním jazyka, abyste mohli ještě více manipulovat s SVG.
SVG ve volné přírodě
Loga
Loga by měly být typicky ve vektorovém formátu, takže jsou skvělým způsobem, jak přenést SVG do webových stránek. Pomocí výše uvedeného značkování máte vše, co potřebujete k tomu, abyste svými prvními prvky SVG získali online.
Ikony
Ikony jsou skvělým kandidátem na SVG. Tolik, že jsem vytvořil plnou sadu ikon pomocí grafiky SVG. Rozšiřitelná povaha SVG znamená, že ikony mohou být použity v jakékoliv velikosti a umožňují širokou škálu návrhů.
Animace
Animace jsou také skvělým příkladem pro grafické využití SVG. Vzhledem k tomu, že animace jsou obvykle přivázány k pevné šířce a výšce, SVG jde určitě k tomu, aby pomohly animacím reagovat. Flash používané vektorové grafické prvky, nyní animace HTML5 také.
Obrázky na pozadí
Obrázky na pozadí byly pro vývojáře webových stránek vždy choulostivé. potenciální doby načítání, jak jsem uvedl výše, může být blázen. Obrazy na pozadí SVG mohou být stejně velké jako vy; stále mají rychlé doby načítání, pokud nejsou skutečně složité.
Závěr
Celkově, nezávislost řešení je fantastickým cílem webových designérů a vývojářů, aby se snažili. Bude to dokonce znamenat, že jejich designový vkus bude zastaralý předtím, než jsou jejich snímky stránek. Přestože je důležité je s otevřenými očima přistupovat, je zcela jasné, jak se SVG grafika může přiblížit budoucnosti úplné nezávislosti řešení.
Když načtete web s povolenou funkcí SVG na zařízení s vysokým rozlišením, jako je iPad 3, a přiblížíte se, budete prodáváni.
Doufám, že tento článek jde určitě na podporu nezávislého myšlení v oblasti řešení v oblasti návrhu a vývoje webových stránek a doufám, že někteří z vás povzbuzovali, aby přemýšleli o tom, jak může SVG pracovat pro vaši další stránku.
Byl jsem v bazénu SVG na chvíli a musím říct, že voda nikdy nebyla krásnější.
Jste konverze SVG nebo zobrazujete scalované bitmapy pro zobrazení sítnice? Jsou vektory budoucností webové grafiky? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, vektorový obrázek přes Shutterstock.