Aplikacje internetowe Strona 1

Zapoznanie z rodzajami grafiki.

Zapoznanie z formatami grafiki.

Rozmiar oraz rozdzielczość obrazka.

Grafika komputerowa – dziedzina informatyki zajmująca się wykorzystaniem technik

komputerowych do celów wizualizacji artystycznej oraz wizualizacji i rzeczywistości.

Rodzaje grafiki:

• Grafika wektorowa

• Grafika rastrowa

• Grafika dwuwymiarowa (grafika 2D)

• Grafika trójwymiarowa (grafika 3D)

Podstawowa klasyfikacja grafiki komputerowej wyróżnia jej dwa rodzaje:

• grafika rastrowa – obraz budowany jest z prostokątnej siatki punktów

(pikseli). Najważniejsze formaty plików to: Bitmap, OpenRaster, ICO (Microsoft

file format). Formaty takie jak JPEG, TIFF, PNG oraz GIF także przechowują obraz według

koncepcji rastrowej, natomiast dodatkowo pojawia się w tych formatach kompresja.

Najważniejsze edytory graficzne: Photoshop, MS Paint oraz GIMP. Wadą tego rodzaju

grafiki jest to, że w wyniku powiększenia obrazu widoczne są poszczególne jego punkty.

Zastosowanie:

• zdjęcia fotograficzne,

• grafiki na strony www,

• wydruki poligraficzne.

• grafika wektorowa - jest rozszerzeniem grafiki rastrowej. W odróżnieniu od grafiki rastrowej

- wektorowa operuje nie na pojedynczych punktach, lecz na matematycznie opisanych

obiektach. Stosuje ona prymitywy graficzne takie jak: punkty, linie, krzywe oraz kształty lub

wieloboki do przedstawienia obrazów w grafice komputerowej. Wszystkie te prymitywy

graficzne bazują na równaniach matematycznych. Podstawowym standardem grafiki

wektorowej jest SVG. Podstawowe edytory graficzne: CorelDRAW, Adobe Illustrator, oraz

Inkscape.

Typy prymitywów najczęściej używane w grafice wektorowej:

• linie i polilinie,

• poligony,

• okręgi i elipsy,

• krzywe Béziera,

• bezigony,

• tekst np. TrueType, gdzie każda litera jest utworzona w oparciu o krzywe Bezier’a.

Grafika wektorowa sprawdza się najlepiej, gdy zachodzi potrzeba stworzenia grafiki, czyli mającego

stosunkowo małą ilość szczegółów, nie zaś zachowaniu fotorealizmu obecnego w obrazach.

Odpowiednimi przykładami użycia grafiki wektorowej są:

• schematy naukowe i techniczne

• mapy i plany,

• logo, herby, flagi, godła,

• różnego typu znaki, np. drogowe,

• część graficznej twórczości artystycznej (np. komiksy),

Przewaga grafiki wektorowej nad rastrow

• obraz wektorowy wymaga bardzo małej ilo

Rozmiar obrazu nie wpływa na rozmiar pliku. Niestety, obraz w praktyce nie ma

to „gra coś za coś” – potrzebny jest pot

w oparciu o algorytm,

• robiąc przybliżenie na krawę ź

jeśli krzywa jest reprezentowana np.

reprezentacje matematyczną

• przybliżanie krzywych nie zwi

grubość nie jest zwiększana albo nast

krzywe reprezentowane przez proste geomet

szersze podczas przybliżenia, tak aby wygl

kształtów. Problem ten znika w przypadku grafiki fraktalnej,

• parametry obiektów są pamię

graficzne, takie jak translacja,

jakości rysunku. Ponadto wymiary zwykle podaje si

urządzenia, co przekłada się

zmuszeni jesteśmy przez urzą

• z perspektywy grafiki 3D, renderowanie cienia w grafice

realistyczne, ponieważ cienie mog

wynikają. To umożliwia renderowanie z realizmem bliskim klasycznej fotografii.

Przewaga grafiki wektorowej nad rastrową:

obraz wektorowy wymaga bardzo małej ilości informacji, co przekłada się na małe pliki.

wpływa na rozmiar pliku. Niestety, obraz w praktyce nie ma

ebny jest potężny procesor do wygenerowania informacji wizualnej

enie na krawędź np. okręgu zawsze będzie to krawędź gładka. Z

li krzywa jest reprezentowana np. wielobokiem, to przybliżenie ujawni nie

matematyczną.

anie krzywych nie zwiększa proporcjonalnie ich grubości jako linii. Zwykle ta

ększana albo następuje utrata proporcji. Z drugiej strony, nieregularne

przez proste geometryczne kształty udaje się zrobić proporcjonalnie

żenia, tak aby wyglądały gładko i nie przypominały tych składowych

Problem ten znika w przypadku grafiki fraktalnej,

ą pamiętane i mogą być modyfikowane. To oznacza, że transformacje

graficzne, takie jak translacja, skalowanie, rotacja, wypełnianie, itp. nie degraduj

rysunku. Ponadto wymiary zwykle podaje się w jednostkach niezale

dzenia, co przekłada się później na optymalną rasteryzację w module rasteryzuj

my przez urządzenie wyświetlające do przejścia na postać rastrową

z perspektywy grafiki 3D, renderowanie cienia w grafice wektorowej jest znacznie bardziej

ż cienie mogą być abstrahowane do promieni światła, z których

żliwia renderowanie z realizmem bliskim klasycznej fotografii.

ę na małe pliki.

wpływa na rozmiar pliku. Niestety, obraz w praktyce nie ma „detalu”. Jest

procesor do wygenerowania informacji wizualnej

drugiej strony,

enie ujawni niewłaściwą

linii. Zwykle ta

proporcji. Z drugiej strony, nieregularne

proporcjonalnie

gładko i nie przypominały tych składowych

że transformacje

skalowanie, rotacja, wypełnianie, itp. nie degradują

niezależnych od

w module rasteryzującym, gdy

rastrową,

wektorowej jest znacznie bardziej

światła, z których

liwia renderowanie z realizmem bliskim klasycznej fotografii.

Kompresja grafiki

W celu zaoszczędzenia miejsca na dysku cz

Ogólnie można stwierdzić, że im bardziej plik jest skompresowany, tym wolniejsze s

zapisu i odczytu. Istnieją dwa rodzaje kompresji plików:

o bezstratna

o stratna

Kompresja bezstratna

Kompresja bezstratna nie powoduje utraty

i dekompresji. Jest ona polecana do kompresji danych tekstowych i liczbowych, takich jak arkusze

kalkulacyjne, dokumenty tekstowe.

W niektórych formatach graficznych jak nie skompresowany TIFF czy BMP, punkty obrazu

zapisywane są w stosunku 1:1 - dlatego na dysku pliki te zajmuj

obraz zajmuje w pamięci operacyjnej komputera.

W kompresji bezstratnej wykorzyst

zadaniem jest maksymalne zmniejszenie rozmiarów plików zawieraj

kompresji (w stosunku do rozmiarów obrazu zajmuj

20 do 50%, bez powodowania utraty jakichkolwiek informacji.

Metoda kompresji bezstratnej polega na łobrazu, których piksele mają tę samkompresji uzyskiwany jest w przypadku obrazów o du

kolorze.

Kompresja stratna

Przy użyciu kompresji stratnej można skompresowa

kompresji bezstratnej. Stąd metoda ta jest stosowana w sytuacji, gdy wa

mało miejsca na dysku. W kompresji tego rodzaju jest mo

możliwą do zaakceptowania ilość traconych informacji.

Schemat tego rodzaju kompresji opiera sizbliżonych do siebie punktów pod wzglmomencie dekompresji gdyż nie w

rozpoznane.

Modele barw

Model RGB

• Addetywny model barw, odzwierciedlaj

świateł.

• Barwa opisywana jest przez intensywno

barw podstawowych

(R-ed, G-reen, B-lue).

• Barwy opisywane są w sześcianie jednostkowym.

• Ukierunkowany na sprzęt wy

monitor.

dzenia miejsca na dysku często stosowana jest kompresja plików.

że im bardziej plik jest skompresowany, tym wolniejsze są

dwa rodzaje kompresji plików:

Kompresja bezstratna nie powoduje utraty żadnych pierwotnych danych podczas procesów kompresji

i dekompresji. Jest ona polecana do kompresji danych tekstowych i liczbowych, takich jak arkusze

h formatach graficznych jak nie skompresowany TIFF czy BMP, punkty obrazu

dlatego na dysku pliki te zajmują dokładnie tyle samo miejsca ile dany

ci operacyjnej komputera.

W kompresji bezstratnej wykorzystywany jest algorytm LZW - Lempel-Ziv & Welch, którego

zadaniem jest maksymalne zmniejszenie rozmiarów plików zawierających grafikę. Współczynnik

kompresji (w stosunku do rozmiarów obrazu zajmującego miejsce w pamięci operacyjnej) wynosi od

owodowania utraty jakichkolwiek informacji.

Metoda kompresji bezstratnej polega na łączeniu w mniejsze grupy wszystkich powierzchni ą ę samą wartość (ten sam kolor). Stąd największy współczynnik

kompresji uzyskiwany jest w przypadku obrazów o dużych powierzchniach w tym samym

yciu kompresji stratnej można skompresować plik w jeszcze większym stopniu niż

d metoda ta jest stosowana w sytuacji, gdy ważne jest by plik zajmował

mało miejsca na dysku. W kompresji tego rodzaju jest możliwe określenie w zależnoś

ść traconych informacji.

Schemat tego rodzaju kompresji opiera się na algorytmie łączenia w mniejsze grupy najbardziej onych do siebie punktów pod względem odcieni kolorów. Strata zostaje uwidoczniona w

ż nie wszystkie punkty z dużej palety kolorów zostają

Addetywny model barw, odzwierciedlający działanie

Barwa opisywana jest przez intensywności każdej z

ą w sześcianie jednostkowym.

Ukierunkowany na sprzęt wyświetlający rzutnik,

e im bardziej plik jest skompresowany, tym wolniejsze są operacje jego

adnych pierwotnych danych podczas procesów kompresji

i dekompresji. Jest ona polecana do kompresji danych tekstowych i liczbowych, takich jak arkusze

h formatach graficznych jak nie skompresowany TIFF czy BMP, punkty obrazu

dokładnie tyle samo miejsca ile dany

Ziv & Welch, którego

ę. Współczynnik

ci operacyjnej) wynosi od

czeniu w mniejsze grupy wszystkich powierzchni ększy współczynnik

ych powierzchniach w tym samym

kszym stopniu niż za pomocą

ne jest by plik zajmował

żności od potrzeb

czenia w mniejsze grupy najbardziej dem odcieni kolorów. Strata zostaje uwidoczniona w

ej palety kolorów zostają prawidłowo

Model CMY

• Model subtraktywnego mieszania barw oparty o barwy

C (cyan – zielono-niebieska)(Yellow – żółta).

• Model ten został opracowany dla potrzeb poligrafii i

wszystkich urządzeń wykorzystuj

mieszanie barw.

Porównanie:

• W modelu CMY szarość jest otrzymywana przez zmieszanie równych ilo

podstawowych (c=m=y).

• W modelu CMYK jest ona generowana przez czwart

czarny).

Model HSV (HSL)

• Hue – barwa (dominująca długo

• Saturation – nasycenie (czysto

• Value (Level) – jasność (jaskrawo

• Wszystkie barwy postrzegane s

z oświetlenia.

• Model ma postać stożka, którego podstaw

Model subtraktywnego mieszania barw oparty o barwy

niebieska), M (Magenta – purpurowa), Y

Model ten został opracowany dla potrzeb poligrafii i

ą ń wykorzystujących subtraktywne

Model CMYK

ść jest otrzymywana przez zmieszanie równych ilości

W modelu CMYK jest ona generowana przez czwartą barwę podstawową

długość fali)

nasycenie (czystość pobudzenia)

ść (jaskrawość)

Wszystkie barwy postrzegane są jako światło pochodzące

żka, którego podstawą jest koło barw.

jest otrzymywana przez zmieszanie równych ilości trzech barw

podstawową K (blacK –

Pojęcia:

Często mówimy o rozdzielczości obrazu na przykład 800x600 punktów. Jest to

terminu rozdzielczości. Prawidłowo powinni

zawsze wyraża liczbę punktów obrazu

Punkt (ang. dot) to najmniejszy element obrazu, który nie ma ju

Piksel (ang. pixel) to najmniejszy element struktury obrazu, któremu mo

dowolny kolor.

Linia to poziomy zbiór punktów lub pikseli.

Rozdzielczość najczęściej wyrażamy w:

• Dpi (dot per inch) punktów na cal

• Ppi (pixel per inch) pikseli na cal

• Lpi (line per inch) lini na cal

Rozdzielczość obrazu możemy policzy

• Mapa bitowa (bit map) - sposób zapami

w rzędy i kolumny. Każdy piksel a wła

zapisana za pomocą określonej liczby bitów; warto

biel. W zależności od liczby

rozróżniamy mapy: 1 - bitowe, 8

bitowe to mapy czarno - białe, natomiast w mapach 8

256 kolorów, w 16 - bitowych 65 526 kolorów, w 24

• Rasteryzacja jest to czynno

wektorowej na obraz rastrowy (piksele lub kropki) w celu

wizyjnym, wydrukowania lub w celu zapami

• Liczba pikseli. Rozdzielczość

pikseli poprawia rozdzielczość

formacie bez obniżenia jakoś

obraz, tym większy jest rozmiar pliku.

• Rozmiar pliku. Rozmiar pliku decyduje o ilo

komputerze i o czasie potrzebnym do wysłania go w formie zał

Chociaż więcej pikseli czę

rozmiar ma zwykle typ pliku obrazu (na przykła

zapisany w formacie TIFF jest znacznie wi

JPEG. Dzieje się tak dlatego,

powoduje zmniejszenie rozmiaru pliku kosztem nieco ni

Formaty plików graficznych

Formaty plików graficznych

oraz formaty przechowujące grafik

rastrową można podzielić na stosuj

nie stosujące kompresji.

Formaty grafiki rastrowej

Używające kompresji stratnej:

ści obrazu na przykład 800x600 punktów. Jest to niepoprawne u

ci. Prawidłowo powinniśmy mówić o rozmiarach obrazu. Rozdzielczo punktów obrazu przypadających na jednostkę długości.

(ang. dot) to najmniejszy element obrazu, który nie ma już wewnętrznej struktury.

(ang. pixel) to najmniejszy element struktury obrazu, któremu można przyporz

to poziomy zbiór punktów lub pikseli.

żamy w:

punktów na cal

pikseli na cal

lini na cal

żemy policzyć jako stosunek:

sposób zapamiętania obrazu przy wykorzystaniu pikseli uło

i kolumny. Każdy piksel a właściwie informacja o jego kolorze mo

określonej liczby bitów; wartość 1 oznacza czerń lub kolor, warto

ci od liczby kolorów jakie możemy wykorzystać w mapie

bitowe, 8 - bitowe, 16 - bitowe, 24 - bitowe i 32 - bitowe. Mapy 1

białe, natomiast w mapach 8 - bitowych na jeden piksel przypada

bitowych 65 526 kolorów, w 24 - bitowych 16 777 216kolorów itd.

jest to czynność polegająca na konwersji obrazu opisanego w

wektorowej na obraz rastrowy (piksele lub kropki) w celu wyświetlenia na urz

lub w celu zapamiętania w pliku w formacie bitmapo

Rozdzielczość lub ostrość obrazu zależy od jego liczby pikseli. Wi

li poprawia rozdzielczość obrazu, co pozwala na wydrukowanie go w wi

żenia jakości wizualnej. Należy jednak pamiętać, że im wię

kszy jest rozmiar pliku.

Rozmiar pliku decyduje o ilości miejsca zajmowanego przez obraz na

komputerze i o czasie potrzebnym do wysłania go w formie załącznika do wiadomo

cej pikseli często oznacza większy rozmiar pliku, bardziej istotny wpływ na

rozmiar ma zwykle typ pliku obrazu (na przykład JPEG lub TIFF). Na przykład obraz

zapisany w formacie TIFF jest znacznie większy niż ten sam obraz zapisany w formacie

tak dlatego, że obrazy w formacie JPEG mogą być kompresowane, co

powoduje zmniejszenie rozmiaru pliku kosztem nieco niższej jakości wizualnej.

Formaty plików graficznych można podzielić na formaty przechowujące grafik

oraz formaty przechowujące grafikę wektorową. Z kolei formaty przechowuj

ć na stosujące kompresję bezstratną, stosujące kompresję

niepoprawne użycie

Rozdzielczość obrazu

trznej struktury. przyporządkować

obrazu przy wykorzystaniu pikseli ułożonych

jego kolorze może zostać

lub kolor, wartość 0

ć w mapie bitowej,

bitowe. Mapy 1 -

bitowych na jeden piksel przypada

216kolorów itd.

ca na konwersji obrazu opisanego w formie

wietlenia na urządzeniu

tania w pliku w formacie bitmapowym.

y od jego liczby pikseli. Większa liczba

obrazu, co pozwala na wydrukowanie go w większym

że im więcej pikseli ma

ejsca zajmowanego przez obraz na

cznika do wiadomości e-mail.

kszy rozmiar pliku, bardziej istotny wpływ na

d JPEG lub TIFF). Na przykład obraz

ten sam obraz zapisany w formacie

ć kompresowane, co

ci wizualnej.

ące grafikę rastrową

. Z kolei formaty przechowujące grafikę

ce kompresję stratną oraz

Aplikacje internetowe Strona 6

• JPEG (Joint Photographic Experts Group) – niewątpliwie najpopularniejszy format plików

graficznych z kompresją stratną; używany zarówno w sieci internet (obsługiwany przez

prawie wszystkie przeglądarki), jak i w aparatach cyfrowych

• JPS (JPG Stereo) – najpopularniejszy format prezentacji obrazów stereoskopowych, obrazy

dla prawego i lewego oka zapisane są obok siebie

• JPEG 2000 – nowsza wersja formatu JPEG, oferująca lepszą kompresję,

• DjVu – format stworzony do przechowywania zeskanowanych dokumentów w formie

elektronicznej,

• TIFF (Tagged Image File Format) – popularny format plików graficznych udostępniający

wiele rodzajów kompresji (zarówno stratnej, jak i bezstratnej) oraz umożliwiający

przechowywanie kanału alfa.

Używające kompresji bezstratnej:

• PNG (Portable Network Graphics) – popularny format grafiki (szczególnie internetowej);

obsługiwany przez większość przeglądarek WWW; obsługuje kanał alfa, obsługuje

przeźroczystość,

• GIF (Graphics Interchange Format) – popularny format grafiki (szczególnie internetowej);

obsługiwany przez prawie wszystkie przeglądarki WWW; może przechowywać wiele

obrazków w jednym pliku tworząc z nich animację; obsługuje przeźroczystość

monochromatyczną (pełna przeźroczystość lub wcale),

• TIFF • BMP – oferuje zapis z kompresją RLE lub bez kompresji (powszechniejszy),

wykorzystywany m.in. przez program MS Paint

Bez kompresji:

• XCF (eXperimental Computing Facility) – mapa bitowa programu GIMP; może

przechowywać wiele warstw,

• XPM – format zapisu plików przy pomocy znaków ASCII,

• PSD – mapa bitowa programu Adobe Photoshop; może przechowywać wiele warstw,

Formaty grafiki wektorowej

• SVG (Scalable Vector Graphics) – format oparty na języku XML; promowany jako

standard grafiki wektorowej; umożliwia tworzenie animacji,

• CDR (Corel Draw) – format opatentowany przez firmę Corel Corporation

• SWF (Adobe Flash) – format grafiki wektorowej popularny w internecie; umożliwia

tworzenia animacji, a nawet całych aplikacji,

• EPS (Encapsulated PostScript) – format PostScript z ograniczeniami