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