Jaki mamy wybór? Jakie typy grafiki możemy zastosować? warto to wiedzieć, zanim zdecydujemy się zastosować któryś format zapisu. BMP format niekompresowany, bezstratny, tworzy wielkie pliki. Ten nie. TIF format niekompresowany, albo minimalnie, tworzy wielkie pliki. Często nie daje się odczytać przez przeglądarkę. Ten też nie.
Pozostają nam trzy formaty bitmapowe grafiki (GIF, PNG i JPG) i jeden wektorowy SWF.
BITMAPOWE
Pliki bitmapowe to pliki zawierające opis kolorów poszczególnych punktów. Powiększenie rysunku na ekranie powoduje utratę jakości wyświetlania.
GIF służy do zapisywania rysunków, albo obrazków z małą ilością odcieni jednego kolorów, dużych powierzchni jednokolorowych. Palety: 2 kolory, 16 kolorów, 256 kolorów, do każdej palety można wybrać kolor przezroczysty. Można też tworzyć animację z pojawiających się po sobie kolejno rysunków.
PNG służy do zapisywania rysunków, obrazków z kolorów, dużych powierzchni jednokolorowych. Palety: 2 kolory, 16 kolorów, 256 kolorów, True Color. Do palety 2-, 16- i 256-kolorowej można dodać przezroczystość.
JPG służy do zapisywania zdjęć i rysunków o wielu kolorach i przejściach między kolorami. Paleta wyłącznie True Color, kompresja polega na ujednolicaniu fragmentów, tracimy bezpowrotnie na jakości.
WEKTOROWE
Format wektorowy charakteryzuje się tym, że opisywane są krzywe, przy pomocy których rysunek powstaje na bieżąco w komputerze. Powiększenie rysunku na ekranie nie powoduje utraty jakości wyświetlania. Nie można w ten sposób opisywać zdjęć, ale można je włączyć do pliku swf.
SWF grafika z formatu Flasha, rysunek wektorowy. Format jeden, ale za to jaki! Do grafiki niezastąpiony. Można zapisywać również animacje, plansze interakcyjne i gry.
Przykłady
Najprościej pokazać problemy i różnice formatów w przykładach.
Przykład 1. Przezroczyste tło w formacie GIF i PNG.
Wybieramy kolor przezroczysty w programie, zaznaczamy go i to wszystko. Najlepiej jest przygotować obrazek na tle zbliżonym kolorystycznie, inaczej będziemy mieli piękną "aureolę" wokół rysunku. Aureola, inaczej mówiąc efekt halo, powstaje na krawędziach skośnych i zaokrąglonych.
GIF 1 518 B aureola, 16 kolorów
GIF 1 454 B 16 kolorów
PNG 1 259 B 16 kolorów
GIF 2 643 B 256 kolorów
PNG 2 216 B 256 kolorów
Jak widać na rysunkach, zarówno rysunki w formacie GIF, jak i PNG sprawują się dobrze, o ile będą przygotowywane na odpowiednio zbliżonym kolorystycznie do przyszłego tła.
256 kolorów przy takim rysunku o wielu odcieniach jest minimalną liczbą kolorów, jaką należy zastosować. Przy 16-stu kolorach na górnej krawędzi litery B tworzą się jasne plamy.
Przykład 2. Kompresja w pliku JPG.
JPG 100% 10 615 B
JPG 95% 5 746 B
JPG 90% 4 395 B
JPG 85% 3 725 B
JPG 80% 3 317 B
JPG 70% 2 809 B
JPG 50% 2 334 B
PNG 7 675 B
Widać na rysunkach, że kompresja 20% to ostateczność (JPG 80%). Już w pliku JPG 85% (15% kompresji) widać przy zmianie koloru z pomarańczowego na niebieski błędy w kompresji, szczególnie widoczne "dodatkowe kolory" przy krawędziach piłeczki. Przy dalszej kompresji błędy są jeszcze większe, ale kolory nie tracą na jakości, jest cała gama kolorów. Dla porównania zobaczmy to samo zapisane w formacie PNG.
Przykład 3. Dobór liczby kolorów w pliku GIF, 2 kolory.
W pliku GIF możemy dobrać liczbę dostępnych kolorów. Wybieramy paletę 256 kolorów a w niej ograniczamy liczbę kolorów do niezbędnego minimum. Ograniczenie liczby kolorów pozwoli nam zmniejszyć wielkość pliku.
GIF 197 B 2 kolory z 2.
GIF 446 B 3 kolory z 16.
GIF 1 233 B 3 kolory z 256.
PNG 203 B 3 kolory z 16.
Gdy wybrałem 2 kolory w palecie, to zabrakło koloru ramki wokół rysunku. Program, nie wiedzieć czemu, dodał dodatkowo kolor biały! Być może jest to problem doboru programu.
Jak widać, żeby otrzymać jak najmniejszy plik, trzeba wybrać najmniejszą możliwą paletę kolorów, przy której rysunek będzie czytelny.
Zastanawiająco mały jest plik w formacie PNG.
Przykład 4. Dobór liczby kolorów w pliku GIF, 5 kolorów.
Zobaczmy co się stanie, jeżeli weźmiemy 4 różne kolory i czarną ramkę, czyli razem 5 kolorów.
GIF 882 B 5 kolorów z 16.
GIF 998 B 8 kolorów z 16.
GIF 1078 B 12 kolorów z 16.
GIF 1078 B 16 kolorów z 16.
GIF 1 931 B 19 kolorów z 16.
GIF 998 B 50 kolorów z 256.
GIF 2 269 B 183 kolory z 256.
PNG 2 049 B 183 kolory z 256.
Okazało się, że 16 kolorów to za mało. Szczególnie na granicy stykających się dwóch kolorów pojawiła się krzywa "schodkowa", krzywa nie biegnie tak gładko, jak powinna, pojawiły się nierówności. Powinny być zatem dodatkowe kolory pośrednie między każdymi stykającymi się ze sobą parami kolorami: czerwony-niebieski, czerwony-żółty, czerwony-zielony, niebieski-żółty, niebieski-zielony, zielony-żółty; razem 6 par. W każdej parze po 3 kolory, razem 18, dodajemy kolor ramki, to daje razem 19 kolorów. To powinno wystarczyć. Faktycznie, wystarcza. Jak widać, liczba koniecznych kolorów zależy przede wszystkim od liczby par kolorów przenikających się i stykających.
Przykład 5. Łączenie różnych formatów.
Jeżeli mamy elementy powtarzające, to dlaczego ich nie wykorzystać wielokrotnie? Warto kroić rysunki na mniejsze kawałki. Być może w niektórych częściach występują innie palety kolorów i w sumie cały plik okaże się dużo mniejszy w kawałkach niż w całości.
Tutaj animacjami są: światło i obracające się koło, powtórzone trzy razy, wszystko zapisane w postaci animowanych GIF'ów. Pozostałe elementy to elementy statyczne, zapisane w formacie PNG.
Rysunek nadaje się świetnie do zapisania w postaci animowanego flash'a.
A jak z rozmiarem? Flash 2 879 B, a grafiki bitmapowe 23 301 B, też nieźle. Warto dodać, że flash też wykorzystuje ten sam mechanizm, elementy powtarzające się zostają zapisane tylko raz!
Wielkość bitmap można jeszcze zmniejszyć o 20%, ale to już jest bez znaczenia, 20KB jest wynikiem zadowalającym.
Razem, cała grafika na stronie, zajęła 104 KB, sporo przykładów nie było kompresowanych, więc czuję się usprawiedliwiony. ;-)
Przykład 6. Taka sama animacja w pliku GIF i SWF.
GIF 9 969 B
SWF 2 175 B
Te dwie animacje zawierają to samo. GIF dał nam plik prawie 10 kB, a flash tylko 2 kB i to nie wszystko! Plik we flashu, ponieważ zawiera opis krzywych, już większy nie będzie, nawet gdybyśmy chcieli wyświetlić tę animację na całej stronie. 2 kilo i nic więcej.
Wnioski
Na stronie liczymy z kalkulatorem wielkość plików. Przy dzisiejszych łączach wypada mieścić się w wielkości 40-60 KB na każdej stronie.
Stosujemy następujące formaty zapisu plików:
Jeżeli można, do rysunków stosujemy format flash (SWF), jako najbardziej efektywny do elementów rysowanych kreską,
Do przejść tonalnych i zdjęć świetnie nadaje się format JPG, a przy mniejszej ilości kolorów PNG.
W formatach o graniczonej palecie dopasowujemy paletę kolorów do potrzeb.
Elementy umieszczone na tle wstawiamy jako elementy o przezroczystym tle, unikniemy dodatkowego mieszania kolorów.
Tniemy grafiki na części i kompresujemy je oddzielnie wg innych metod, widz i tak nie zauważy, że rysunek składa się z kilku części.
