Optymalizacja i zapisywanie obrazów GIF

Po utworzeniu animacji w programie Photoshop, musisz zapisać ją w jednym z dostępnych formatów, z których jeden to GIF . Osobliwością tego formatu jest to, że jest przeznaczony do wyświetlania (odtwarzania) w przeglądarce.

Jeśli interesują Cię inne opcje zapisywania animacji, zalecamy przeczytanie tego artykułu:

Lekcja: Jak zapisać wideo w Photoshopie

Proces tworzenia animacji GIF został opisany w jednej z poprzednich lekcji, a dziś porozmawiamy o tym, jak zapisać plik w formacie GIF i o ustawieniach optymalizacji.

Lekcja: Stwórz prostą animację w Photoshopie

Zapisywanie GIF

Najpierw powtórzymy materiał i zapoznajemy się z oknem ustawień zapisu. Można go otworzyć, klikając element "Zapisz w sieci" w menu "Plik" .

Okno składa się z dwóch części: bloku podglądu

i blok ustawień.

Blok podglądu

Wybór liczby opcji wyświetlania jest wybierany u góry bloku. W zależności od potrzeb można wybrać żądane ustawienie.

Obraz w każdym oknie, z wyjątkiem oryginału, jest konfigurowany osobno. Odbywa się to, aby móc wybrać najlepszą opcję.

W lewej górnej części bloku znajduje się mały zestaw narzędzi. Będziemy używać tylko "Hand" i "Scale" .

Za pomocą "Hands" możesz przesunąć obraz wewnątrz wybranego okna. Wybór jest również dokonywany przez to narzędzie. "Skala" wykonuje tę samą akcję. Aby powiększyć lub pomniejszyć, możesz użyć przycisków u dołu okna.

Nieco niżej znajduje się przycisk z napisem "Widok" . Otwiera wybraną opcję w domyślnej przeglądarce.

W oknie przeglądarki, oprócz zestawu parametrów, możemy również uzyskać kod HTML dla hypha.

Blok ustawień

W tym bloku parametry obrazu są korygowane, rozważymy je bardziej szczegółowo.

1. Schemat kolorów. To ustawienie określa, która tabela indeksowanych kolorów zostanie zastosowana do obrazu podczas optymalizacji.
   • Percepcyjny i po prostu "schemat percepcji". Po zastosowaniu Photoshop tworzy tabelę kolorów, kierując się bieżącymi odcieniami obrazu. Według twórców ten stół jest jak najbardziej zbliżony do tego, jak ludzkie oko widzi kolory. Plus - obraz najbliżej oryginału, kolory są maksymalnie zachowane.
   • Schemat selektywny jest podobny do poprzedniego, ale wykorzystuje głównie kolory związane z bezpieczeństwem sieci. Również tutaj nacisk kładziony jest na wyświetlanie odcieni zbliżonych do oryginalnych.
   • Adaptacyjny . W tym przypadku tabela jest tworzona z kolorów najczęściej występujących na obrazie.
   • Ograniczony . Składa się z 77 kolorów, z których niektóre są zastępowane białymi w postaci kropek (ziarna).
   • Niestandardowy . Po wybraniu tego schematu można utworzyć własną paletę.
   • Czarno-biały . W tej tabeli używane są tylko dwa kolory (czarny i biały), również z wykorzystaniem ziarnistości.
   • W gradacjach szarości . Tutaj stosuje się 84 poziomy odcieni szarości.
   • MacOS i Windows . Dane tabeli są zestawiane na podstawie cech wyświetlania obrazów w przeglądarkach pod kontrolą tych systemów operacyjnych.

   Oto kilka przykładów schematów aplikacji.

   Jak widać, pierwsze trzy próbki mają całkiem akceptowalną jakość. Pomimo tego, że wizualnie prawie się nie różnią od siebie, na różnych obrazach schematy te będą działać inaczej.

2. Maksymalna liczba kolorów w tabeli kolorów.

   Liczba odcieni obrazu wpływa bezpośrednio na jego wagę i odpowiednio prędkość pobierania w przeglądarce. Najczęstszą wartością jest 128 , ponieważ ustawienie to prawie nie ma wpływu na jakość, przy jednoczesnym zmniejszeniu masy gipsu.

3. Kolory internetowe. To ustawienie ustawia tolerancję, z którą odcienie są konwertowane na równoważne z bezpiecznej palety internetowej. Waga pliku jest określona przez wartość ustawioną przez suwak: wartość jest wyższa - plik jest mniejszy. Podczas ustawiania kolorów internetowych nie należy zapominać o jakości.

   Przykład:

4. Dithering pozwala wygładzać przejścia między kolorami poprzez mieszanie odcieni zawartych w wybranej tabeli indeksów.

   Ponadto, strojenie pomoże, w miarę możliwości, zachować gradienty i integralność monochromatycznych łatek. Podczas korzystania z ditheringu wzrasta waga pliku.

   Przykład:

5. Przejrzystość. Format GIF obsługuje tylko absolutnie przezroczyste lub całkowicie nieprzezroczyste piksele.

   Ten parametr, bez dodatkowej regulacji, słabo wyświetla zakrzywione linie, pozostawiając drabinkę pikseli.

   Korekta nosi nazwę "Matt" (w niektórych wydaniach "Kayma" ). Dzięki niemu możesz dostosować mieszanie pikseli obrazu z tłem strony, na której się on znajduje. Aby uzyskać najlepszy obraz, wybierz kolor pasujący do koloru tła witryny.

6. Z przeplotem. Jeden z najbardziej przydatnych w ustawieniach internetowych. W przypadku, gdy plik ma znaczną wagę, umożliwia natychmiastowe wyświetlenie obrazu na stronie, poprawiając jakość podczas ładowania.

7. Konwersja sRGB pomaga zachować maksymalne oryginalne kolory obrazów podczas zapisywania.

Ustawienie "Dithering transparency" znacząco obniża jakość obrazu, a my porozmawiamy o parametrze "Loss" w praktycznej części lekcji.

Aby najlepiej zrozumieć proces ustawiania oszczędzania w programie Photoshop, musisz ćwiczyć.

Ćwicz

Celem optymalizacji obrazu w Internecie jest maksymalizacja wagi pliku przy zachowaniu jego jakości.

1. Po przetworzeniu obrazu, przejdź do menu "Plik - Zapisz dla Internetu" .
2. Ustawiamy tryb widoku na "4 opcje" .

3. Następnie potrzebujesz jednej z opcji, która najbardziej przypomina oryginał. Niech to będzie obraz z prawej strony źródła. Odbywa się to w celu oceny rozmiaru pliku przy maksymalnej jakości.

   Ustawienia parametrów są następujące:

   • Schemat kolorów to "Selektywny" .
   • "Kolory" - 265.
   • "Dizing" - "Random" , 100%.
   • Usuwamy daw przed parametrem "Z przeplotem" , ponieważ końcowa objętość obrazu będzie raczej niewielka.
   • "Kolory internetowe" i "Straty" wynoszą zero.

   Porównaj wynik z oryginałem. W dolnej części przykładowego okna widzimy aktualny rozmiar gipsu i jego prędkość pobierania z określoną prędkością Internetu.

4. Przejdź do poniższego obrazu po prostu skonfiguruj. Spróbujmy ją zoptymalizować.
   • Pozostawiamy schemat bez zmian.
   • Liczba kolorów jest zmniejszona do 128.
   • Wartość "Ditheringu" zmniejsza się do 90%.
   • Kolory internetowe nie dotykają się, ponieważ w tym przypadku nie pomagają nam zachować jakości.

   Wielkość hypha spadła z 36,59 KB do 26,85 KB.

5. Ponieważ zdjęcie zawiera już ziarnistość i małe wady, postaramy się zwiększyć "Straty" . Ten parametr określa dopuszczalny poziom utraty danych podczas kompresji GIF . Zmień wartość na 8.

   Udało nam się zmniejszyć rozmiar pliku, tracąc trochę na jakości. Gifka waży teraz 25,9 kilobajtów.

   W sumie udało nam się zmniejszyć rozmiar obrazu o około 10 KB, czyli o ponad 30%. Bardzo dobry wynik.

6. Dalsze działania są bardzo proste. Kliknij przycisk "Zapisz" .

   Wybierz miejsce do zapisania, podaj nazwę strzępka i ponownie kliknij " Zapisz" .

   Zauważ, że możliwe jest utworzenie dokumentu HTML razem z GIF-em , w którym nasz obraz zostanie osadzony. Aby to zrobić, najlepiej wybrać pusty folder.

   W rezultacie otrzymujemy stronę i folder z obrazem.

Wskazówka: podczas przypisywania nazwy pliku nie należy używać znaków cyrylicy, ponieważ nie wszystkie przeglądarki są w stanie je odczytać.

W tej lekcji na temat zapisywania obrazu w formacie GIF jest zakończona. Na nim dowiedzieliśmy się, jak zoptymalizować plik do opublikowania w Internecie.

• ← Praktyczne zastosowanie odwracających masek w Photoshopie
• Zmniejsz talię w Photoshopie →