Photoshop - (optymalizacja)

10
Optymalizacja gra-
fiki dla WWW
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
2
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 wydzie-
lenie 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 wiel-
kości pliku
• Dopasowanie działania mechanizmu dithering w zależności od ro-
dzaju 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 opa-
nowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe
ImageReady. Przygotuj się do przećwiczenia lekcji i skopiuj do lokalne-
go katalogu Moje dokumenty katalog Photoshop–Lekcja10 z poda-
nej przez prowadzącego lokalizacji.
Optymalizacja obrazów przy użyciu Adobe Photoshopa
lub ImageReady
Adobe Photoshop i ImageReady pozwalają na szeroki zakres kontroli
parametrów kompresji rozmiarów plików, a podczas optymalizacji za-
chodzą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 zasto-
sowanym 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
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
3
do dyspozycji paletę jedynie 256 kolorów, przez co nie nadaje się
on do zapisywania zdjęć. Format GIF umożliwia tworzenie obraz-
kó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 inter-
netowych 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.
Kompresja grafiki (tłumaczenie z wbudowanej pomocy Adobe
Photoshop)
Wiele formatów plików z obrazkami korzysta z technik kompresji dla
zmniejszenia powierzchni potrzebnej dla obrazków bitmapowych. Tech-
niki 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ą ob-
sługiwaną przez formaty Photoshopa oraz niektóre formaty Win-
dows.
• Technika LZW (Lemple-Zif-Welch) jest kompresją bezstratną obsłu-
giwaną 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).
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
4
Po wybraniu kompresji JPEG, użytkownik określa jakość obrazka po-
przez wybranie opcji z menu Jakość, przesunięcie suwaka Jakość lub
wpisanie wartości od 1 do 12 w polu Jakość. Najlepsze efekty na wy-
druku 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 PostScrip-
tu. (CCITT jest skrótem od francuskiej nazwy International Telegra-
ph and Telekeyed Consultive Committee.)
• Kodowanie ZIP jest kompresją bezstratną obsługiwaną przez format
PDF. Tak samo, jak w przypadku LZW, kompresja ZIP jest najsku-
teczniejsza 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.
Optymalizacja i zapis plików w Photoshopie
Wszystkie możliwe opcje optymalizacji grafiki znajdują się w Photosho-
pie 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ąza-
nia 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 zeskano-
wanych zdjęć zwierząt w Photoshopie. Aktualny rozmiar pliku jest zde-
cydowanie za duży, aby go było można umieścić na stronie interneto-
wej. 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.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
5
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 do-
prowadzić 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ć widocz-
ny fragment i zobaczyć inne części obrazu.
7 Przysuń teraz powiększony obraz tak, aby zobaczyć napis Tropi-
kalne Lasy Deszczowe.
8 Wybierz teraz GIF 128 Dithred z sekcji Settings z prawej strony
okna dialogowego.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
6
Zauważ ciemne grupy pikseli o jednolitym kolorze wokół tekstu oraz na
dziobie papugi.
Teraz wykorzystamy dwa dolne okna, aby zobaczyć i porównać jak wy-
glą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ą ja-
kość 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 me-
nu 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 Me-
dium, 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.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
7
17 W ustawieniach włącz opcje Progressive.
Ta opcja powoduje to, że podczas ładowania pliku z serwera cały pro-
ces 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 dialo-
gowym podaj nazwę pliku L10_optym_pocz1.jpg i zapisz w tym sa-
mym katalogu, w którym znajduje się oryginalny plik.
19 Zamknij oryginalny plik bez zapisania zmian.
Użycie kanałow do modyfikacji jakości formatu JPEG (tłuma-
czenie z wbudowanej pomocy Adobe Photoshop)
Przy używaniu kanału alfa do optymalizacji jakości obrazka JPEG, ob-
szary białe posiadają najwyższą jakość, a czarne obszary maski charak-
teryzują 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 Set-
tings lub wybrać opcję JPEG z menu formatów.
2. Kliknąć na przycisku kanału, umieszczonym na prawo od pola Quali-
ty.
3. W oknie Modify Quality Setting, zaznaczyć wybrany kanał z menu
Channel. W ImageReady, użytkownik może utworzyć nowy kanał al-
fa na podstawie bieżącego zaznaczenia, korzystając z polecenia
Save Selection.
4. Aby obejrzeć efekty wyważonej optymalizacji, należy zaznaczyć
opcję Preview.
5. Zdefiniować zakres jakości:
• Aby zaznaczyć najwyższy poziom jakości, należy przeciągnąć
prawą (białą) zakładkę suwaka, wpisać wartość w polu Maximum
lub zmienić aktualną wartość przy pomocy strzałek.
• Aby zaznaczyć najniższy poziom jakości, należy przeciągnąć lewą
(czarną) zakładkę suwaka, wpisać wartość w polu Minimum lub
zmienić aktualną wartość przy pomocy strzałek.
6. Kliknąć na OK.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
8
Optymalizacja grafiki w formacie GIF
Teraz zajmiemy się optymalizacją plików w formacie GIF, w których za-
zwyczaj występują większe obszary o jednolitym kolorze. Pracując w
programie ImageReady, będziemy porównywać wpływ różnych usta-
wień opcji optymalizacji na efekt końcowy.
W programie ImageReady mamy do dyspozycji paletę Optimize, która
pozwala na wybór formatu pliku i ustawienia opcji kompresji.
1 Zamknij teraz program Program Photoshop i uruchom ImageReady.
2 Otwórz plik L10_optym_pocz2.psd z katalogu z aktualną lekcją.
3 Kliknij na zakładkę 2-Up w oknie dokumentu.
Wersja zoptymalizowana jest wybrana i wyświetlana w prawej części
okna.
4 W palecie Optimize wybierz GIF 128 No Dither z menu Settings.
5 Wybierz opcję Perceptual z rozwijanego menu Color Reduction
Algorithm (poniżej pola z wyborem formatu pliku).
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
9
Powyższe ustawienie dotyczy metody redukcji kolorów, możesz zasto-
sować poniższe ustawienia, każda z tych metod ma zastosowanie w
konkretnych sytuacjach:
• Perceptual - tworzy własną tabelę kolorów, nadając pierwszeń-
stwo kolorom lepiej odbieranym przez ludzkie oko.
• Selective - tworzy tabelę kolorów podobną do tabeli Wizualnej,
nadając pierwszeństwo szerszym obszarom kolorów i zachowując
kolory Weba. Tabela tworzy zwykle obrazki z najlepszą reprezen-
tacją kolorów i jest tabelą domyślną.
• Adaptive - tworzy własną tabelę kolorów poprzez próbkowanie
kolorów ze spektrum najczęściej pojawiającego się na obrazku.
Na przykład, w obrazku w kolorach zielonym i niebieskim, opcja
utworzy tabelę składającą się głównie z zieleni i kolorów niebie-
skich. Większość obrazków składa się z kolorów określonych ob-
szarów spektrum.
• Web - używa standardowej tabeli 216-kolorów znanych w 8-
bitowych (256 kolorów) paletach Windows i Mac OS. Opcja za-
pewnia, że przeglądarki korzystające z kolorów 8-bitowych nie
będą używały ditheringu przy wyświetlaniu takich obrazków. (Pa-
leta jest także zwana Bezpieczną paletą Weba.) Jeśli obrazek po-
siada mniej kolorów, niż to określono w palecie kolorów, to nie-
używane kolory są usuwane. Korzystanie z palety Web może po-
większyć pliki i jest zalecane tylko dla uniknięcia ditheringu prze-
glądarki. Przeglądanie i kontrola ditheringu.
• Custom - zachowuje bieżącą paletę kolorów jako tabelę stałą,
która nie będzie uaktualniana przy wprowadzaniu zmian do ob-
razka.
• Mac OS lub Windows - używa domyślnej 8-bitowej palety sys-
temu Mac OS lub Windows (256 kolorów), która jest oparta na
ujednoliconych próbkach kolorów RGB. Jeśli obrazek posiada
mniej kolorów, niż to określono w palecie kolorów, to nieużywa-
ne kolory są usuwane.
Na dole okna dokumentu znajduje się pasek informacyjny. Wyświetlana
jest na nim informacja o aktualnym powiększeniu, oraz o innych waż-
nych dla nas parametrach zarówno o wersji oryginalnej obrazu i jak i
optymalizowanej. Mogą tam być wyświetlane jednocześnie dwa para-
metry dotyczące obydwu wersji obrazu.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
10
A - Rozmiar pliku oraz czas załadowania zoptymalizowanej wersji pliku
B – Rozmiar pliku wersji oryginalnej oraz zoptymalizowanej
A B
6 Wybierz teraz z paska informacyjnego, rozwijając drugie menu,
opcję Image Dimensions.
Ta opcja pokazuje rozmiar obrazu w pikselach. Jest to przydatne, kiedy
masz już przygotowane miejsce na stronie WWW i dopasowujesz do
niego obrazek.
7 Jeśli nie jest teraz widoczna paleta Color Table, wybierz Window
Show Color Table.
Małe białe romby oznaczają
kolory zabezpieczone przed
ditheringiem
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
11
Ta paleta pokazuje tabelę kolorów przygotowaną przez paletę Percep-
tual dla naszego obrazku mapy zoo. Białe romby na niektórych kolo-
rach oznaczają, że będą one bezpieczne w przeglądarkach interneto-
wych i nie będą poddawane ditheringowi (symulacji nieistniejącego ko-
loru). Całkowita liczba zastosowanych kolorów jest widoczna w dolnej
lewej części palety. Masz możliwość przewijania zawartości palety,
zmiany jej rozmiarów, oraz sposobu rotowania kolorów
8 Wybierz Sort By Hue, z menu palety Color Table.
Teraz zobaczymy jak wpływają inne ustawienia palety Optimize na wy-
gląd obrazu.
9 W palecie Optimize wybierz opcję Web z rozwijanego menu Color
Reductions Algorithm.
Zauważ jak, po tej zmianie, wygląda tabela kolorów, która jest dosto-
sowana teraz do nowych wymogów.
10 Poeksperymentuj teraz z różnymi ustawieniami i analizuj wygląd ob-
razu, wyciągnij z tego wnioski.
Redukcja tabeli kolorów
W celu lepszej kompresji pliku, możemy zmniejszyć całkowitą ilość ko-
lorów, występującą w tabeli kolorów. Redukcja kolorów często pozwala
na zachowanie wysokiej jakości obrazu przy jednoczesnym bardzo
znacznym pomniejszeniu rozmiaru pliku.
1 W palecie Optomize wybierz opcję Perceptual.
2 W oknie dokumentu zmień powiększenie do 200% lub więcej, abyś
mógł zobaczyć na obrazie wszystkie drobne detale.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
12
3 Wybierz zoptymalizowany obraz a następnie przesuń obraz do miej-
sca na mapie Tropikalne Lasy Deszczowe, tak, aby było ono do-
brze widoczne.
4 Zapamiętaj obecny rozmiar optymalizowanego pliku, a następnie
zmień liczbę kolorów, w polu Colors palety Optimize, na 32.
Zauważ, że nowy rozmiar pliku jest znacznie mniejszy niż poprzednio,
ale zostało to okupione niską jakością obrazu, zostały zmienione kolory
symboli zwierząt a także innych elementów. Symbole w części Sawan-
na Afrykańska mają zupełnie odmienne kolory, a w części Arktyczna
Pustynia w ogóle nie są widoczne.
5 Przesuń teraz obraz na inny obszar mapy, może na początek na
część Sawanna Afrykańska lub zmień powiększenie do 100%.
6 Zmień ilość kolorów z powrotem do 128.
Tym razem, przed następną redukcją ilości kolorów, zabezpieczymy
niektóre z nich przed zniknięciem z palety kolorów.
7 Wybierz próbnik koloru (Eyedropper Tool - ) i kliknij na sylwetce
wielbłąda, aby pobrać próbkę koloru.
Ciemnobrązowy kolor jest teraz wybrany w tabeli kolorów
8 Kliknij teraz na przycisk Lock button - , w dolnej części palety
Color Table, co spowoduje zablokowanie wybranego koloru.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
13
Na zablokowanym kolorze, w prawym dolnym rogu, pojawi się malutki
biały kwadrat, który oznacza kolor zablokowany, aby czynność odwró-
cić należy powtórzyć czynność z punktu 8.
9 Powtórz teraz procedurę blokowania koloru dla sylwetek zwierząt
znajdujących się w części Arktyczna Pustynia.
10 Zredukuj powtórnie ilość kolorów do 32.
Teraz zablokowane kolory zostały w palecie, niestety pojawiły się nowe
przesunięcia kolorów.
11 Zmień ilość kolorów, znów na 128.
12 Zablokuj teraz kolory na wszystkich sylwetek zwierzą oraz innych
elementów na różnych częściach mapy zoo. Nie blokuj jednak teraz
zielonego koloru tła w części Tropikalne Lasy Deszczowe. Bę-
dziemy jeszcze z tym kolorem eksperymentować w dalszej części
lekcji.
Dalsze obniżanie ilości kolorów nie zawsze jest możliwe ze względu na
dużą utratę jakości, jednak w przypadku prostych grafik może to być
możliwe i spowoduje jeszcze większe zmniejszenie objętości pliku.
Zawsze staraj się używać najmniejszej ilości kolorów jak to tylko moż-
liwe, ale zwracaj uwagę na zachowanie dobrej jakości obrazu.
13 Po zakończeniu eksperymentów, zapisz zmiany w pliku, ale nie za-
mykaj go.
Kontrola Ditheringu
Być może zauważyłeś, że przy niektórych ustawieniach opcji optymali-
zacji na niektórych powierzchniach obrazu pojawiają się kropki lub
plamki ułożone w dziwne wzory. Tak się dzieje, gdy jest stosowana
technika ditheringu. Technika ta jest oparta na symulacji koloru, który
nie jest obecny w tabeli kolorów za pomocą innych kolorów, które w
niej są obecne. Przykładowo kolor niebieski i żółty, ułożone w mozaikę
według pewnego wzoru dadzą w efekcie złudzenie koloru zielonego,
którego może nie być w tabeli kolorów.
Podczas optymalizacji plików graficznych pamiętaj o dwóch rodzajach
ditheringu.
• Dithering aplikacji - występuje w obrazkach GIF i PNG-8, gdy
ImageReady lub Photoshop próbują odtworzyć kolory oryginału
obrazka, których nie ma w palecie kolorów wybranej dla wersji
zoptymalizowanej. Dithering aplikacji może być kontrolowany w
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
Lekcja 10
Adobe Photoshop – Optymalizacja grafiki dla WWW
14
Photoshopie i ImageReady poprzez wybranie wzoru ditheringu i
zakresu kolorów podlegających tej operacji.
• Dithering przeglądarki – występuje, gdy przeglądarka 8-
bitowa (tryb 256 kolorów) próbuje odtworzyć kolory zoptymali-
zowanej wersji obrazka, których nie ma w palecie kolorów prze-
glądar...