Autor: Mariusz Ko�acz (rokko)
Strona autora: techformator.pl
Kontakt: m.kolacz(at)hotfix.pl

Cz�sto tworz�c artyku�, poradnik czy news chcemy uatrakcyjni� jego zawarto�� dodaj�c fotografie, zrzuty ekran�w czy dekoracje graficzne. Niestety ka�dy plik zajmuje cz�� przestrzeni dyskowej na serwerze i nie tylko, podczas wywo�ywania strony plik poch�ania cz�� przepustowo�ci ��cza, odwiedzaj�cy zniech�ceni d�ugim oczekiwaniem na za�adowanie grafiki cz�sto opuszczaj� witryn�. Kwestia ta przy do�� szybkim internecie wielkiego znaczenia nie ma, co innego, gdy posiadamy wolne ��cze i w dodatku dochodz� ostre miesi�czne limity transferu, gdzie ka�dy MB jest na wag� z�ota. Gdy dodamy do tego kwesti� limitu po stronie serwera, nawet w�a�ciciel strony WWW doceni optymalizacj� i b�dzie z ka�d� publikacj� dba�, aby pliki by�y maksymalnie zoptymalizowane. Jak wida�, korzy�ci z optymalizacji s� obop�lne, zar�wno w�a�ciciel strony, jak i czytelnicy b�d� zadowoleni. W niniejszym poradniku opisa�em bardzo dobry, darmowy program do optymalizacji plik�w graficznych w formatach JPEG, GIF i PNG.

Program nosi nazw� RIOT (Radical Image Optimization Tool), mo�na go pobra� z tej lokalizacji => Pobierz RIOT

Menu programu RIOT

• File - zawiera opcje pozwalaj�ce na wczytanie obrazka (pliku �r�d�owego) oraz zapis zoptymalizowanego pliku graficznego do formatu JPEG, PNG, GIF. 1
• Edit - zawiera kilka przydatnych opcji takich jak: obr�t zdj�cia w lewo lub w prawo (k�t 90°), odbicie obrazu pionowo lub poziomo, zmiana rozmiaru zdj�cia (do wyboru 6 algorytm�w). 1
• View - pozwala dostosowa� widok okna g��wnego programu do swoich potrzeb. 1
• Tools - zaawansowane opcje programu, dost�p do funkcji Compress to size. 1
• Help - menu pomocy pozwala na aktualizacj� programu, dost�p do artyku��w opisuj�cych funkcje i spos�b dzia�ania RIOT, uzyskanie informacji o autorze oraz sposobie licencjonowania aplikacji. 1

Podstawowe funkcje

• Open - otwiera obrazek. Obs�uguje ponad 30 format�w, mi�dzy innymi JPEG, BMP, GIF, JP2, PNG, TGA, TIF, PSD, PCD, PCX, PBM, RAS, ICO, MNG, WBMP, XBM, XPM, HDR, SGI, DDS, CUT, G3, IFF, KOA, PGM, PPM. 2
• Save - zapisuje zoptymalizowany plik graficzny do formatu JPEG, PNG lub GIF. 2
• Paste - wkleja obrazek ze schowka. 2
• Preview - r�czna aktualizacja podgl�du zoptymalizowanego obrazka. 3
• Initial image - podgl�d wczytanego obrazka (pliku �r�d�owego) wraz z jego aktualn� zaj�to�ci� przestrzeni dyskowej. 4
• Optimized image - podgl�d obrazka po optymalizacji wraz z informacj� o jego aktualnym rozmiarze. 5
• View toolbox - kilka ciekawych opcji zwi�zanych z widokiem aktualnie optymalizowanego obrazka. Mo�emy ustawi� podgl�d w stosunku jeden do jednego (1:1), zwi�kszy� lub zmniejszy� (+ / -), dopasowa� go do rozmiaru okna. Ostatnia opcja pozwala sprawdzi� r�nice w wygl�dzie pomi�dzy oryginalnym plikiem a zoptymalizowanym. 6

Zaawansowane funkcje RIOT

• Format toolbox - wyb�r formatu pliku spo�r�d JPEG, GIF lub PNG (plik wynikowy). 7
• Edit toolbox - kilka opcji, kt�re umo�liwiaj� obr�t zdj�cia w lewo lub w prawo (k�t 90°), odbicie obrazu pionowo lub poziomo, zmiana rozmiaru zdj�cia (do wyboru 6 algorytm�w). Szczeg�lnie ciekawa jest opcja Compress to size, kt�ra umo�liwia optymalizacj� obrazka do wskazanego rozmiaru. Program automatycznie dobiera najw�a�ciwsze opcje kompresji, tak aby rozmiar pliku wynikowego odpowiada� wymaganiom stawianym przez u�ytkownika. 8
• JPEG/GIF/PNG optimization - zaawansowane opcje optymalizacji dla ka�dego z format�w. 9

Optymalizacja plik�w JPEG/GIF/PNG

• Quality - wyb�r stopnia kompresji obrazu wed�ug specyfikacji formatu JPEG/JPG.
• Chroma subsampling - technika kodowania obraz�w JPEG, kt�rej celem jest zmniejszenie rozmiaru pliku wynikowego kosztem jego jako�ci. Zapisywana jest u�redniona informacja o kolorze pobrana z ka�dej grupy pikseli X na X, najcz�ciej 2:2 (Low). W programie mamy do wyboru 4 poziomy, pocz�wszy od None (chroma wy��czona), a� po High (maksymalny stopie�). Chrome mo�na zastosowa� przy zdj�ciach wysokiej rozdzielczo�ci. Aby zachowa� jak najlepsz� jako�� obrazu, nale�y zrezygnowa� z tej techniki i spr�bowa� u�y� odrobin� wi�kszego wsp�czynnika kompresji, kt�ry relatywnie mo�e przynie�� lepszy efekt jako�ciowy (dotyczy g��wnie grafik tworzonych na potrzeby stron WWW). W tej kwestii musicie sami dobra� najodpowiedniejsze proporcje opieraj�c si� na eksperymentowaniu.
• Progressive - dok�adniejsza technika kompresji, kt�ra pozwala zmniejszy� rozmiar pliku wynikowego przy zachowaniu jego wysokiej jako�ci. Obrazek poddany takiej kompresji, umieszczony na stronie WWW �adowany jest wst�pnie w najgorszej jako�ci, nast�pnie stopniowo jego jako�� poprawia si� aby ostatecznie osi�gn�� pierwotn� form�. Zaznaczaj�c opcj� Progressive wyd�u�amy proces kompresji, poniewa� obraz wielokrotnie jest skanowany i sk�adany, a� do otrzymania podstawy obrazu.
• Grayscale - zapis obrazu w skali szaro�ci.

• Color reduction - opcja pozwalaj�ca zredukowa� liczb� kolor�w. Mamy do wyboru kilka predefiniowanych ustawie� (256, 128, 16 kolor�w, skala szaro�ci oraz konwersja do obrazu monochromatycznego).
• Reduce colors to - opcja pozwalaj�ca zredukowa� liczb� kolor�w. U�ytkownik mo�e dowolnie modyfikowa� ilo�� kolor�w. Skala redukcji zawiera si� w przedziale od 256 do 2 kolor�w.
• Interlaced - zapis z przeplotem.
• Color quantization algorithm - algorytm redukuj�cy (optymalizuj�cy) liczb� kolor�w wyst�puj�cych w obrazie.

• Color reduction - zmniejszenie liczby kolor�w. U�ytkownik mo�e wybra� spo�r�d kilku predefiniowanych ustawie�.
• Reduce colors to - Liczba kolor�w zdefiniowana przez u�ytkownika (przedzia� 256-2). Opcja niedost�pna przy True Color.
• Interlaced - opcja pe�ni funkcj� podobn� do Interlaced GIF.
• Best compression (slow) - maksymalny stopie� kompresji ZLIB.
• Color quantization algorithm - pe�ni funkcj� podobn� do GIF color quantization algorithm. Opcja niedost�pna dla True Color. U�ytkownik mo�e wybra� jeden z dw�ch algorytm�w: Xiaolin Wu color lub NeuQuant neural-net. Ostatni z nich wykazuje si� zdecydowanie lepsz� jako�ci� zdj��, lecz s� one znacznie wi�ksze. Natomiast u�ycie Xiaolin objawia si� lepsz� kompresj� (mniejszy rozmiar pliku) lecz obrazy s� s�abszej jako�ci. Przy plikach 8 bit PNG mo�na spokojnie zastosowa� drug� metod�, plik wprawdzie jest wi�kszy lecz jako�� niepor�wnywalnie wy�sza.

Usuwanie ukrytych informacji

Je�eli wczytany obrazek zawiera ukryte informacje w postaci np. EXIF lub zawiera kana� alfa (prze�roczyste t�o), w polu optymalizacji danego formatu pliku pojawi� si� dodatkowe zak�adki, Metadata i/lub Mask.

• Remove IPTC info - opcja pozwalaj�ca usun�� dodatkowe dane umieszczane w plikach graficznych, takie jak tytu� obrazka, informacje o autorze i prawach autorskich, s�owa kluczowe itp.
• Remove XMP info - kolejny standard opisu cyfrowych zdj�� (metadane).
• Remove EXIF profile - metadane zawieraj�ce wiele ciekawych informacji technicznych na temat fotografii np. data i godzina powstania, informacje o aparacie (producent, model, wersja oprogramowania, ustawienia przes�ony), opis zdj�cia czy nawet dane geolokacyjne.
• Remove Comments - opcja pozwala usun�� wszelkie komentarze zaszyte w zdj�ciu.
• Remove ICC profile - mo�liwo�� usuni�cia profilu kolor�w (Profil ICC) zapisanego wraz ze zdj�ciem, kt�ry u�ywany jest do korekcji kolor�w. Tylko nowsze przegl�darki potrafi� zastosowa� profil kolor�w (np. Firefox 3.x obs�uguje profile ICC).

Pozbywaj�c si� metadanych mo�na nie tylko zmniejszy� rozmiar pliku graficznego, lecz tak�e zabezpieczy� sw� prywatno��, albowiem zdj�cia cz�sto potrafi� ujawni� wiele informacji o autorze, a nie ka�dy z nas chce tego typu dane udost�pnia� innym.

• Keep transparency - zachowuje kana� alfa.
• Threshold - ustawienia progu krycia dla kana�u alfa.
• Blend with solid background - zast�puje prze�roczysto�� wybranym kolorem (definiujemy kolor t�a).
• Set opaque - wymusza nieprzezroczysto�� (zawsze bia�e t�o).

Zmiana rozmiaru plik�w graficznych

• Width - szeroko�� w procentach lub pikselach.
• Height - wysoko�� w procentach lub pikselach.
• Keep aspect ratio - zachowuje wsp�czynnik proporcji.
• Unit: Pixels - jednostk� miary jest piksel.
• Unit: Percent - jednostk� miary jest procent.
• Resampling filter - wyb�r algorytmu, kt�ry zostanie u�yty do zmniejszenia b�d� zwi�kszenia rozmiaru obrazka.

Dost�pne algorytmy:

• Box - najszybszy, s�aba jako�� zdj��, brak anty-aliasingu.
• Bilinear - szybki, przyzwoita jako��, z wyg�adzaniem.
• B-Spline - do�� szybki, dobra jako��, z pe�nym wyg�adzaniem.
• Mitchell/Netravali Bicubic - do�� szybki, dobra jako��, z pe�nym wyg�adzaniem.
• Catmull-Rom - wolny, bardzo dobra jako��, z ostro�ci�.
• Lanczos3 - najwolniejszy, bardzo dobra jako��, z pe�n� ostro�ci�.

Procedura zmiany rozmiaru obrazka jest bardzo �atwa. Po wczytaniu pliku graficznego i wywo�aniu funkcji zmiany rozmiaru w polu Width i/lub Height wpisujemy nowy rozmiar obrazka (w zale�no�ci od wybranej miary w pikselach b�d� procentach). Nast�pnie wskazujemy jeden z dost�pnych algorytm�w, po czym wybieramy OK.

Przyk�ad optymalizacji pliku graficznego w programie RIOT

• Wczytujemy plik graficzny, wybieramy Open lub Paste. Aplikacja obs�uguje r�wnie� metod� drag and drop. Mo�emy otworzy� dany plik przeci�gaj�c go na szare pole.2
• Wybieramy format pliku wynikowego JPEG, GIF lub PNG. 7
• Optymalizujemy plik, wskazujemy najodpowiedniejsze dla nas opcje. 9
• Zapisujemy plik, wybieramy Save i wskazujemy miejsce zapisu zoptymalizowanego pliku. 2

Copyright © rokko

Wszystkie prawa zastrze�one. Dalsze rozpowszechnianie artyku�u jest zabronione.