Kompresja grafiki rastrowej na potrzeby stron www


(Loobieto) #1

Kompresja grafiki rastrowej na potrzeby stron www [wersja 1]

poradnik dla początkujących

W większości na stronach internetowych możemy zobaczyć różnorodne grafiki, stosowane do urozmaicenia przekazu, zachęcenia do dalszego przeglądania serwisu. Gdy odwiedzający mają powolne łącze lub mamy za wolny serwer, przyjemność z surfowania na naszej stronie spada i w najgorszym przypadku gość opuszcza naszą stronę. Można temu zapobiec stosując bezstratną kompresję lub optymalizację już istniejącej grafiki. Najlepszymi formatami na potrzeby stron html są .jpeg i .png. Jpeg - do zdjęć, PNG do banerów, przycisków, schematów czy wykresów. GIF jest przestarzały - można stosować tylko 256 kolorów i 1 kolor przezroczystości; zastępuje go właśnie PNG - można (lecz nie trzeba!) stosować 24bit paletę kolorów i kanały alpha.

Potrzebne oprogramowanie:

• Adobe Photoshop - do ew. stworzenia grafik i zapisania na dysku.

• Paint :wink: - jw.

• System operacyjny Linux (w przykładzie Ubuntu 9.04)

• programy optymalizacyjne (poniżej instrukcja ich instalacji)

  1. INSTALACJA OPROGRAMOWANIA

Dlaczego Linux? Bo niezbędne kompresory (zwłaszcza pngnq, advpng, optipng) są dostępne w najnowszych wersjach jako paczki z kodem źródłowym niemożliwym do łatwego skompilowania w Windows. Ubuntu można zamówić za darmo prosto do domu lub zupełnie legalnie ściągnąć . W internecie jest mnóstwo artykułów dot. tego systemu i ew. problemach z instalacją/przesiadką z Windows. Można używać obydwu systemów na jednym dysku!

Mając już gotowy system ściągamy najnowszy soft:

• PNGOUT for linux (static!): http://www.jonof.id.au/kenutils

po rozpakowaniu wybieramy jeden(!) plik dla naszej architektury sprzętowej (w tym przypadku

"pngout-linux-i686-static") i wkładamy do katalogu z plikami do docelowej optymalizacji

• z menadżera pakietów Synaptic dociągamy następujące pakiety:

libpng12-dev, optipng, advancecomp, jpegoptim, jpeginfo,

pngquant, pngtools

zdj1.th.png

• możemy sami ściągnąć kody źródłowe z oficjalnych stron optymalizatorów i sami skompilować następujące programy: optipng, pngquant, jpegoptim. Polecam to rozwiązanie. Plusem jest najnowsza wersja powyższych programów co przekłada się na lepszą wydajność i ulepszoną kompresję

• konieczne pobranie i skompilowanie programu " pngnq" w wersji 1.0 (poprawka wprowadzona przez pornela) ze strony: http://pngnq.sourceforge.net/

  1. OPTYMALIZACJA GRAFIK JPEG

Posiadając ciężkie grafiki warto zeskalować je do mniejszej rozdzielczości. Wkładamy je do katalogu np. /home/[użytkownik]/kompresja/

Uruchamiamy terminal (tak, potrzebne będzie grzebanie w konsoli!), wchodzimy do powyższego katalogu:

cd /kompresja (mozna używać [Tab] do przyspieszenia operacji) i optymalizujemy zdjęcie:

jpegoptim -m100 --strip-all -f [plik.jpg]

Zawsze podajemy pełną nazwę pliku/korzystamy z pierwszego znaku -- [Tab] i samo uzupełnia nam

nazwy. Mając kilkanaście obrazków do optymalizacji wpisujemy:

jpegoptim -m100 --strip-all -f *.jpg

Polecenie to zachowuje 100% jakość zdjęcia, lecz usuwa niepotrzebne informacje Exif oraz dobiera wydajną kompresję. Więcej o informacji o plikach jpeg uzyskuje się przez:

jpeginfo [plik.jpg]

W powyższym przypadku obrazek zmniejszył się o 40%.

zdj2.th.png

  1. OPTYMALIZACJA GRAFIK 24bit PNG

24bitowe pliki PNG zapisane Photoshopem posiadają dużą wagę. Można zmniejszyć je używając na początku optipng , następnie zobaczyć czy zmniejszą się używając advpng z pakietu advancecomp,

by następnie użyć PNGOUT. Zalecam użycie optipng+pngout gdyż zazwyczaj daje to najlepsze rezultaty. Umieść plik pngout'a w katalogu z obrazkiem .png! Wygląda to mniej więcej tak:

optipng -o7 [plik.png] lub

optipng -o7 *.png

nastepnie (mozna) użyć advpng:

advpng -z4 [plik.png]

zdj3.th.png

czy PNGOUT żeby zobaczyć czy ten zmniejszy plik:

./pngout-linux-i686-static [plik.png]

zdj4.th.png

W tym przypadku najlepszy okazał się advpng, choć w większości przypadków PNGOUT okazuje się w tym lepszy o ok. 10-20%. Ogólnie nasz plik zmniejszył się o 25%! Z uwagi na dość duże możliwości

konfiguracji tych programów, zastosowano najlepsze parametry dla optipng i advpng. Chcesz osiągnąć lepszy rezultat?

[program] --help

np. ./pngout-linux-i686-static --help

żeby dowiedzieć się więcej o opcjach

  1. OPTYMALIZACJA GRAFIK 24bit PNG NA 8bit PNG

Nie jest to dobre rozwiązanie dla kolorowych obrazków (np. zdjęć z kanałem alpha), gdyż powoduje to redukcję kolorów: z kilku milionów do zaledwie 256. Poniższe programy potrafią zachować kanał alpha.

Możemy zastosować pngquant - jest już trochę postarzały, oficjalna wersja nie zawiera poprawek pornela. Lepsze rezultaty (lepszy dihtering - gładsze obszary, dość wolny ale skutecznie odchudza grafikę) daje ulepszony pngnq w wersji przynajmniej 1.0. Zajmiemy się oboma przypadkami. Obrazek w folderze z PNGOUT.

pngquant [liczba\_kolorow] [plik.png]

np. pngquant 256 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)

LUB

pngnq -n[liczba_kolorow] -s1 [plik.png]

np. pngnq -n256 -s1 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)

Następnie możemy użyć lepszej kompresji z advpng czy PNGOUT, opisane jest to w 3. pkt. Rezultaty?

Pngquant (wyraźnie widoczne piksele): 74% kompresji ; pngnq (dość dobry dihtering): 80%. Po

optymalizacji zyskały do odpowiednio: 76%(PNGOUT) i 82%(advpng).

zdj5.th.png

  1. OPTYMALIZACJA GIFów DO PNG

Gify charakteryzują się 8bit paletą kolorów - buttony, tła mają odpowiednią ilość kolorów i przyzwoitą wagę. Zwłaszcza Photoshop posiada dość rozbudowane opcje do ich zapisu. Dlaczego warto je jednak

wymienić na 8bit PNG? Jakości nie zyskamy ale w 99% zmniejszymy ich objętość. Zastosujemy optipng do konwersji .gif--.png następnie pngnq+PNGOUT/advpng. Można użyć pngquant -

jest opisany w 4. pkt. lecz w większości przypadków wydajniejszy jest pngnq. Do dzieła!

optipng -o7 [plik.gif]

utworzy wtedy plik o tej samej nazwie lecz z końcówką .png :wink: Sprawdzamy ile ma kolorów poleceniem:

pnginfo [plikdosprawdzenie.png]

zdj6.th.png

Zazwyczaj dobranie max. ilości kolorów w pngnq i dopiero skompresowanie to PNGoutem/advpng skutkuje lepszą kompresją niż dobieranie takiej samej ilości z odczytu pnginfo z grafiki przekonwertowanej optipng. Stosujemy więc 256 kolorów:

pngnq -n256 -s1 [plik.png]

./pngout-linux-i686-static [plikpngnq.png]

ewentualnie

advpng -z4 [plikpngnq.png]

Rezultaty? Optipng+PNGOUT: 20% kompresji ; pngquant+PNGOUT: 21% ; pngnq+PNGOUT:

32%!

Prowadząc stronę generującą spore obciążenie serwera, warto zaoszczędzić transfer optymalizując grafiki

rastrowe. Zaoszczędzimy wtedy pieniądze a użytkownicy nie będą dłużej czekać na ładującą się grafikę!

Poradnik ten rozprowadzany jest na licencji Creative Commons: Uznanie autorstwa - Na tych samych

warunkach 2.5 Polska.

Wolno:

• kopiować, rozpowszechniać, odtwarzać i wykonywać utwór

• tworzyć utwory zależne

Wszelkie komentarze i uwagi proszę na maila: loobieto@gmail.com

Autor: @lubieto

Poradnik .pdf można ściągnąć z:

Bardziej przejrzysty i można czytać bez podłączonego neta :wink:

LUB

http://www.kompresja-grafiki-rastrowej-png-gif.cba.pl/


(Wasabi) #2

sposobem bez Linuxa na Windowsa jest Paint.NET w wersjach od 3.1

jakąkolwiek grafikę po edycji można zapisać w formatach gif, jpg, png, bmp, tiff. tga, pdn(natywny format w Paint.NET)

wystarczy wcisnąć : zapisz jako - a potem ustalić kompresję, diftering, jakość - w zależności od formatu ...

innym sposobem jest IrfanView - z wtyczkami - wystarczą standardowe i dobrze ustawić - zmienia ponad 30 formatów graficznych ... czyż trzeba więcej ??

sposób jest sprawdzony i używany od wielu lat

-- Dodane 01.12.2009 (Wt) 1:21 --

aha i bym zapomniał

wWine IrfanView i PaintNet chodzą bez problemowo ...

bez linii poleceń, konsoli, kombinacji ...

to tak by ten przydługawy troche tekst z obsługi plików graficznych ukrócić ...