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

Vektorové a rastrové obrázky

Google       Google       21. 6. 2006       57 394×

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 První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com. Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.

Reklama
Reklama
Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Celý článekGoogle2. listopadu 2017PR
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

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ý