PNG, JPG oraz GIF

Używam tych formatów plików podczas składania stron internetowych... Choć większość osób doskonale potrafi je wymienić to z wyróżnieniem cech charakterystycznych są problemy. Każdy z tych formatów ma różne przeznaczenie

Czemu aż 3 standardy? Każdy przydaje się do innych specyficznych zastosowań.

GIF, charakterystyka techniczna

Pliki Gif mogą mieć max 256 kolorów. Jednak paleta tych 256 kolorów nie jest na 'sztywno' ustalona! Można zrobić np. paletę, która będzie miała 256 odcieni koloru czerwonego (z tym, że najciemniejszy to kolor czarny, a najjaśniejszy to biały).

Dzięki modyfikowaniu palety konkretnego obrazka możemy osiągnąć bardzo ciekawe rezultaty... Przykładowo podczas zabawy z maskami koloru możemy z obrazka składowego usunąć barwę tła całego dzieła, aby potem nie robiły się 'ząbki'. Zmniejszając liczbę kolorów w palecie można niekiedy zmniejszyć rozmiar pliku GIF nawet dwukrotnie, i to bez widocznej bez utraty jakości.

Zastosowania formatu GIF

W formacie GIF zapisujmy rysunki (ale uwaga - nie zapisujmy zdjęć!!!). Format obsługuje również przezroczystość. Wszystkie elementy strony WWW takie jak ramki, buttony, bannery najlepiej robić w GIFach. Programem, który najlepiej pozwoli nam wykorzystać możliwości zabawy paletami Gif jest Corel Photo-Paint.

Ustawienia palet

Gdy już namalujemy np. logo użyjmy eksportowania (Ctrl+E), gdzie jako plik wybierzmy GIF. Następnie należy wybrać odpowiednią opcje zapisu. Najlepszą paletą do takich sztuczek jest 'Adaptative'. Czasem przydaje się użycie wygładzania (smoothing na 10), wyłączmy dithering!. Standardowa paleta posiada 256 kolorów... Jeśli logo zbudowane było wyłącznie z 6 barw i nie zastosowaliśmy tam żadnych przejść tonalnych, to możemy liczbę kolorów ustawić na 6... Niestety zawsze pojawią się nam jakieś minimalne ząbki... Jednakże nie należy się tym przejmować, gdyż jest to normalny proces. Zwiększmy liczbę kolorów do 8 potem do 16 i spróbujmy znaleźć najodpowiedniejszą liczbę (najmniejszą, przy której jakość jest dobra).

Ustawienia palet trzeba zwyczajnie przećwiczyć ;) Rozmiary obrazków będą wtedy naprawdę malutkie :) Rzędu nawet kilkuset bajtów, przy rozmiarach typu 20px X 1px (tak robi się belki z gradientem).

Animacje w formacie GIF

W formacie GIF możemy również zapisywać animacje. Tworzenie animacji przy pomocy Photoshopa można sobie darować :) Dużo łatwiej jest ręcznie namalować poszczególne klatki i połączyć je programem UnFREEz (darmowy, prosty, a ma wszystko co potrzeba). Należy w tym miejscy dodać, że użycie GIMPa do animacji daje nam dużą kontrolę zarówno nad wyglądem jak i rozmiarem obrazka. Warto więc znaleźć czas i produkować animacje najlepszej jakości.

Wyświetlanie plików w formacie GIF

Jeżeli zrobimy jakiś obrazek o nietypowej liczbie kolorów, to wyświetlenie go w standardowej przeglądarce plików może być niemożliwe... Ale na stronie WWW wyświetli się bez problemu! Nie ma się więc czym przejmować :)

Właściwości plików w formacie PNG

Taka lepsza odmiana GIF (ale bez animacji). Format obsługuje pół przezroczystość, dzięki czemu nie tworzą się 'ząbki'. Możemy tutaj także bez problemu stosować przejścia tonalne od pełnego koloru do przezroczystości. Pliki PNG są jednak dość duże w porównaniu z plikami GIF 'po tuningu', jednakże jakość obrazków jest zauważalnie lepsza! Jeśli chodzi o program do tworzenia półprzezroczystych obrazków, to Photoshop jest tu chyba niezastąpiony... Gimp równieżsobie radzi z kanałem alfa, choć niektórzy uważają to za niewygodne. Warto zauważyć, że PNG jest kompresją bezstratną.

Problemy z wyświetlaniem plików PNG na stronach internetowych

PNG nie jest najnowszym formatem, a mimo to przeglądarki mają z nim problemy... Niby Firefox i Opera wyświetlają obrazki zapisane w PNG poprawnie, ale Internet Explorer ma z tym problemy i to duże! Zamiast przezroczystości zostaje wyświetlony kolor biały, co w efekcie potrafi uczynić strony zbudowane przy pomocy PNG prawie całkowicie nieczytelnymi!

Charakterystyka formatu JPG

Format, który najbardziej nadaje się do zapisywania fotografii. Nawet przy stosunkowo dobrej jakości (95%), zapisywane pliki nie są duże. Jeśli jednak plik i tak jest za duży to zwiększając kompresje niewiele osiągniemy :( Wtedy dużo lepszym rozwiązaniem jest GIF...

Unikajmy tego formatu chyba, że obrazek ma dużo barw i nie możemy sobie pozwolić na zmianę palety...

"Surowe" pliki JPG

Uwaga na 'surowy' JPG!!! Niektóre cyfrówki (w tym wszystkie telefony komórkowe) zapisują zdjęcia niby w JPG, ale tylko w im wiadomy sposób. Przykładowo zdjęcie z SonyEcricssona K750i zajmuje w pełnej rozdzielczości ok 500kB! Jeśli otworzymy to zdjęcie jakimkolwiek programem graficznym i zapiszemy jeszcze raz to plik 'schudnie' do 100kB bez widocznej straty jakości! Do takich zastosowań przydaje się Picassa - szybko, łatwo i dobrze obrobi zdjęcia zmieniając ich rozmiar.

Wybór formatu zapisu grafiki

Podsumowując: jeśli chcemy 'wycisnąć' minimalny rozmiar swojej grafiki na stronie, jednocześnie zachowując jak najlepszą jakość to powinniśmy używać tych formatów wykorzystując ich najlepsze strony... Nie przesadzajmy też z liczbą obrazków! Naprawdę można zrobić ładną stronę przy użyciu CSS i tylko kilku obrazków. Nie róbmy ze strony choinki! Pamiętajmy, że choć dostęp do internetu staje się coraz szybszy, to jednak urządzenia mobilne używające GPRSu nie zawsze dają radę szybko pracować na stronach przeładowanych grafiką.

Odpowiednie oprogramowanie graficzne

Jeżeli chodzi o tworzenie najmniejszych plików to przydatny staje się program Image Ready, ale ze względu na jego licencje GIMP powinien nam wystarczyć. Nie ważne z jakimi plikami pracujemy, ale właśnie GIMP jest bardzo wrażliwy na rozdzielczość. Na dużych obrazach (2000x2000px) zaczyna bardzo zwalniać i korzystanie z niego przestaje być takie miłe :/

Procek