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.

Określa poziom kompresji. Im wyższe ustawienie jakości, tym więcej szczegółów zachowuje algorytm kompresji. Ustawienie wysokiej jakości powoduje jednak zwiększenie rozmiaru pliku w porównaniu z ustawieniem niskiej jakości. Zoptymalizowany obraz można wyświetlić przy kilku ustawieniach jakości, aby określić najlepszą równowagę między jakością a rozmiarem pliku.

Tworzy poprawiony plik JPEG z nieco mniejszym rozmiarem pliku. Zoptymalizowany format JPEG jest zalecany dla maksymalnej kompresji plików; jednak niektóre starsze przeglądarki nie obsługują tej funkcji.

Obraz jest wyświetlany stopniowo w przeglądarce internetowej. Obraz wygląda jak seria nakładek, co pozwala widzom zobaczyć wersję obrazu o niskiej rozdzielczości, zanim zostanie całkowicie pobrany. 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 zoptymalizowanym pliku. Niektóre przeglądarki wykorzystują profile kolorów do korekcji 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

GIF to standardowy format kompresji obrazów o płaskim kolorze i wyraźnych szczegółach, takich jak grafika liniowa, znaki logo lub ilustracje z tekstem. Podobnie jak format GIF, format PNG-8 skutecznie kompresuje jednolite obszary koloru, zachowując jednocześnie ostrość szczegółów.

Pliki PNG-8 i GIF obsługują 8-bitowe kolory, dzięki czemu mogą wyświetlać do 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. Aby przekonwertować obraz na kolor indeksowany, należy utworzyć tablicę wyszukiwania kolorów, która będzie służyła do przechowywania i indeksowania kolorów tego obrazu. Jeśli kolor oryginalnego obrazu nie występuje w tablicy wyszukiwania kolorów, aplikacja wybiera najbliższy kolor z tabeli albo symuluje go przy użyciu 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. Większa wartość opcji Stratne powoduje odrzucanie większej ilości danych. Często można zastosować wartość stratną od 5 do 10, a niekiedy nawet do 50, nie pogarszając jakości obrazu. Opcja Stratna umożliwia zmniejszenie rozmiaru 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.

Określa metodę generowania tablicy wyszukiwania kolorów oraz liczbę kolorów w tablicy wyszukiwania kolorów. Można wybrać jedną z następujących metod redukcji kolorów:

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. Tablica ta pozwala tworzyć obrazy o najczęściej jednolitych kolorach. Domyślną opcją jest opcja Selektywne.

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 obraz zawierający tylko kolory zielony i niebieski tworzy tablicę kolorów złożoną głównie z 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 ta jest również nazywana 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.

Można wybrać jedną z następujących metod roztrząsania:

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 były całkowicie przezroczyste, a piksele częściowo przezroczyste były mieszane z kolorem, zaznacz opcję Przezroczystość i wybierz 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 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.

A. Oryginalny obraz B. Wybrano przezroczystość z kolorem otoczki C. Wybrano przezroczystość bez pasującego D. Usunięcie zaznaczenia przezroczystości 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. W przypadku algorytmu Szum nie są wyświetlane szwy.

Wyświetla w przeglądarce wersję obrazu w niskiej rozdzielczości podczas pobierania pełnego pliku obrazu. Przeplot może skrócić czas pobierania i może zapewnić widzów, że pobieranie jest w toku. Przeplot zwiększa jednak również rozmiar pliku.

Określa poziom tolerancji dla przesuwania kolorów do najbliższych odpowiedników palety internetowej (zapobiegając roztrząsaniu kolorów w przeglądarce). Wyższa wartość 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 były całkowicie przezroczyste, a piksele częściowo przezroczyste były mieszane z kolorem, zaznacz opcję Przezroczystość i wybierz 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 z przezroczystością większą niż 50% były w pełni przezroczyste, a wszystkie piksele z przezroczystością mniejszą lub równą 50% były w pełni nieprzezroczyste, wybierz opcję Przezroczystość, a następnie wybierz opcję Brak z menu Otoczka.
• (PNG-24) Aby zapisać obraz z wielopoziomową przezroczystością (do 256 poziomów), wybierz opcję Przezroczystość. Opcja Otoczka jest wyłączona, ponieważ wielopoziomowa przezroczystość umożliwia mieszanie obrazu z dowolnym 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 dla obrazów 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 pozwala zachować jakość obrazu, jednocześnie zmniejszając rozmiar pliku obrazu.

Możesz dodawać i usuwać kolory w tablicy kolorów, przesuwać wybrane kolory do bezpiecznych kolorów z palety internetowej oraz blokować wybrane kolory, aby zapobiec ich usunięciu 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 odcienia sortuje według lokalizacji koloru na standardowym kole kolorów (wyrażonej w stopniach od 0 do 360). Kolorom neutralnym przypisywana jest barwa 0, a wraz z nimi kolory czerwone.
• Sortuj według luminancji — sortowanie według jasności lub jaskrawości koloru.
• Sortuj według popularności — sortuje według częstotliwości występowania kolorów na obrazie.

Dodawanie nowego koloru do tablicy kolorów

Można dodawać kolory, które nie zostały uwzględnione przy tworzeniu tablicy kolorów. Dodanie koloru do dynamicznej tabeli przesuwa kolor w palecie najbardziej zbliżony do nowego koloru. Dodanie koloru do tabeli stałej lub niestandardowej powoduje dodanie dodatkowego koloru do palety.

Wybieranie kolorów w tablicy kolorów

Wokół zaznaczonych kolorów w tablicy kolorów pojawi się biała ramka.

• Aby wybrać kolor, kliknij go w tablicy kolorów.
• Aby zaznaczyć wiele kolorów w tablicy kolorów, przytrzymaj klawisz Shift i kliknij inny kolor. Zostaną zaznaczone wszystkie kolory w wierszach między pierwszym i drugim wybranym kolorem. 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.

Zmiana koloru

Możesz zmienić wybrany kolor w tablicy kolorów na dowolną inną wartość koloru RGB. Podczas ponownego generowania zoptymalizowanego obrazu zaznaczony kolor zmieni się w nowy, gdziekolwiek pojawi się na obrazie.

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

W celu ochrony kolorów przed roztrząsaniem w przeglądarce można przesunąć kolory do ich najbliższych odpowiedników w palecie 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

Aby dodać przezroczystość do zoptymalizowanego obrazu, odwzorowuj istniejące kolory na przezroczystość.

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.

Usuń wybrane kolory

Wybrane kolory można usunąć z tablicy kolorów, aby zmniejszyć rozmiar pliku obrazu. Po usunięciu koloru obszary zoptymalizowanego obrazu, które wcześniej zawierały ten kolor, są renderowane przy użyciu najbliższego koloru pozostałego w palecie.

Po usunięciu koloru tabela kolorów automatycznie zmienia się w paletę Własną. 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

Tablice kolorów można zapisywać ze zoptymalizowanych obrazów do wykorzystania na innych obrazach oraz do wczytywania tabel kolorów utworzonych w innych aplikacjach. Po wczytaniu nowej tablicy kolorów do obrazu kolory zoptymalizowanego obrazu zostaną zmienione zgodnie z kolorami z nowej tablicy.

Wczytywanie tablicy kolorów

Opcje optymalizacji formatu PNG-24

Format PNG-24 nadaje się do kompresji obrazów o płynnych przejściach tonalnych, ale generuje znacznie większe pliki niż format JPEG. Zaletą formatu PNG-24 jest możliwość zachowania 256 poziomów przezroczystości obrazu.

Decyduje o sposobie optymalizacji przezroczystych pikseli obrazu.

Wyświetla w przeglądarce wersję obrazu w niskiej rozdzielczości podczas pobierania pełnego pliku obrazu. Przeplot może skrócić czas pobierania i może zapewnić widzów, że pobieranie jest w toku. Przeplot zwiększa jednak również rozmiar pliku.