Vektorové a rastrové obrázky
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Vektorové a rastrové obrázkyVektorové a rastrové obrázky

 

Vektorové a rastrové obrázky

Google       Google       21. 6. 2006       53 139×

Mnoho lidí neví, co vlastně znamená rastrový obrázek, jak se liší od vektorového, jak je vytvořit a jejich hlavní výhody/nevýhody. Protože se množí i dotazy na tyto otázky, pokusím se na ně odpovědět.

Reklama
Reklama

Pokud vytváříte webové stránky, jistě víte, že se v nich využívá dvou typů obrázků: vektorové a rastrové. Vektorové obrázky jsou poměrně novinkou zatímco rastrové obrázky již známe dlouho a postupně se staly uznávaným webovým standartem.

Nejprve si vytvoříme obrázek (resp. obrázky), na kterých budu ukazovat rozdíly mezi těmito typy &ndas; nakreslím například kruh:

Na první pohled asi nepoznáte, zda-li se jedná o vektorový obrázek či rastrový.

Vektorový obrázek

Vektorový obrázek je založen na matematických výpočtech a zobrazuje se pomocí čar a křivek. Takové obrázky můžeme vytvořit například v programu Adobe Illustrator, který je přímo určen pro práci s obrázky s vektorovou grafikou nebo Adobe Photoshop (od verze 6).

Nyní si tedy nakreslíme kruh stejný jako nahoře, ovšem přiblížíme si levý dolní roh &ndas; abychom viděli detail.

Jak je vidět, i po několikanásobném přiblížení není vidět žádné hrubé místa a obraz zůstává stále ostrý (tohoto využívá například technologie Flash). Ostřejší okraje ale nejsou jedinou výhodou vektorovývh obrázků. Mezi další výhody patří možnost větší komprese než u rastrových obrázků a možnost změny velikosti bez snížení kvality. Pokud ovšem obrázek obsahuje miliony různých barev, bude jeho zobrazení a možnosti komprese horší než v rastrovém. Vektorové obrázky také nejsou podporovány všemi prohlížeči – většina prohlížečů potřebuje přídavný modul – plug-in.

Multimediální weby jsou většinou založeny na vektorové grafice, ale taktéž se na nich mohou používat rastrové obrázky (a také používají), ale přesto stále vyžadují modul plug-in. Dalším příkladem vektorové grafiky je technologie SVG (Scalable Vector Graphics) – jedná se o jazyk, který umožňuje vytváření vektorových obrázků, tvarů a textů. Tím se nejen zjednodušuje údržba, ale je také možné, aby byl takový text indexován a mohl být nalezen pomocí vyhledávačů. I grafika SVG ale bohužel většinou vyžaduje modul plug-in.

Rastrový obrázek

Rastrový obrázek se skládá z jednotlivých obrazových bodů – pixelů. Takové obrázky můžeme vytvořit programy jako Adobe Photoshop, Corel Paintshop, Malování, Gimp a další.

Nyní si tedy nakreslíme kruh stejný jako nahoře, ovšem přiblížíme si levý dolní roh – abychom viděli detail.

Vidíme, že na oko jsou oba obrázky stejné, po přiblížení si ovšem můžeme všimnout jednotlivých pixelů. Kolem hlavní černé barvy jsou i odstíny šedé, zjemňující okraje neboli vyhlazování hran (anglicky antialiasing) a vytvářejí iluzi, jakoby se jednalo o jednolitou barvu. Pokud bychom antialiasing nepoužili na obrázek, již z dálky by byly vidět jednotlivé pixely.


Obrázek bez použití antialiasingu

I při zvažování rozdílů mezi vektorovou a rastrovou grafikou by ale měl mít webdesigner na paměti první pravidlo webdesignu: To, že něco můžete udělat, ještě neznamená, že byste to udělat měli. Rastrové obrázky jsou i v současnosti většinou webdesignerů preferovány. Jedná se o fakt, který se hned tak nezmění. Může trvat poměrně dlouho, než se stamiliony uživatelů webu rozhodnou upgradovat na prohlížeč, který by podporoval vektorovou grafiku (v poslední době se o to snaží Opera), nebo si stáhnou přídavný modul plug-in pro podporu těchto obrázků.

Vzhledem k tomuto faktu je důležité, aby webdesigner rozumněl aktuálně používanům formátům obrázků a aby je uměl používat. Jakmile plně pochopíte princip práce s rastrovými obrázky (v následujícím článku), můžete je začít používat k vytváření působivých, rychlých a snadno použitelných webů.

V příštím článku se podíváme velmi důkladně na formáty GIF a JPG – jak probíhá komprese, kdy použít jaký formát, jejich výhody, průhlednost u GIFu, animace apod.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

1 názor  —  1 nový  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Lukáš ChurýLukáš je šéfredaktorem Programujte, vyvíjí webové aplikace, fascinuje ho umělá inteligence a je lektorem na FI MUNI, kde učí navrhovat studenty GUI. Poslední dobou se snaží posunout Laser Game o stupeň výše a vyvíjí pro něj nové herní aplikace a elektroniku.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Reklama
Reklama
Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

Reklama autora

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý