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 z dużą ilością obrazków, 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, wykresów czy zrzutów ekranu. 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 ;) — jw.
- System operacyjny Linux (w przykładzie Ubuntu 9.04)
- programy optymalizacyjne (poniżej instrukcja ich instalacji)
Instalacja oprogramowania
Dlaczego Linux? Bo niezbędne kompresory (zwłaszcza pngnq, pngquant) są dostępne w najnowszych wersjach jako paczki z kodem źródłowym niemożliwym do łatwego skompilowania w Windows. Polecam ten sposób instalacji; dla początkujących opisałem metodę "dwóch kliknięć". 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); 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
- 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)
Optymalizacja grafik jpg
Posiadając ciężkie grafiki warto zeskalować je przed opisywanymi metodami do mniejszej rozdzielczości! Następnie wkładamy je do katalogu np. /home/[użytkownik]/kompresja/.
Uruchamiamy terminal (tak, potrzebne będzie grzebanie w konsoli!), wchodzimy do poniższego katalogu:
cd ~/kompresja
(można używać [Tab] do przyspieszenia operacji) i optymalizujemy zdjęcie:
jpegoptim -v --strip-all [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 -v --strip-all *.jpg
Polecenie to zachowuje 100% jakość zdjęcia, lecz usuwa niepotrzebne informacje Exif oraz dobiera wydajną kompresję. Chyba nie chcesz by twoje obrazki posiadały dane o twoim aparacie czy oprogramowaniu użytym do obróbki?
Więcej o informacji o plikach jpeg uzyskuje się przez:
jpeginfo [plik.jpg]
W powyższym przypadku obrazek zmniejszył się o 40%.
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, lub/i 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]
następnie (można) użyć advpng:
advpng -z4 [plik.png]
czy PNGOUT żeby zobaczyć czy ten zmniejszy plik:
./pngout-linux-i686-static [plik.png]
W tym przypadku najlepszy okazał się advpng, choć w większości przypadków PNGOUT okazuje się jednak lepszy o ok. 10–20%. Stosuj do niego dodatkowy parametr -b[liczba].
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 ./pngout-linux-i686-static --help
żeby dowiedzieć się więcej o opcjach które mogą mieć wpływ na kompresję.
Optymalizacja grafik 24bit PNG na 8bit (256 kolorów) 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ę przestarzał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 -verbose [liczba_kolorow] [plik.png]
można użyć również -ordered. Przykład:
pngquant -verbose 256 plik.png
(nie nadpisuje pliku tylko tworzy nowy o innej nazwie)
pngnq -vg2.2 -s1 -n[liczba_kolorow] [plik.png]
Dodatkowo parametr -Qf działa tak jak -ordered w przypadku pngquant. Przykład:
pngnq -vg2.2 -s1 -n256 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 pkt. 3.
Wyraźnie widoczne piksele — Pngquant: 74% kompresji;
dość dobry dihtering — pngnq: 80% kompresji;
Po optymalizacji zyskały do odpowiednio: 76%(PNGOUT) i 82%(advpng).
Optymalizacja GIFów do PNG
Gify charakteryzują się 8bitową paletą kolorów (tzn. jeden piksel jest opisany na jednym bajcie) — 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 pkt. 4. 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 ;) Sprawdzamy ile ma kolorów poleceniem:
pnginfo [plikdosprawdzenia.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 -vg2.2 -s1 -n256 [plik.png]
następnie:
./pngout-linux-i686-static [plikzpngnq.png]
lub:
advpng -z4 [plikzpngnq.png]
Optipng+PNGOUT: 20% kompresji;
pngquant+PNGOUT: 21%;
pngnq+PNGOUT: 32%!
Wsadowe kompresowanie plików
Większość programów tzn.: pngquant, pngnq, optipng, advpng oraz jpegoptim pozwala na wsadową obróbkę plików. Wystarczy zamiast określonego pliku wpsiać *.png lub co było już w przykładzie jpegoptim: *.jpg. Czyli zamiast:
optipng -o7 [pojedynczyplik.png]
Trzeba wpisać:
optipng -o7 *.png
Przekonwertuje to wszystkie pliki o określonym typie w aktualnym katalogu (w przykładzie .png).
Zupełnie inaczej jest z programem PNGOUT. Tutaj trzeba zastosować kombinację z programów typowo unixowych:
ls -1 *.png | xargs -n1 [programpngout]
W naszym przypadku będzie to:
ls -1 *.png | xargs -n1 ./pngout-linux-i686-static
Można jeszcze dodać parametry — na końcu wpisu. Oczywiście plik programu musi znajdować się w tym samym katalogu co pliki .png
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ę!
Chcesz dowiedzieć się więcej o parametrach kompresorów? PNG — jak i dlaczego używać.