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 555×

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 Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií do mobilů či notebooků upouštějí od letecké přepravy zboží. V letošním roce plánují dovézt až 80 % produktů lodí. Přitom před 5 lety byla většina baterií do mobilních přístrojů dovezených do České republiky přepravována letadlem. Za proměnou způsobu transportu akumulátorů stojí zpřísnění pravidel pro leteckou přepravu, která přinášejí vyšší náklady i náročnou agendu.

Reklama
Reklama
Obrázek ke článku JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá první nonstop veřejně dostupnou digitální dílnu světového formátu s vybavením za 3 miliony korun. Dílnu může využívat po registraci kdokoliv. V  prostorách vzniknou prototypy produktů místních startupů, projekty kutilů a studentů i umělecká díla. Cílem dílny je zpřístupnit veřejnosti drahé přístroje a přitáhnout více podnikavých lidí k technickým oborům.

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 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ý