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

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

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Vektorové a rastrové obrázky

Google       Google       21. 6. 2006       68 346×

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 Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Za poslední rok se podoba práce zaměstnanců změnila k nepoznání. Především plošné zavedení home office, které mělo být zpočátku jen dočasným opatřením, je pro mnohé už více než rok každodenní realitou. Co ale dělat, když se při práci z domova ztrácí motivace, zaměstnanci přestávají komunikovat a dříve fungující tým se rozpadá na skupinu solitérů? Odborníci na personalistiku dali dohromady několik rad, jak udržet tým v chodu, i když pracovní podmínky nejsou ideální.

Reklama
Reklama
Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Reklama autora

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032021 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý