Сышышь ты, выходи сюда,
поговорим !

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)

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

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ć.

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.

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.

Którego użyć?