Jak zoptymalizować obraz witryny w Photoshopie. Strona internetowa poligrafu i webmastera Siergieja

Jesteś w sekcji „Artykuły dotyczące projektowania stron internetowych”

Przede wszystkim zdefiniujmy, czym jest optymalizacja? Optymalizacja jest procesem, w którym pewna informacja jest usuwana z pliku, dzięki czemu rozmiar pliku jest znacznie zmniejszony. Nowoczesne projektowanie stron internetowych wykorzystuje trzy formaty zoptymalizowanej grafiki pikselowej - JPEG, GIF i PNG. Którego użyć? Kryterium jest dość proste - w jakim formacie plik będzie miał mniejszy rozmiar z najmniejszymi zniekształceniami wizualnymi, w które powinien zostać przekonwertowany. W przypadku zdjęć pełnokolorowych i fotograficznych należy używać JPEG, a dla prostych, zwłaszcza w przypadku dużych obszarów wypełnień monofonicznych, lepiej jest użyć GIF. Format PNG-8 jest lepszy niż GIF radzi sobie z optymalizacją dużych i średnich obrazów. Funkcje te są wyjaśnione przez różne algorytmy optymalizacji w różnych formatach.

Graphics Interchange Format (GIF) zapisuje obraz przy użyciu palety zindeksowanych kolorów - do 256. Innymi słowy, GIF wykorzystuje optymalizację poprzez zmniejszenie liczby kolorów - będzie reprezentować dowolny obraz w kolorach wybranych z 16 milionów, ale liczba może wynosić od 2 do 256. Oczywiście nie każdy obraz można „bez problemu” wycisnąć w 256 kolorach. Stąd wniosek - użyj formatu dla kilku kolorów obrazów z ostrymi granicami między kolorami. Format GIF obsługuje przezroczystość i wykorzystuje kompresję bez utraty informacji.

Format JPEG (Joint Photographic Experts Group) jest odpowiedni do przechowywania pełnokolorowych obrazów o głębi kolorów 24 bpp (TrueColor) i wykorzystuje kompresję z utratą informacji. Przezroczystość nie jest obsługiwana przez ten format, a przy wysokim stopniu kompresji pojawiają się różne artefakty (zniekształcenia, obce punkty itp.).

PNG (Portable Network Graphics) to najnowszy format, zaprojektowany w celu zastąpienia przestarzałego i prostszego formatu GIF. Istnieją 2 typy formatów. PNG-8 - wykorzystujący kolory indeksowane i obsługujący przezroczystość gradientową. Wykorzystuje kompresję bezstratną i zasługuje na szczególną uwagę. PNG-24 służy do przechowywania pełnokolorowych obrazów. Współczynnik kompresji PNG24 jest mniejszy niż w przypadku JPEG, ale wykorzystuje bezstratny algorytm kompresji. W projektowaniu stron internetowych PNG-24 prawie nigdy nie jest używany.

W programie Adobe Photoshop okno optymalizacji Zapisz dla Internetu i urządzeń jest wywoływane za pomocą kombinacji klawiszy (Alt + Ctrl + Shift + S) lub w menu Plik> Zapisz dla Internetu i urządzeń. Po prawej stronie okna znajduje się panel z ustawieniami, który w zależności od wybranego formatu przybiera inny wygląd. Na rysunku pokazano wygląd panelu po wybraniu GIF.

Zoptymalizowany format pliku (wybór formatu)

Algorytm redukcji kolorów

Algorytm ditheringu

Przejrzystość

Z przeplotem (z przeplotem)

Algorytm redukcji koloru - algorytm redukcji koloru (inaczej nazywany paletą) określa, w jaki sposób program Photoshop utworzy indeks z obrazu w pełnym kolorze. Spośród wszystkich opcji, które nas interesują, to:
Percepcyjne (paleta percepcji) - biorąc pod uwagę wrażliwość i percepcję ludzkiego oka;
Selektywna (paleta selektywna) - podobna do pierwszej, ale z preferencją dla kolorów palety internetowej (domyślnie przyjęta, zachowuje swoje oryginalne kolory dość dokładnie);
Adaptive (Adaptive Palette) - utworzy tabelę kolorów kolorów najczęściej spotykanych na oryginalnym obrazie;
Restrictive (Web-palette) - konwertuje obraz do standardowej tabeli z 216 kolorami bezpiecznymi dla sieci.
Niestandardowy (niestandardowy) - tworzy paletę kolorów wybranych przez użytkownika.

Algorytm ditheringu - algorytm miksowania pikseli (zwany także ditheringiem, rozpraszaniem, imitacją) pozwoli ci wybrać sposób symulowania dodatkowych kolorów poprzez mieszanie istniejących pikseli. Dostępne są następujące opcje: Brak ditheringu - bez mieszania, Diffusion - diffuse algorithm, Pattern - algorytm oparty na określonym wzorze i Noise - algorytm oparty na szumie. Podczas optymalizacji zawsze powinieneś wypróbować wszystkie opcje. Włączenie tej opcji zwiększa rozmiar pliku. Silnik Dither powiązany z listą dostosowuje intensywność mieszania.

Przejrzystość - uwzględnienie przejrzystości, jest brana pod uwagę tutaj .

Z przeplotem - skanowanie z przeplotem. Zapewnia stopniową poprawę (rysowanie) obrazu podczas procesu ładowania.

Optymalizacja sprowadza się do wyboru odpowiedniego algorytmu redukcji koloru lub, jak mówią, wyboru palety i liczby kolorów. Algorytm jest wybierany w algorytmie Redukcja kolorów , a kolory na liście rozwijanej Kolory . Wśród wszystkich palet adaptacyjny jest uważany za najkorzystniejszy. Liczba kolorów powinna zaczynać się od 256 i stopniowo zmniejszać zmiany kontrolne obrazu. Z reguły liczba kolorów jest wybierana z zakresu: 2, 4, 8, 16, 32, 64, 128, 256.
Pomimo faktu, że GIF obsługuje kompresję bezstratną, Photoshop pozwala ustawić stratę w tym formacie. Mówiąc najprościej, silnik Lossy może jeszcze bardziej skompresować plik, zmniejszając jego rozmiar.

Optymalizacja formatu PNG-8 nie różni się od GIF (w formacie zoptymalizowanym wybierz PNG8). Jak już wspomniano, PNG8 powinien być używany do przechowywania dużych obrazów - w tym przypadku będzie przewaga nad JPEG i GIF.

Teraz w formacie JPEG.

Zoptymalizowany format pliku (wybór formatu)

Jakość kompresji

Postępowy

Tutaj wszystko jest nieco prostsze. Jakość kompresji ( jakość kompresji) - menu rozwijane z przygotowanymi wartościami jakości obrazu:
Niski - niski
Średnia - średnia
Wysoka - wysoka
Maksimum - maksimum.
Zgodnie z wyborem wartość pola Jakość będzie się zmieniać od 0 (najniższa) do 100 (najwyższa). Sprawniej, jakość można regulować bezpośrednio w samym polu lub w silniku, który pojawia się pod nim. W polu Rozmycie ustawiany jest poziom rozmycia obrazu. Włączenie flagi Progressive sprawi, że ładowanie obrazu będzie wygodniejsze dla percepcji - obraz zostanie wyświetlony przed pełnym pobraniem. Zwiększy to rozmiar pliku.

Pozostaje dodać, że możesz wybrać gotowe ustawienia dla każdego formatu z menu rozwijanego Preset. Naciśnięcie klawisza Alt zmieni ponownie przyciski menu (na rysunku). Reset zresetuje wszystkie ustawienia i Pamiętaj - aby zapamiętać.

Po lewej górnej stronie znajdują się cztery zakładki ułatwiające proces optymalizacji.

Zakładka Oryginał pozwoli, jak sama nazwa wskazuje, wyświetlić oryginalny obraz, Zoptymalizowany - wersja zoptymalizowana. Karty 2-Up i 4-Up mają odpowiednio opcje wyświetlania dwóch i czterech bloków, gdzie będą oryginalne i zoptymalizowane wersje. A dla każdej opcji możesz zastosować różne ustawienia.

Wymagane odniesienie do artykułu w przedruku.