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.