Grafika#

Wstęp#

Zdjęcia (fotografie, grafika) to nieodzowny element każdej strony internetowej. Ilustracje są podstawowym elementem ubarwiającym i uprzyjemniający przebywanie na stronach WWW. Prócz efektów wizualnych często są niezbędnym elementem informacyjnym - nie zawsze możemy wyrazić/opisać wszystko za pomocą tekstu. Mówi się, że jeden obraz wart jest tysiąca słów.

Racjonalne wykorzystywanie grafiki we własnych projektach jest cenną umiejętnością. Estetyczna, przyciągająca oko szata graficzna witryny zachęca pozostałych czytelników do odwiedzania strony. Należy jednak pamiętać, że ozdobniki wizualne mają swoje rozmiary, dlatego powodują wzrost ruchu w Sieci. Koniecznie należy znaleźć kompromis między wyglądem i nośnością informacji graficznej z jednej, a realiami technicznymi z drugiej strony. Nadmiar multimediów niejednokrotnie może tylko zrazić czytelnika (przekonaj się sam oglądając tzw. zemstę informatyka - wczytanie pliku może trochę potrwać).

Zadania, do których wykorzystywane są ilustracje są następujące:

Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów (szczególnie w wersji 3), bez udziału samej grafiki.

Odpowiednie formaty graficzne#

Ilustracje wstawiane do strony WWW powinny być zapisane w odpowiednim formacie. Nie ma uniwersalnego formatu, każdy ma swoje mocne i słabe strony. Zły wybór spowoduje utratę jakości grafiki albo utworzy plik o dużej objętości, który będzie się długo ściągał przez Internet. Najpopularniejszymi standardami kompresji obrazów rastrowych są:

JPEG (.jpg)
JPEG (Joint Photographic Experts Group - Połączona Grupa Ekspertów Fotograficznych) jest formatem graficznym wykorzystującym algorytm kompresji stratnej, co oznacza, że w czasie jego wykonywania tracona jest bezpowrotnie część pierwotnej informacji. JPEG zaprojektowany został z myślą o przechowywaniu obrazów fotograficznych, gdyż może on posiadać dużą liczbę kolorów (16,7 mln). Dobrze radzi sobie z obrazami, które mają dużo kolorów w różnych odcieniach i gładkie przejścia tonalne. Słabym punktem JPEG są ostre linie i jaskrawe kolory, po zapisaniu w tym formacie zostaną zniekształcone i rozmazane (np. tekst, logo firmy czy grafika liniowa). JPEG nie obsługuje przezroczystości — grafiki w tym formacie są zawsze prostokątne. Posiada opcję wyświetlania z przeplotem (najpierw co 8, potem 4, następnie 2 i na końcu same nieparzyste linie obrazu). Dzięki temu, oglądający ma wrażenie szybszego wczytywania grafiki.

Ze względu na stratny charakter formatu, zaleca się konwersję dopiero w ostatniej fazie pracy i pozostawienie jej bez nanoszenia zmian.

GIF (.gif)
GIF (Graphics Interchange Format - Format Wymiany Grafiki) jest formatem graficznym wykorzystującym kompresję bezstratną, oznacza to, że każdy piksel obrazka jest zapisany w pliku. Istnieją dwie odmiany formatu GIF. Są to: format oryginalny - GIF87 i jego ulepszona wersja - GIF89a. Ta ostatnia została wyposażona w zapis przezroczystości oraz przeplot. Może również przechowywać kolejne ujęcia, co pozwala na tworzenie prostych animacji. Odpowiednie programy są w stanie zapisać serię obrazków jako jeden plik GIF. Format dobrze sprawdza się w przechowywaniu znaków firmowych, ikon, prostych grafik, obrazów o nieregularnych kształtach, schematów czy szkiców. Pozwala on zapisać tylko 256 barw (8-bitowa głębia kolorów), dlatego nie radzi sobie przy obrazach bogatszych w szczegóły na przykład fotografiach. Ma słabsze wsparcie dla przezroczystości — nie można w tym formacie zapisać półprzezroczystości, przez co krawędzie GIF-ów są zawsze ostre.

Ze względu na to, iż do kompresji w formacie GIF może być używany algorytm LZW Lempel-Ziv-Welch, na którym ciążą patenty w kilku krajach świata, w 1995 został opracowany konkurencyjny format PNG używający do kompresji algorytmu deflate.

Unikaj umieszczania zapętlonych (powtarzających się) animacji na stronie. Rozpraszają one uwagę i po dłuższym czytaniu strony irytują. Ponadto animacja negatywnie kojarzy się z reklamą (przykład).

PNG (.png)
PNG (Portable Network Graphics - Przenośna Grafika Sieciowa) jest formatem graficznym wykorzystującym kompresję bezstratną. Został on opracowany jako następca właśnie formatu GIF. Przewagą PNG nad jego poprzednikiem jest między innymi obsługa pełnej przezroczystości, półprzezroczystości oraz fakt, iż pozwala on na przechowywanie większej niż 8-bitowa paleta barw (więcej niż 256 kolorów), dzięki czemu nadaje się do prezentacji dowolnej grafiki RGB. Warto wspomnieć, że Internet Explorer starszy niż 7.0 ma pewne problemy z obsługą wielostopniowej przezroczystości.

Powyższe formaty na stałe przyjęły się w branży internetowej, przez co praktycznie każda nowoczesna przeglądarka nie ma problemów z ich obsługą.

30 września 2010 roku firma Google zaprezentowała swój własny stratny format WebP (.webp), przeznaczony do kompresji statycznych obrazów rastrowych. WebP w założeniu ma być nowym otwartym standardem konkurującym/zastępującym starszy JPEG. Zdjęcia w owym formacie są mniejsze rozmiarowo przy porównywalnej jakości. Firma przygotowała dla użytkowników narzędzia przeznaczone do konwertowania grafik na nowy format. Od producentów przeglądarek zależy, czy standard się przyjmie (dnia 01.07.2011 obsługiwany był przez Google Chrome i Operę).

Formaty, których należy unikać#

Choć wiele przeglądarek wyświetli na stronie również obrazek w formacie BMP lub WMF, ich stosowanie nie jest zalecane, m.in. dlatego, że nie jest on obsługiwany przez wszystkie browsery, a także nie oferuje kompresji (pliki wynikowe są zbyt duże). Przed umieszczeniem na stronie WWW należy je odpowiednio skonwertować.

Podobnie jest z plikami TIFF, czasem generowanymi przez oprogramowanie skanerów. Zeskanowane zdjęcia należy pomniejszyć i zapisać w odpowiednim formacie.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Grafika (H1) Wstęp (H2) Odpowiednie formaty graficzne (H3) Formaty, których należy unikać (H4)