25
Adobe Photoshop – Optymalizacja grafiki dla WWW
10
Optymalizacja grafiki dla WWW
Zarówno Adobe Photoshop jak i Adobe ImageReady pozwalają na optymalizowanie grafiki pod względem jakości i objętości pliku w celu efektywnego publikowania stron WWW. Im mniejszy wygenerujesz plik, tym szybciej będzie on pobrany z serwera, ale czasem istnieje potrzeba pokazania dużego rysunku, z bogactwem kolorów i szczegółów, wtedy musisz poszukać kompromisu. ImageReady pozwala także na wydzielenie obszarów rysunku, które można wykorzystać do nawigacji stroną WWW. W tej lekcji poznasz następujące zagadnienia:
· Optymalizacja grafiki w formacie JPEG oraz GIF, dopasowanie ustawień optymalizacji w celu zrównoważenia jakości grafiki i wielkości pliku
· Dopasowanie działania mechanizmu dithering w zależności od rodzaju rysunku
· Definiowanie przeźroczystego tła dla grafiki
· Tworzenie hiperłącz za pomocą map definiowanych na obrazach
· Automatyzacja procesu optymalizacji za pomocą przygotowanych procedur
Lekcja powinna zakończyć się po około 90 minutach całkowitym opanowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe ImageReady. Przygotuj się do przećwiczenia lekcji i skopiuj do lokalnego katalogu Moje dokumenty katalog Photoshop–Lekcja10 z podanej przez prowadzącego lokalizacji.
Adobe Photoshop i ImageReady pozwalają na szeroki zakres kontroli parametrów kompresji rozmiarów plików, a podczas optymalizacji zachodzące zmiany w jakości grafiki są na bieżąco wyświetlane. Opcje optymalizacji są zależne od formatu pliku, który wybraliśmy.
· Format JPEG został stworzony w celu odzwierciedlenia szerokiego zakresu kolorów oraz subtelnych zmian jasności w obrazach o płynnych przejściach tonowych takich jak zdjęcia, grafiki z zastosowanym gradientem itp.
· Format GIF jest efektywny wtedy, gdy obraz zawiera obszary pokryte jednolitym kolorem oraz powtarzające się elementy (np. w grafikach, logo, ilustracjach z tekstem). W tym formacie mamy do dyspozycji paletę jedynie 256 kolorów, przez co nie nadaje się on do zapisywania zdjęć. Format GIF umożliwia tworzenie obrazków z przeźroczystym tłem.
· Format PNG, podobnie jak GIF, jest efektywny w przypadku, gdy obrazek zawiera obszary o jednolitym kolorze i chcemy zachować drobne szczegóły na obrazie. Format PNG-8 używa palety 256 kolorów, format PNG-24 wspiera 24 bitowy zapis kolorów (16,7 milionów kolorów). Niestety wiele starszych przeglądarek internetowych nie obsługuje tego formatu.
W tej lekcji nauczysz jak w pełni wykorzystać możliwości Photoshopa i ImageReady w dziedzinie optymalizacji obrazów i wykorzystania ich w tworzeniu stron WWW. Będziemy tworzyć fikcyjną stronę ZOO, gdzie poznasz praktyczne zastosowanie omawianych tutaj mechanizmów.
Istotną rzeczą jest to, że Adobe Photoshop i ImageReady udostępniają wiele podobnych funkcji optymalizacji. Obydwa programy pozwalają podglądać i porównywać różne wersje zoptymalizowanych obrazów, wybierać spośród wielu formatów i ustawień, pracować z paletą kolorów i z każdym kolorem indywidualnie, aby zachować spójność kolorów i zmniejszyć jak tylko to możliwe rozmiar pliku.
Wiele formatów plików z obrazkami korzysta z technik kompresji dla zmniejszenia powierzchni potrzebnej dla obrazków bitmapowych. Techniki kompresji dzielą się na takie, które usuwają szczegóły i kolory z obrazków (technika stratna) i na technikę bezstratną, która kompresuje dane bez usuwania szczegółów. Wymienione niżej techniki są najczęściej używane:
· Kompresja RLE (Run Length Encoding) jest techniką bezstratną obsługiwaną przez formaty Photoshopa oraz niektóre formaty Windows.
· Technika LZW (Lemple-Zif-Welch) jest kompresją bezstratną obsługiwaną przez formaty TIFF, PDF, GIF i język PostScript. Technika ta jest szczególnie przydatna przy kompresowaniu obrazków z dużymi obszarami w jednym kolorze.
· Kompresja JPEG (Joint Photographic Experts Group) jest techniką stratną obsługiwaną przez formaty JPEG, PDF i język PostScript. Technika ta przynosi najlepsze rezultaty w przypadku obrazków z łagodnymi przejściami tonalnymi (np. w fotografiach).
Po wybraniu kompresji JPEG, użytkownik określa jakość obrazka poprzez wybranie opcji z menu Jakość, przesunięcie suwaka Jakość lub wpisanie wartości od 1 do 12 w polu Jakość. Najlepsze efekty na wydruku przynosi kompresja o maksymalnej jakości. Pliki z kodowaniem JPEG mogą być drukowane tylko na drukarkach PostScript Level 2 (lub nowszych) i mogą nie rozdzielać się na poszczególne płyty.
· Kodowanie CCITT jest grupą kompresji bezstratnych dla obrazków czarno-białych obsługiwanych przez formaty PDF i języka PostScriptu. (CCITT jest skrótem od francuskiej nazwy International Telegraph and Telekeyed Consultive Committee.)
· Kodowanie ZIP jest kompresją bezstratną obsługiwaną przez format PDF. Tak samo, jak w przypadku LZW, kompresja ZIP jest najskuteczniejsza dla obrazków z dużymi obszarami kryjącego koloru.
· (ImageReady) PackBits jest bezstratną kompresją. Kompresja PackBits jest obsługiwana przez format TIFF tylko w ImageReady.
Wszystkie możliwe opcje optymalizacji grafiki znajdują się w Photoshopie w oknie dialogowym Save For Web. Możesz porównywać jedną lub więcej zoptymalizowanych wersji pliku, nad którym pracujesz. Możesz dopasowywać ustawienia optymalizacji dopóki nie znajdziesz rozwiązania gwarantującego najlepszą jakość obrazu oraz najmniejszy rozmiar pliku.
Teraz otworzysz pierwszy plik, zawierający zdjęcie w formacie JPEG, który będziemy poddawać optymalizacji. Zastosujesz różne ustawienia i porównasz otrzymane wyniki.
1 Uruchom program Adobe Photoshop.
2 Otwórz plik L10_optym_pocz1.psd.
Plik przedstawia zmodyfikowaną wersję mapy zoo, którą wykorzystasz w dalszej części lekcji. Mapa powstała z połączenia i obróbki zeskanowanych zdjęć zwierząt w Photoshopie. Aktualny rozmiar pliku jest zdecydowanie za duży, aby go było można umieścić na stronie internetowej. Porównamy teraz różne formaty i ustawienia kompresji, aby osiągnąć najmniejszy rozmiar pliku oraz najlepszą jakość obrazu.
3 Wybierz File à Save for Web.
4 W oknie dialogowym Save for Web, kliknij na zakładkę 4-Up, aby zobaczyć cztery wersje kompresowanego obrazku.
Oglądając cztery różne warianty obrazków poddanych kompresji, możesz wybrać ten, którego ustawienia będą najodpowiedniejsze dla tego typu grafiki, następnie skupiając się na wybranej metodzie możesz doprowadzić do jak najlepszego przybliżenia oryginału, bez nadmiernego rozrostu rozmiaru pliku.
5 W lewym dolnym brzegu okna dialogowego Save for Web wybierz powiększenie 200% lub większe, wtedy będziesz mógł natychmiast dostrzec wszystkie niedoskonałości kompresji.
6 Przesuń myszkę nas obrazek w górnym prawym rogu. Jest on teraz zaznaczony, o czym świadczy czarna obwódka wokół niego. Wskaźnik myszki przybierze postać ręki, będziesz mógł przesuwać widoczny fragment i zobaczyć inne części obrazu.
7 Przysuń teraz powiększony obraz tak, aby zobaczyć napis Tropikalne Lasy Deszczowe.
8 Wybierz teraz GIF 128 Dithred z sekcji Settings z prawej strony okna dialogowego.
Zauważ ciemne grupy pikseli o jednolitym kolorze wokół tekstu oraz na dziobie papugi.
Teraz wykorzystamy dwa dolne okna, aby zobaczyć i porównać jak wygląda kompresja w formatach: JPEG i PNG.
9 Kliknij myszką na dolną lewą wersję obrazu, aby ją wybrać.
10 Wybierz teraz ustawienie JPEG Low z sekcji Settings.
Obraz wygląda bardzo zaśmiecony, jakość jest nie do zaakceptowania, szczególnie wokół tekstu. Będziemy teraz próbować osiągnąć dobrą jakość obrazu, ale nie doprowadzając do nadmiernego rozrostu wielkości pliku.
11 Wybierz teraz JPEG High z palety Settings.
JPEG Low
JPEG High
Ta operacja poprawiła nam jakość obrazu, ale wrosła też objętość pliku.
12 Wybierz ustawienie JPEG Medium.
Jakość grafiki jest wciąż do zaakceptowania, a rozmiar pliku prawie dwukrotnie został zredukowany.
13 Poeksperymentuj z różnymi ustawieniami, dobierz je ręcznie w menu Settings, kieruj się jakością obrazu i wielkością pliku.
14 Kliknij teraz na prawym dolnym obrazku, aby go wybrać.
15 Wybierz ustawienie PNG-8 128 Dithered.
W tym przypadku rozmiar pliku jest również mniejszy niż oryginalny, ale jakość obrazu jest gorsza niż w przypadku ustawienia JPEG Medium, które w dodatku pozwala uzyskać mniejszy rozmiar pliku. Na domiar wszystkiego ten format nie obsługiwany jest przez większość starszych przeglądarek internetowych.
16 Wybierz teraz wersję z lewego dolnego brzegu.
17 W ustawieniach włącz opcje Progressive.
Ta opcja powoduje to, że podczas ładowania pliku z serwera cały proces jest rozbity na kilka etapów. Obraz z każdym następnym krokiem uzyskuje coraz lepszą jakość, a już w pierwszym momencie wiemy, co znajduje się na obrazku.
18 Kliknij teraz na przycisk OK w menu z prawej strony. W oknie dialogowym podaj nazwę pliku L10_optym_pocz1.jpg i zapisz w tym samym katalogu, w którym znajduje się oryginalny plik.
19 Zamknij oryginalny plik bez zapisania zmian.
Przy używaniu kanału alfa do optymalizacji jakości obrazka JPEG, obszary białe posiadają najwyższą jakość, a czarne obszary maski charakteryzują się jakością najniższą. Użytkownik może zmienić najwyższy i najniższy poziom jakości w oknie Modify Quality Setting.
Aby użyć kanału alfa do zmiany jakości JPEG, należy:
1. W panelu/palecie Optimize, zaznaczyć ustawienie JPEG z menu Settings lub wybrać opcję JPEG z menu formatów.
2. Kliknąć na przycisku kanału, umieszczonym na prawo od pola Quality.
3. W oknie Modify Quality Setting, zaznaczyć wybrany kanał z...
cleeo