Praca semestralna (sem.3)
Formaty graficzne stosowane na stronach internetowych.
Formaty plików graficznych można podzielić na:
-formaty przechowujące grafikę rastrową
-formaty przechowujące grafikę wektorową.
Grafika rastrowa (raster graphic) – obraz powstaje przez odpowiednie zabarwienie punktów (pikseli) na ekranie i jest pamiętany w postaci bitmapy (mapy bitowej, czyli zbioru pikseli). Dobrym kreśleniem obrazu bitmapowego jest płótno (ang. canvas), ponieważ w rzeczywistości praca z bitmapą przypomina malowanie.
Obrazy wykonane w technice rastrowej:
• nie mogą być dowolnie skalowane – powiększanie punktów obrazu powoduje utratę ostrości i efekt „schodkowania”;
• zależą od rozdzielczości monitora lub drukarki;
• mogą być tworzone automatycznie lub przez skanowane
Z kolei formaty przechowujące grafikę rastrową można podzielić na:
• - stosujące kompresję bezstratną
• - stosujące kompresję stratną oraz nie stosujące kompresji.
Formaty grafiki rastrowej używające kompresji stratnej:
• -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:
• -TIFF - patrz wyżej,
• -PNG (Portable Network Graphics) – popularny format grafiki (szczególnie internetowej); obsługiwany przez większość przeglądarek WWW; obsługuje kanał alfa,
• -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),
• -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.
Grafika wektorowa (obiektowa, ilustracyjna) (vector graphic) – sposób tworzenia i przechowywania w komputerze ilustracji, które są reprezentowane w postaci równań figur geometrycznych (odcinków, łuków, okręgów, elips). Dzięki temu poszczególne elementy obrazu – rysunku (obiekty) mogą być przekształcane niezależnie i obraz nie traci na rozdzielczości, zajmuje mniejszy obszar pamięci, niż zapisany w grafice rastrowej. Łatwo poddaje się zmianom wielkości, nie tracąc przy tym na jakości. Wariantem grafiki wektorowej jest dynamicznie rozwijająca się w ostatnich latach grafika trójwymiarowa (3D).
Obrazy wykonane w technice wektorowej:
• są zawsze tej samej jakości, niezależnie od skali w jakiej zostaną wyświetlone;
• muszą być wykonane przez człowieka (grafika);
• składają się z fragmentów będących osobnymi obiektami, dzięki czemu można zmieniać sposób i kolejność ich nakładania;
• Obrazy graficzne składają się z pojedynczych punktów lub pikseli. Formaty plików graficznych mogą być skompresowane lub nieskompresowane. W zależności od stopnia kompresji, jakość obrazu ulega pogorszeniu.
W przypadku profesjonalnych zastosowań należy wybierać formaty, które nie pogarszają jakości obrazów.
W przypadku prostych grafik używanych w dokumentach, na stronach WWW czy zdjęć umieszczanych w albumach internetowych można pokusić się o niewielką kompresję, która pozwoli oszczędzić cenne bajty i w efekcie zmniejszyć rozmiar pliku.
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
Najczęściej używane formaty grafiki wykorzystywane w Internecie:
JPG - popularny format zapisu plików graficznych JPEG, potrafi
zachowywać informację o 24-bitowym kolorze ze stuprocentową wiernością. Jednak możliwe jest także pominięcie niektórych szczegółów, co spowoduje znaczne zmniejszenie rozmiaru pliku wynikowego. Taka procedura nosi nazwę kompresji stratnej i powoduje utratę jakości obrazu. Jednak niski stopień kompresji nie spowoduje znaczących różnic i zmian jakości obrazu widzianych ludzkim okiem. Zastosowanie kompresji w przypadku plików w formacie JPEG powoduje spore zmniejszenie ich rozmiarów, dzięki czemu są one chętnie stosowane w fotografii cyfrowej. Obrazy zachowane w tym formacie mają rozszerzenie: *.jpg lub *.jpeg.
GIF - obraz zachowany w tym formacie może być: czarno-biały,
w skali szarości lub kolorowy (maksymalna ilość kolorów to 256 barw). Dzięki kompresji format GIF cechuje się bardzo niewielkim rozmiarem, dużą zaletą jest możliwość utworzenia prostych animacji. Dzięki tym cechom format ten jest ciągle bardzo powszechny w zastosowaniach internetowych. Pliki w tym formacie mają rozszerzenie *.gif
PNG, który –jest lepszy od JPG i GIF
PNG jest swoistym połączeniem zalet obydwu opisanych formatów plików. Dzięki obsłudze 24 bitowej głębi koloru, i przeźroczystości, świetnie nadaje się do zapisywania tak samo jako JPG, zdjęć gdzie znajdziemy pewnie nie mało gładkich przejść pomiędzy poszczególnymi barwami, jednak w przeciwieństwie do JPG format PNG nadaje się do obrazów posiadających liczne ostre krawędzie czy nawet bardzo małe detale. W niektórych przypadkach, użycie PNG okazuje się być niemożliwe, ze względu na brak wsparcia przeźroczystości przez Internet Explorer, i wtedy niestety zmuszeni jesteśmy użyć GiF’a.
Format PNG jest najlepszym z opisanych formatów plików i to nie bez powodu jak można było przeczytać. Format ten jest również zalecany przez konsorcjum W3C jako najlepszy format grafiki do użycia na stronach WWW.
Na stronach WWW można również stosować inne formaty graficzne, chociażby pliki AVI i MPEG zawierające sekwencje filmu i dźwięku. Zamiast JPEG można użyć kompresji fraktalnej. Ostatni powstał format PNG, który umożliwia zdefiniowanie stopnia przezroczystości poszczególnych fragmentów grafiki, co daje efekty znacznie ciekawsze niż przezroczyste kolory w GIFie. Jednak wiele przeglądarek nie obsługuje standardowo niektórych z tych formatów, co sprawia, że nie możemy mieć pewności iż oglądający naszą stronę widzi te elementy.
Grafika internetowa powinna zajmować mało miejsca na dysku. Nie oznacza to jednak, że musi być ona uboga i nieciekawa. Dobra znajomość właściwości poszczególnych formatów graficznych pozwoli nam na bardzo swobodne planowanie grafiki, przy jednoczesnym minimalizowaniu rozmiarów plików.
Głównym elementem graficznym strony internetowej z reguły bywa tło (tzw. background). Istnieje wiele źródeł, które dostarczają najrozmaitsze rodzaje backgroundu, dzięki czemu nie musimy ślęczeć całymi godzinami nad wymyślaniem czegoś oryginalnego. Warto pamiętać, iż użycie tego samego elementu tła na kolejnych stronach skraca czas oczekiwania na załadowanie tych stron (odwołanie do tego samego miejsca w sieci powoduje skorzystanie z bufora (cashe), znajdującym się na lokalnym dysku użytkownika, w którym gromadzone są odczytane wcześniej informacje). Jednak ciekawie zaprojektowane tło może zapewnić elegancki wygląd strony, dlatego też czasami warto pomyśleć. Nie można przy tym zapomnieć, że tło jest elementem powtarzanym jak mozaika, dlatego prawy brzeg powinien dobrze być dopasowany do lewego, tak aby powstawał efekt zlewania-płynnego przejścia. Bezcelowe jest tworzenie elementu tła tak dużego, by wypełniał całą strone bez powtarzania się, jednak niektórzy uzyskują ciekawe efekty tworząc elementy bardzo szerokie, ale krótkie (np. 600x2 piksele), otrzymując przykładowo stylowy lewy margines strony lub też długie, ale wąskie.
Przy tworzeniu grafiki do strony WWW warto kierować się następującymi wskazówkami:
ikony, bardzo małe obrazki, wskaźniki, graficzne odnośniki należy zachowywać w formacie GIF (nie powoduje on “rozmywania krawędzi”, jakie następuje w przypadku formatu JPEG), warto jest również ograniczyć ilość występujących tu kolorów (gwarantuje to lepszą kompresję i zmniejszenie rozmiaru pliku), dodatkowo format GIF umożliwia stosowanie grafik o ciekawych kształtach (nie tylko prostokątnych) dzięki zdefiniowaniu “przezroczystych” kolorów, jak również tworzenie małych animowanych elementów.
kolorowe i czarno–białe zdjęcia należy zachowywać jako JPEG, daje to bardzo dobre możliwości kompresji przy jednoczesnym zachowaniu walorów estetycznych (stopień kompresji trzeba wyznaczać empirycznie dla poszczególnych obrazków, poprzez stopniowe zwiększanie, aż do momentu gdy pogorszenie jakości staje się zauważalne),
elementy graficzne zawierające duże obszary o takich samych kolorach, nie zawierające przejść tonalnych zachowujemy w formacie GIF.
grafiki zawierające ostre, wyraźne elementy, drobny tekst itp., należy zapisywać w formacie GIF (format JPEG powoduje “rozmywanie” ostrych krawędzi),
należy unikać płynnych przejść tonalnych na dużych obszarach (np. przejście od bieli do zieleni na obszarze 100x100 pikseli), gdyż żaden z wymienionych wcześniej formatów nie zapewni poprawnego odwzorowania,
jeżeli to możliwe przy konwersji na IndexedColor nie korzystać z opcji Dither (poprawia to stopień kompresji)
należy unikać zbyt dużych elementów graficznych, jak również zbyt wielu małych elementów.
Dzisiejsze możliwości komputerów i łatwy dostęp do nich powoduje niesamowity rozwój wymiany informacji na wszystkich płaszczyznach życia. Wiadomo, że jedną z najlepszych form prezentowania danych jest grafika. W prosty i intuicyjny sposób można zobrazować informacje, do opisu których należałoby użyć wielu słów. Wiadomo iż suchy tekst jest trudny do przyswojenia, a jednocześnie zniechęca do lektury. Dlatego też, grafika na stronach WWW daje szerokie możliwości wyrazu, zachęca do czytania i oglądania, przyciąga rzesze “ciekawskich”, przez co rośnie wymiana informacji. Warto pamiętać o tym przy tworzeniu własnych stron. Jeżeli nasza strona będzie zawierała zbyt dużo “ciężkich” elementów graficznych, nikt z zainteresowanych nie doczeka się załadowania wszystkiego. Jeżeli grafika będzie przytłaczała istotną informację, wprowadzała bałagan i nieład, zmniejszała czytelność, trzeba ją koniecznie zmienić. Dobrze zaprojektowane tło nie może być zbyt krzykliwe, gdyż tekst na nim wyświetlany musi być czytelny.
Surfując po Internecie warto przyjrzeć się innym stronom, oceniając je nie ze względu na efektowność grafiki, ale raczej ze względu na efektywność, czyli to w jakim stopniu szata graficzna danej strony pozwala nam na przyswojenie i zrozumienie prezentowanej informacji. Bardzo często można spotkać strony, które prezentują się wspaniale, posiadają niesamowitą grafikę, lecz tzw. nawigacja jest źle zorganizowana, przyciski i odnośniki są nieczytelne, tekst na stronie jest prawie niewidoczny, gdyż ktoś w tle podłożył kolorowe elementy.
Najpopularniejszymi formatami od wielu lat jest JPEG i GIF. Czy zawsze jednak są także najlepszym możliwym rozwiązaniem? Grafiki można zapisać do pliku, używając różnych formatów graficznych. Nie ma jednego uniwersalnego sposobu zapisu obrazów, każdy ma swoje mocne i słabe strony.
Współczesna Sieć zdominowana jest przez formaty grafiki wymyślone jeszcze w ubiegłym stuleciu – JPEG, PNG, okazjonalnie GIF. Od wielu lat nie pojawiła się dla nich żadna alternatywa, mimo że grafiki i zdjęcia odpowiadają za 65% danych przesyłanych przez strony internetowe. W swojej misji uczynienia Sieci szybszą, Google wykonało kolejny krok – przedstawiło właśnie zoptymalizowany format grafiki o nazwie WebP, który pozwala na znaczne zredukowanie rozmiarów zdjęć, przy utrzymaniu ich wysokiej jakości.
Przeprowadzone na pozyskanym z realnej Sieci materiale testy kompresji za pomocą WebP okazały się – jak informuje Google – pełnym sukcesem. Losowo wybrano milion graficznych plików, w większości JPEG, ale też PNG i GIF, by transkodować je do formatu WebP. Średnio udało się zmniejszyć rozmiary pliku o 39% - bez zauważalnego pogorszenia ich jakości. Prawdopodobnie wyniki dla zdjęć, które nie były wcześniej kompresowane, byłyby jeszcze lepsze.