Opcje optymalizacji obrazów i animowanych plików GIF

Formaty grafik internetowych mogą być bitmapowe (rastry) lub wektorowe. Formaty bitmapowe — GIF, JPEG oraz PNG — są zależne od rozdzielczości. Wymiary obrazów bitmapowych (i prawdopodobnie ich jakość) są uzależnione od rozdzielczości monitora. Formaty wektorowe — SVG i SWF — są niezależne od rozdzielczości i można je powiększać lub zmniejszać bez utraty jakości obrazu. Formaty wektorowe mogą też zawierać dane rastrowe. 

Opcje optymalizacji formatu JPEG

JPEG jest to standardowy format kompresji obrazów zawierających płynne przejścia tonalne, takich jak fotografie. Optymalizacja obrazu w formacie JPEG polega na zastosowaniu kompresji stratnej, która wybiórczo usuwa dane.

Decyduje o stopniu kompresji. Im wyższe ustawienie jakości, tym więcej szczegółów zachowuje algorytm kompresji. Jednocześnie jednak uzyskuje się pliki o większych rozmiarach. Aby wypośrodkować między jakością obrazu i wielkością jego pliku, należy obejrzeć obraz przy różnych ustawieniach jakości.

Powoduje utworzenie pliku w rozszerzonym formacie JPEG, o nieco mniejszej wielkości. Zoptymalizowany format JPEG jest zalecany dla uzyskania maksymalnego stopnia kompresji. Niemniej, niektóre starsze przeglądarki nie obsługują go.

Obraz jest wyświetlany stopniowo, wraz z postępem wczytywania. Przed całkowitym wczytaniem obrazu użytkownik będzie mógł obejrzeć jego wersję w małej rozdzielczości. Opcja Progresywny wymaga użycia formatu JPEG zoptymalizowany.

 Przeglądanie progresywnych obrazów JPEG wymaga więcej pamięci RAM i nie jest obsługiwane przez niektóre przeglądarki.

Ta opcja określa stopień rozmycia obrazu. Wynik zastosowania tej opcji jest identyczny z efektem filtra Rozmycie gaussowskie. Pliki są kompresowane w większym stopniu — są mniejsze. Zalecane jest ustawienie od 0,1 do 0,5.

Zachowuje profile kolorów w optymalizowanym pliku. W przypadku niektórych przeglądarek profile kolorów są używane do korekty kolorów.

Pozwala określić kolor wypełnienia dla pikseli, które w oryginalnym obrazie były przezroczyste: Kliknij próbkę kolorów i wybierz kolor za pomocą próbnika, bądź zaznacz jedną z opcji menu Otoczka: Kolor kroplomierza (aby użyć koloru z pola Kroplomierza), Biały, Czarny lub Inny (wybrany próbnikiem kolorów).

Piksele, które w oryginalnym obrazie były w pełni przezroczyste, zostaną wypełnione wybranym kolorem. Piksele, które w oryginalnym obrazie były częściowo przezroczyste, zostaną zmieszane z wybranym kolorem.

Opcje optymalizacji formatów GIF i PNG-8

Format GIF jest to standardowy format kompresji obrazów o płaskich kolorach i dużej liczbie ostrokątnych detali. Nadaje się do zapisywania kompozycji liniowych, ilustracji typu logo oraz ilustracji z tekstem. Format PNG‑8, podobnie jak GIF, zapewnia efektywną kompresję obszarów jednokolorowych i jednoczesne zachowanie ostrych szczegółów.

Formaty PNG-8 i GIF obsługują kolory 8-bitowe, dlatego też przy ich użyciu można uzyskać maksymalnie 256 kolorów. Procedura wyboru kolorów jest określana jako indeksowanie, dlatego formaty GIF i PNG-8 są określane niekiedy jako formaty koloru indeksowanego. W celu dokonania konwersji obrazu na kolor indeksowany tworzona jest tabela, w której są zapisywane i indeksowane kolory obrazu. Jeżeli w tabeli nie ma jednego z kolorów znajdujących się w oryginalnym obrazie, program wybierze kolor najbardziej do niego zbliżony, albo przeprowadzi dithering w celu symulowania tego koloru za pomocą dostępnych kolorów.

Niezależnie od opisanych niżej opcji można dopasować liczbę kolorów dostępnych w tabeli kolorów obrazu.

Plik jest kompresowany przez selektywne usuwanie danych. Ustawienia wyższe skutkują większą ilością usuniętych danych. Często można zastosować wartość kompresji stratnej równą 5-10, a czasami do 50, nie powodując degradacji obrazu. Opcja kompresji stratnej pozwala zmniejszyć rozmiar pliku o 5% do 40%.

 Opcji Stratna nie można używać w połączeniu z opcją Z przeplotem ani z algorytmami Szum lub Roztrząsanie z wzorkiem.

Pozwala określić metodę generowania tabeli sprawdzania kolorów, a także liczbę kolorów zawartych w tej tabeli. Można wybrać jedną z następujących metod redukcji:

Percepcyjna Jest tworzona niestandardowa tabela kolorów. Priorytet mają kolory lepiej odbierane przez ludzkie oko.

Selektywna Tworzona jest tablica kolorów podobna do tabeli Percepcyjna. W tym wypadku są jednak preferowane duże obszary kolorów i kolory internetowe. Ta tabela pozwala uzyskać obrazy o największej wierności kolorów. Opcja Selektywna to ustawienie domyślne.

Adaptacyjna Jest tworzona niestandardowa tabela kolorów. Jej zawartość powstaje przez próbkowanie kolorów z widma barw najczęściej występujących na obrazie. Na przykład, gdy obraz zawiera wyłącznie kolor zielony i niebieski, wynikowa tabela kolorów obejmuje przede wszystkim różne odcienie zieleni i niebieskiego. Większość obrazów ma kolory koncentrujące się w określonych obszarach widma.

Z ograniczeniami (internetowa) Używa standardowej tabeli 216 kolorów, które są wspólne dla 8-bitowych (256 kolorowych) palet systemów Windows i macOS. Ta opcja gwarantuje, że przeglądarki nie będą używały roztrząsania przy wyświetlaniu obrazów o kolorach 8-bitowych. (Paleta jest także zwana Bezpieczną paletą internetową). Używanie palety internetowej może sprzyjać powiększaniu plików i jest zalecane tylko w celu uniknięcia roztrząsania po stronie przeglądarki.

Niestandardowa Jest stosowana paleta kolorów utworzona lub zmieniona przez użytkownika. W przypadku otwarcia istniejącego pliku GIF lub PNG-8 ma on własną paletę kolorów.

 Tablicę kolorów można dostosować za pomocą palety Tablica kolorów w oknie dialogowym Zapisz dla Internetu i urządzeń.

Czarno-biały, Skala szarości, Mac OS, Windows Stosowany jest zestaw palet kolorów.

Decyduje o metodzie i stopniu roztrząsania. Słowo „roztrząsanie” (ang. „dithering”) oznacza symulację kolorów niedostępnych w używanym systemie. Określenie wyższej wartości procentowej roztrząsania powoduje symulację większej liczby kolorów i zachowanie większej liczby szczegółów obrazu, ale też zwiększa rozmiar pliku. Optymalny wybór to najmniejszy procent roztrząsania, przy którym są zachowywane wymagane szczegóły. Do obrazów o jednolitych kolorach często nie trzeba stosować roztrząsania. Obrazy z wieloma odcieniami kolorów (w szczególności gradienty) mogą wymagać roztrząsania.

Użytkownik może wybrać jedną z następujących metod:

Dyfuzja Jest stosowane wzorek losowy, który jest na ogół mniej zauważalny niż dithering za pomocą wzorku. Efekty symulacji są rozkładane między sąsiednie piksele.

Wzorek Wszelkie kolory spoza tabeli kolorów są symulowane przy użyciu kwadratowych wzorków przypominających półtony.

Szum Jest stosowany losowy wzór, co przypomina dithering dyfuzyjny; tu jednak nie zachodzi dyfuzja wzorku na piksele sąsiednie. Użycie metody Szum nie powoduje powstawania widocznych złączeń.

Decyduje o sposobie optymalizacji przezroczystych pikseli obrazu:

• Aby piksele w pełni przezroczyste pozostały przezroczyste, a piksele częściowo przezroczyste zostały wypełnione kolorem, należy zaznaczyć opcję Przezroczystość i wybrać kolor otoczki.

• Aby wypełnić całkowicie przezroczyste piksele wybranym kolorem i zmieszać z tym samym kolorem piksele częściowo przezroczyste, wybierz kolor otoczki i odznacz opcję Przezroczystość.

• Aby wybrać kolor otoczki, kliknij próbkę koloru otoczki i wybierz kolor za pomocą próbnika. Można także wybrać jedną z opcji z menu Otoczka: Kolor kroplomierza (aby użyć koloru z pola Kroplomierza), Kolor narzędzia, Kolor tła, Biały, Czarny lub Inny (wybrany próbnikiem kolorów).

Opcje Kolor narzędzia i Kolor tła dostępne są tylko w programie Photoshop.

A. Obraz oryginalny B. Przezroczystość wybrana z kolorem otoczki C. Przezroczystość wybrana bez otoczki D. Przezroczystość niewybrana z kolorem otoczki

Gdy zaznaczona jest opcja Przezroczystość, można wybrać metodę roztrząsania częściowo przezroczystych pikseli:

• Opcja Bez ditheringu przezroczystości powoduje, że do częściowo przezroczystych pikseli na obrazie nie jest stosowany dithering.

• Dyfuzja Dithering przezroczystości stosuje wzorek losowy, który jest na ogół mniej zauważalny niż dithering z wykorzystaniem wzorku. Efekty symulacji są rozkładane między sąsiednie piksele. Wybierając ten algorytm, należy określić wartość procentową odpowiedzialną za natężenie roztrząsania.

• Opcja Dithering przezroczystości wzorkiem powoduje, że do częściowo przezroczystych pikseli jest stosowany podobny do rastra półtonowego deseń kwadratów.

• Opcja Dithering przezroczystości szumu powoduje stosowanie losowego wzoru roztrząsania, co przypomina algorytm dyfuzyjny; tu jednak nie zachodzi dyfuzja wzorku na sąsiednie piksele. Użycie algorytmu Szum nie powoduje powstawania widocznych złączeń.

Podczas pobierania pliku w przeglądarce wyświetlana jest wersja obrazu w niskiej rozdzielczości. Tego typu metoda daje złudzenie szybszego wczytywania danych i pozwala upewnić się, że wczytywanie trwa. Niemniej, prowadzi ona do większych plików.

Opcja określa poziom tolerancji w upodabnianiu kolorów do ich odpowiedników z palety internetowej (zapobiega też symulowaniu kolorów w przeglądarce). Wyższa wartość tej opcji powoduje przesunięcie większej liczby kolorów.

Optymalizacja przezroczystości w obrazach GIF i PNG

Przezroczystość umożliwia tworzenie nieprostokątnych obrazków dla Internetu.Przezroczystość tła zachowuje w obrazie piksele przezroczyste.

Ta opcja umożliwia wyświetlanie tła strony internetowej przez przezroczyste obszary obrazu. Usuwanie otoczki tła symuluje przezroczystość przez mieszanie pikseli przezroczystych z kolorem otoczki, który odpowiada kolorowi tła strony internetowej. Otoczka tła daje lepsze efekty, jeśli tło strony internetowej jest nieprzezroczyste i znany jest jej kolor.

Opcje Przezroczystość i Otoczka w oknie Zapisywanie dla Internetu i urządzeń są przeznaczone do określania zasad optymalizacji pikseli przezroczystych w obrazach GIF i PNG.

• (GIF i PNG-8) Aby piksele w pełni przezroczyste pozostały przezroczyste, a piksele częściowo przezroczyste zostały wypełnione kolorem, wybierz opcję Przezroczystość i kolor otoczki.
• Aby wypełnić całkowicie przezroczyste piksele wybranym kolorem i zmieszać z tym samym kolorem piksele częściowo przezroczyste, wybierz kolor otoczki i usuń zaznaczenie z opcji Przezroczystość.
• (GIF i PNG-8) Aby wszystkie piksele o przezroczystości większej niż 50% stały się całkowicie przezroczyste, a wszystkie piksele o przezroczystości poniżej 50% stały się w pełni nieprzezroczyste, wybierz opcję Przezroczystość i z menu Otoczka wybierz opcję Brak.
• (PNG‑24) Aby zapisać obraz z wielopoziomową przezroczystością (do 256 poziomów), wybierz opcję Przezroczystość. Opcja Otoczka jest wyłączona, ponieważ przezroczystość wielopoziomowa umożliwia mieszanie obrazu z każdym kolorem tła.

 W przeglądarkach, które nie obsługują przezroczystości PNG-24, przezroczyste piksele mogą być wyświetlane na domyślnym kolorze tła, np. szarym.

Aby wybrać kolor otoczki, kliknij próbkę koloru i wybierz kolor za pomocą próbnika kolorów. Można także wybrać jedną z opcji z menu Otoczka: Kolor kroplomierza (aby użyć koloru z pola Kroplomierza), Kolor narzędzia, Kolor tła, Biały, Czarny lub Inny (wybrany próbnikiem kolorów).

 Opcje Kolor narzędzia i Kolor tła dostępne są tylko w programie Photoshop.

Aby wyświetlić tablicę kolorów dla optymalizowanego plasterka

Tablica kolorów dla plasterka wyświetlana jest w panelu Tablica kolorów w oknie dialogowym Zapisz dla Internetu i urządzeń.

Zaznacz plasterek zoptymalizowany w formacie GIF lub PNG-8. Tablica kolorów dla zaznaczonego plasterka wyświetlona zostanie w oknie dialogowym Zapisz dla Internetu i urządzeń.

Jeżeli obraz zawiera wiele plasterków, kolory w tablicy mogą być różne dla różnych plasterków (aby temu zapobiec, należy najpierw połączyć obszary). Jeżeli zaznaczysz różne obszary, które odwołują się do różnych tabel kolorów, tabela kolorów będzie pusta, a jej pasek stanu będzie zawierał komunikat „Mieszanay”.

Dostosowywanie tablicy kolorów w obrazach GIF i PNG-8

W oknie dialogowym Zapisywanie dla Internetu i urządzeń dostępny jest panel Tablica kolorów, który pozwala dostosować kolory w zoptymalizowanych obrazach GIF i PNG‑8. Zmniejszenie liczby kolorów często nie pogarsza jakości obrazu, ale skutkuje za to zmniejszeniem pliku obrazu.

Na tablicy kolorów można wykonywać następujące operacje: dodawanie nowych kolorów, usuwanie istniejących kolorów, przekształcanie zaznaczonych kolorów na bezpieczne kolory internetowe, blokowanie wybranych kolorów (tak by nie mogły zostać usunięte z palety).

Sortowanie tablicy kolorów

Z menu palety Tablica kolorów wybierz porządek sortowania:

• Bez sortowania — jest przywracany oryginalny porządek kolorów.
• Sortuj według barwy — sortowanie według położenia koloru na standardowym kole kolorów (wyrażanym jako stopień od 0 do 360). Kolory neutralne otrzymują barwę 0 i są układane razem z czerwieniami.
• Sortuj według luminancji — sortowanie według jasności lub jaskrawości koloru.
• Sortuj według popularności — sortowanie według częstotliwości występowania kolorów obrazie.

Aby dodać nowy kolor do tabeli kolorów

Do tabeli kolorów można dodać kolory, które zostały pominięte podczas jej budowania. Dodanie koloru do tabeli dynamicznej powoduje przesunięcie kolorów najbardziej do niego zbliżonych. Dodanie koloru do tabeli stałej lub własnej powoduje dodanie dodatkowej pozycji koloru do tabeli.

Wybierz kolory w tablicy kolorów

Biała ramka wyświetla się wokół wybranych kolorów w panelu Tablica kolorów.

• Aby wybrać kolor, kliknij go w tablicy kolorów.
• Aby zaznaczyć ciągłą grupę kolorów, wciśnij klawisz Shift i kliknij na ostatni kolor grupy. W ten sposób zostaną zaznaczone wszystkie kolory w wierszach pomiędzy pierwszym i ostatnim z zaznaczonych kolorów. Aby zaznaczyć nieciągłą grupę kolorów, wciśnij klawisz Ctrl (Windows) lub Command (macOS) i kliknij każdy z kolorów, który ma zostać zaznaczony. Wiele poleceń dotyczących zaznaczania kolorów jest dostępnych w menu palety Tablica kolorów.
• Aby wybrać kolor w obrazie podglądu, kliknij narzędziem Kroplomierz w obszarze podglądu w oknie dialogowym Zapisywanie dla Internetu i urządzeń. Kliknięcie z przytrzymaniem klawisza Shift umożliwia zaznaczenie dodatkowych kolorów.
• Aby usunąć zaznaczenia wszystkich kolorów, z menu palety Tablica kolorów wybierz polecenie Odznacz wszystkie kolory.

Przesunięcie koloru

Kolor zaznaczony w tabeli kolorów można zmienić, wprowadzając dla niego dowolne inne wartości składowych RGB. Po zregenerowaniu optymalizowanego obrazu zaznaczony kolor zmieni się na nowy we wszystkich miejscach obrazu, w których występował.

Przesuwanie kolorów na ich najbliższe odpowiedniki z palety internetowej

Aby zapobiec ditheringowi kolorów w przeglądarce, można przesunąć je na ich najbliższe odpowiedniki z palety internetowej. Gwarantuje to, że przeglądarka — uruchomiona w systemie Windows lub macOS z możliwością wyświetlania tylko 256 kolorów — nie będzie stosować roztrząsania.

Odwzorowanie kolorów na przezroczystości

Przypisując istniejące kolory do przezroczystości można wprowadzić na optymalizowanym obrazie obszary przezroczyste.

Blokowanie i odblokowywanie koloru

Wybrane kolory w tabeli można zablokować, aby zapobiec ich usunięciu podczas redukcji liczby kolorów oraz roztrząsaniu w aplikacji.

 Zablokowanie kolorów nie zapobiegnie roztrząsaniu w przeglądarce.

Usuwanie wybranych kolorów

Aby zmniejszyć rozmiar pliku, można usunąć wybrane kolory z tabeli. Po usunięciu koloru obszary optymalizowanego obrazka, które zawierały usunięty kolor, są kolorowane ponownie, przy użyciu najbliższego koloru z palety.

Po usunięciu koloru tablica kolorów automatycznie zmienia się na paletę własną (niestandardową). Dzieje się tak dlatego, że palety Adaptacyjna, Wizualna i Selektywna podczas kolejnej optymalizacji zmieniają się. Jest w nich przywracany usunięty kolor. Paleta Własna nie zmienia się po ponownej optymalizacji obrazu.

Zapisywanie w tablicy kolorów

Tabele kolorów zoptymalizowanych obrazów mogą być zapisywane w celu ponownego wykorzystania. Program pozwala też wczytywać tabele utworzone w innych aplikacjach. Po wczytaniu nowej tabeli kolorów do obrazu kolory w optymalizowanym obrazie są zmieniane na kolory z nowej tabeli.

Wczytywanie tablicy kolorów

Opcje optymalizacji formatu PNG‑24

Format PNG-24 stosuje się do kompresji obrazów o ciągłych odcieniach. Pliki w tym formacie mają jednak większe rozmiary niż pliki w formacie JPEG. Przewaga formatu PNG-24 wyraża się w tym, że zachowuje on do 256 poziomów przezroczystości obrazu.

Decyduje o sposobie optymalizacji przezroczystych pikseli obrazu.

Podczas pobierania pliku w przeglądarce wyświetlana jest wersja obrazu w niskiej rozdzielczości. Tego typu metoda daje złudzenie szybszego wczytywania danych i pozwala upewnić się, że wczytywanie trwa. Niemniej, prowadzi ona do większych plików.