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
- 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
• 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/
2. 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%.
3. 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]
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ę 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
4. 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%. Pooptymalizacji zyskały do odpowiednio: 76%(PNGOUT) i 82%(advpng).
5. 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
Sprawdzamy ile ma kolorów poleceniem:pnginfo [plikdosprawdzenie.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:
http://uploader.pl/?d=7779A2751
Bardziej przejrzysty i można czytać bez podłączonego neta
