Навигация по сайту

Популярные статьи

Увлекательный поход по Крыму

Мы предлагаем вам увлекательный поход по живописным местам горного Крыма, полюбоваться красотами каньонов и горных водопадов, послушать журчание горных рек и пение птиц, насладиться экзотическими пейзажами

Отдых в Карпатах

Активный отдых - это очень важная часть жизни абсолютно любого человека, который способен обогащать и закалять человека как напрямую физически, улучшая форму, так и духовно, психологически, морально,

Jak zoptymalizować grafikę do Internetu w programie Illustrator. Strona internetowa poligrafu i webmastera Siergieja

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)

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

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