Jesteś w sekcji „Artykuły dotyczące projektowania stron internetowych”
Ta strona opisuje proces optymalizacji grafiki w Internecie w programie Adobe Illustrator. Optymalizacja jest procesem, w którym pewne informacje są usuwane z pliku iw rezultacie rozmiar pliku jest znacznie zmniejszony. Projektowanie stron internetowych wykorzystuje trzy formaty zoptymalizowanej grafiki pikselowej - JPEG, GIF i PNG. Którego użyć? Oczywiście taki, w którym plik będzie zajmował mniejszy rozmiar z taką samą jakością wizualną. Uważa się, że JPEG powinien być używany do pełnokolorowych i fotorealistycznych obrazów, a dla prostoty, szczególnie w przypadku dużych obszarów monochromatycznych wypełnień, lepiej jest użyć GIF. Nieźle są skompresowane i formatują PNG-8. Cechy te wyjaśniają różne zasady optymalizacji w różnych formatach.
GIF (Graphics Interchange Format) pozwala zapisać 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 być z 2 do 256. Oczywiście nie każdy obraz może być bezboleśnie „ściśnięty” 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 - 8-bitowy, wykorzystujący kolory indeksowane i obsługujący przezroczystość gradientową. Wykorzystuje kompresję bezstratną. PNG-24 - 24-bit, używany do przechowywania pełnokolorowych obrazów. Współczynnik kompresji PNG24 jest mniejszy niż w przypadku JPEG, ale wykorzystuje bezstratny algorytm kompresji.
W programie Adobe Illustrator 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 Illustrator utworzy indeks z obrazu w pełnym kolorze. Spośród wszystkich opcji, które nas interesują, to:
Percepcyjna (paleta percepcji) - rodzaj palety adaptacyjnej, uwzględniającej wrażliwość i percepcję ludzkiego oka;
Selektywna (paleta niestandardowa) - z preferencją dla kolorów palety internetowej (domyślnie przyjmowana, zachowuje dość dokładnie oryginalne kolory);
Adaptacyjny (Adaptive Palette) - utworzy tabelę kolorów kolorów najczęściej spotykanych na oryginalnym obrazie. Jedna z najważniejszych palet;
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, ale warto. 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.
Proces optymalizacji jest ograniczony do wyboru palety i liczby kolorów. Paleta jest wybierana 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 bezstratną kompresję, Illustrator pozwala ustawić stratę w tym formacie. Użyj suwaka Lossy, aby dodatkowo 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.
Przejdź do formatu JPEG.
Zoptymalizowany format pliku (wybór formatu)
Jakość kompresji
Postępowy
Tutaj wszystko jest nieco prostsze. Jakość kompresji - rozwijana lista z przykładowymi wartościami jakości obrazu:
Niski - niski (maksymalny poziom kompresji)
Średni - średni (średni poziom kompresji)
Wysoka - wysoka (niski poziom kompresji)
Maksimum - maksimum (minimalny poziom kompresji).
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 ustawia się poziom rozmycia obrazu, w przypadku małych wartości rozmycie ukrywa drobne defekty kompresji. 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.
Którego użyć?