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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

Vektorové a rastrové obrázky

Google       Google       21. 6. 2006       59 556×

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 Generace Z: Proč je pro ně důležité, kolik mají follow?

Generace Z: Proč je pro ně důležité, kolik mají follow?

Životem jdou vybaveni chytrým telefonem v ruce a nedokáží si představit, že by to bylo jinak. Narodili se okolo přelomu tisíciletí a nikdy nezažili nic jiného než digitalizovaný svět. Dotykové obrazovky měli poprvé v rukou na základní škole, ti mladší možná už ve školce. Proto mají na svět jiný pohled než jejich předci. První zástupci této generace začínají dospívat a my brzy uvidíme, jestli je to s nimi tak zlé, jak o nich mnohdy tvrdí jejich rodiče.

Reklama
Reklama
Obrázek ke článku Proč mají absolventi v IT přemrštěné očekávání, a je vůbec přemrštěné?

Proč mají absolventi v IT přemrštěné očekávání, a je vůbec přemrštěné?

Poměrně nedávno zveřejnil portál Platy.cz zajímavé statistiky, kde mladí počítačoví experti nastupují do firem s průměrnou mzdou cca 36 000 Kč, hned v závěsu je bankovní sektor se svými cca 31 000 Kč. Pro srovnání – v ostatních oborech se průměrná nástupní mzda pohybuje okolo 28 000 Kč. Nástupní platy jsou samozřejmě ovlivněny i lokalitou zaměstnavatele

Obrázek ke článku Zpětné sledování sportovních přenosů využívá v létě řada lidí.

Zpětné sledování sportovních přenosů využívá v létě řada lidí.

Červenec a srpen představují měsíce, kdy Češi nejčastěji jezdí na vícedenní dovolené. V této době však rovněž probíhá řada důležitých sportovních událostí, jako jsou olympijské hry nebo například právě odehrané fotbalové mistrovství světa. Míra promeškaných sportovních přenosů však klesá díky moderních technologiím a službám. 

Obrázek ke článku Průzkum JetBrains: JavaScript mezi programátory vede, Kotlin získává na popularitě

Průzkum JetBrains: JavaScript mezi programátory vede, Kotlin získává na popularitě

Společnost JetBrains, přední tvůrce softwarových nástrojů pro profesionální vývojáře s centrálou v Praze, představila výsledky průzkumu, který pomáhá lépe porozumět a získat vhled do pracovních návyků programátorů. Zjištění mohou být nápomocná nejen pro zvýšení efektivity, ale také pro vytvoření ideálního pracovního prostředí pro programátory.  

Reklama autora

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