- Optymalizacja obrazu w Internecie Podczas przygotowywania obrazów do publikacji w Internecie lub...
- Optymalizuj obrazy GIF i PNG-8
- Rys.1. Sekwencja tworzenia obrazu z przezroczystością
Optymalizacja obrazu w Internecie
Podczas przygotowywania obrazów do publikacji w Internecie lub wysyłania pocztą e-mail wymagane jest zapewnienie wymaganej jakości w każdym konkretnym przypadku przy minimalnym rozmiarze pliku. Aby spełnić ten warunek, oryginalny obraz musi zostać zoptymalizowany. Jeśli chcesz uzyskać najlepszy wynik, nie ma alternatywy dla Photoshopa . Ponadto najlepszy program do tworzenia stron internetowych Adobe Dreamweaver CS3 jest w pełni zintegrowany z Photoshopem , ponieważ przypominam, że firma Adobe nabyte w 2005 r. firma Macromedia , twórca programu Dreamweaver .
Praca nad optymalizacją obrazu jest podzielona na dwa etapy: przygotowanie obrazu w edytorze i proces kompresji. Opisy optymalizacji zwykle zaczynają się od razu za pomocą polecenia Zapisz dla Internetu lub przełączają się na Image Ready , a wcześniejsze przygotowanie nie jest należycie uwzględniane. Domyślnie obraz jest uważany za już edytowany, czyli przygotowany do drukowania. Tymczasem optymalizacja sieci jest bardzo różna od przygotowania do druku. Ponadto zdolność edytora do zmiany parametrów obrazu jest znacznie szersza niż w przypadku opcji Image Ready , a praca w edytorze jest wygodniejsza. Dotyczy to oczywiście tylko procesu przygotowania do kompresji, a nie specjalnych funkcji Image Ready for the Web: tworzenia mapy obrazu, animacji GIF i samego procesu kompresji.
Otworzyłeś obraz w programie Adobe Photoshop i wykonałeś niezbędne operacje korekcji poziomu, balansu kolorów, nasycenia i przycinania. Operacje te są szczegółowo opisane w wielu podręcznikach i nie będziemy o nich rozmawiać. Aby nie zgubić oryginału, utwórz kopię obrazu, a my nadal będziemy z nim pracować. W tym celu wygodnie jest wybrać osobny folder, w którym będą przechowywane nasze obrazy do Internetu i wiadomości e-mail.
Zwracamy się do parametrów, które wpływają na stopień kompresji obrazu. Najpierw określimy rozmiar obrazu, klikając prawym przyciskiem myszy niebieski pasek nad obrazem i wybierając Rozmiar obrazu z menu podręcznego .
Rozdzielczość (rozdzielczość) ustawiamy standard dla sieci - 72ppi, zachowujemy proporcje (Ogranicz proporcje) Rozmiar obrazu w pikselach, pożądane jest ustawienie wymaganego minimum. Należy skupić się na najczęściej używanej rozdzielczości ekranu, która obecnie wynosi 1280x1024 (1280x800 dla szerokiego ekranu). Nie ma sensu ustawiać więcej niż ta wartość, chyba że planujesz używać przewijania, na przykład, chcąc zademonstrować wędkę do wędkowania sportowego lub odtworzyć obraz „Marszałek Budionny z kawalerią w trumnie Lenina”. Nie ma żadnego przewijania ...
Z wyjątkiem takich ekstremalnych przypadków obraz powinien być całkowicie widoczny na ekranie bez przewijania. W przypadku układu strony witryny rozmiar obrazu zależy od rozmiaru komórki tabeli i proporcjonalności tekstu i obrazu.
Podstawowa zasada dla zmiany rozmiaru, z wyjątkiem przycinania (Przytnij): staraj się nie zmieniać całkowitej liczby pikseli na obrazie bez konieczności stosowania ekstremalnej konieczności, ponieważ obniża to przejrzystość obrazu i tworzy dodatkowe zniekształcenia konturowe, co ostatecznie zwiększa rozmiar pliku podczas kompresji. Dotyczy to nie tylko optymalizacji obrazu w sieci, ale także wszelkich operacji w edytorze.
Mała uwaga: podczas fotografowania wyłącznie w celu umieszczenia zdjęcia w Internecie, bardzo pożądane jest ustawienie wymaganego rozmiaru i rozdzielczości obrazu podczas fotografowania. Niestety nie można tego zrobić we wszystkich kamerach, a jedynym sposobem jest ustawienie maksymalnej rozdzielczości podczas fotografowania, a następnie w edytorze zmniejszenie rozmiaru do wymaganych wartości.
Upadek ostrości konturów przy zmianie liczby pikseli na obrazie powoduje bardzo nieprzyjemne zjawisko: niejednoznaczność obrazu na ekranie monitora. Załóżmy, że masz doskonałą jakość zoptymalizowanego obrazu i umieściłeś go na stronie z uczuciem głębokiej satysfakcji, ale jeśli skala wyświetlania strony nie jest w 100% w przeglądarce użytkownika, wszystkie twoje wysiłki poszły na marne. Możesz to zobaczyć natychmiast: rozważ dowolne zrzuty ekranu na tej stronie, w różnych skalach wyświetlania w przeglądarce. Czy jesteś przekonany?
W przypadku różnych przeglądarek spadek ostrości różni się nieznacznie w zależności od metod interpolacji pośrednich wartości pikseli, ale to zjawisko jest bardzo zauważalne. Nawiasem mówiąc, pojawia się nawet w tak potężnym edytorze, jak Photoshop . Dlatego wszystkie operacje z ostrością są wykonywane tylko w skali 100%.
Podobny efekt występuje nawet po ustawieniu rozdzielczości niższej niż maksymalna na monitorze LCD. Obraz na monitorze składa się z tych samych pikseli, a próba odtworzenia na ekranie 1024x768 pikseli z rozdzielczością 1280x1024 doprowadzi do pogorszenia ostrości. Jeśli chcesz, możesz natychmiast sprawdzić, zmieniając rozdzielczość monitora (kliknij prawym przyciskiem myszy na Pulpit - Właściwości - Opcje - Rozdzielczość ekranu).
Jedyną pociechą jest to, że zjawisko to nie objawia się podczas drukowania strony witryny. Od rozmytego obrazu na ekranie, uzyskasz doskonałą ostrość podczas drukowania na papierze, ponieważ rozdzielczość drukarki jest wielokrotnie wyższa niż rozdzielczość monitora, a strata z powodu interpolacji pikseli jest nieznaczna.
Po ustaleniu wymiarów obrazu przystępujemy do jego przygotowania do dalszej kompresji. Wymagania dotyczące optymalizacji formatów JPEG, GIF i PNG są różne, co wiąże się z różnymi algorytmami kompresji. Aby uzyskać minimalny rozmiar skompresowanego pliku w formacie JPEG i PNG-24, należy unikać ostrych kontrastowych przejść i drobnych szczegółów, a szum na obrazie jest również drobny i dlatego szum może znacznie zwiększyć rozmiar ostatecznego obrazu. W przypadku GIF i PNG-8 gładkie przejścia gradientowe i szeroka paleta kolorów są niepożądane.
Optymalizacja obrazu JPEG i PNG-24
Aby zobaczyć, jak już się dowiedzieliśmy, ustaw skalę na 100% i przetwarzaj filtry wyostrzające.
Możesz użyć dowolnego, ale najwygodniej jest użyć filtru Maska wyostrzająca o parametrach pokazanych na rysunku, powtarzając kolejno jego efekt od trzech do pięciu razy.
Następnie stosujemy filtr rozmycia Despeckle (Filter - Noise - Despeckle) i dostosowujemy jego głębokość (Ctrl + Shift + F). Zwykle wystarcza zredukowanie rozmycia do około 50%, dzięki czemu małe szczegóły są zapisywane przy minimalnej ostrości konturów, co jest konieczne do oglądania na ekranie monitora. Pamiętaj, że przy silnym wyostrzaniu (wyostrzaniu) rozmiar skompresowanego pliku rośnie, szczególnie w przypadku dużych obrazów.
Hałasy są usuwane przez filtr Reduce Noise (Filter - Noise - Reduce Noise) lub dowolny specjalny program, na przykład Neat Image lub Noise Ninja.
Następnie przejdź do kompresji obrazu, wybierając Plik - Zapisz dla Internetu (Plik - Zapisz dla Internetu) lub Ctrl + Shift + Alt + S. Przełączenie na Gotowe do obrazu nie ma sensu, ponieważ polecenie Zapisz dla Internetu jest częścią Image Ready z tymi samymi funkcjami kompresji. Ustawiamy tryb widoku dla dwóch obrazów jednocześnie, naciskając 2-Up .
Po lewej stronie mamy oryginalny obraz, po prawej - zoptymalizowany skompresowany.
Pod skompresowanym obrazem pokazane są jego główne cechy: algorytm i parametry kompresji, rozmiar i czas pobierania w przeglądarce przy określonej prędkości połączenia internetowego. Aby wybrać interesującą Cię szybkość, kliknij obraz prawym przyciskiem myszy.
W prawym rogu są główne ustawienia kompresji. Kliknięcie strzałki w oknie Jakość powoduje wyświetlenie skali i dostosowanie poziomu kompresji za pomocą suwaka, kontrolując jakość obrazu w prawym oknie. Jeśli w wyniku kompresji, czyli „wagi” otrzymanego pliku z odpowiednią jakością, nie jesteśmy zadowoleni z tego, co jest typowe dla pytającego projektanta stron internetowych w 99% przypadków, kliknij Anuluj . Po powrocie do edytora w ten sposób powtarzamy manipulacje za pomocą Unsharp Mask, Despeckle i Reduce Noise z innymi parametrami. Należy zauważyć, że kolejność stosowania tych trzech filtrów ma taki sam wpływ na wynik. Stosując metodę „krok w tył, dwa kroki do przodu”, stopniowo osiągamy maksymalną kompresję z jakością obrazu, który nas satysfakcjonuje. Niestety, uzyskane ustawienia filtrów dla optymalizacji obrazu są unikalne dla każdego przypadku, ale różnice nie są bardzo znaczące, a po kilku eksperymentach można wyobrazić sobie wpływ każdego filtra na końcowy wynik optymalizacji obrazu.
Aby ułatwić życie, wygodnie jest przypisać klawisze skrótów do naszych trzech filtrów. Pozwól, że ci przypomnę, w tym celu musisz wybrać polecenie Edycja - Skróty klawiaturowe w Photoshopie. Następnie możesz zawsze przywołać filtr z poprzednimi ustawieniami, naciskając Ctrl + Alt + (klawisz filtra).
Jeśli chcesz, aby obraz pojawiał się stopniowo na monitorze, zaznacz pole Progressive . Czasami trochę się zwiększa, a czasami zmniejsza rozmiar pliku, ale w przypadku dużych obrazów jest to uzasadnione, ponieważ zwiększa wygodę oglądania. Lepiej nie używać parametru Blur , ponieważ jest znacznie grubszy niż Despeckle .
W palecie opcji kompresji dostępna jest specjalna funkcja dla bardzo leniwych - automatyczna optymalizacja obrazu. Aby go zaznaczyć, zaznacz pole Zoptymalizowane i kliknij przycisk z trójkątem nad nim. Z menu rozwijanego wybierz opcję Optymalizuj do rozmiaru pliku .
W wyświetlonym oknie możesz ustawić żądany rozmiar zoptymalizowanego obrazu i formatu: zdefiniowany przez Ciebie - Bieżące ustawienia lub podaj jego wybór dla programu - Auto Wybierz GIF / JPEG. Kliknij OK i uzyskaj wynik, który zadowoli tylko bardzo skromnego użytkownika. Podobnie jak prawie każda automatyzacja w Photoshopie , ta funkcja jest praktycznie niemożliwa do zastosowania, ale dla ogólnego rozwoju należy o tym wiedzieć.
Format PNG-24 łączy w sobie funkcje JPEG i GIF: obsługuje 24-bitowy kolor, zachowuje przezroczystość i bardzo dobrze nadaje półtony. Rozmiar wynikowych obrazów jest zazwyczaj większy niż w JPEG, ale są wyjątki. Dlatego warto wypróbować PNG-24 podczas optymalizacji obrazu.
Optymalizuj obrazy GIF i PNG-8
W przypadku grafiki z małą liczbą kolorów, dużymi obszarami monochromatycznymi i tekstem, takimi jak diagramy, logo, zrzuty ekranu i proste rysunki, lepiej jest użyć kompresji GIF i PNG-8. Podczas przygotowywania obrazów dla tych formatów konieczne jest dążenie do zmniejszenia liczby kolorów, braku gradientów (płynne zmiany nasycenia i odcienia kolorów) oraz krawędzi. Format PNG-8 zazwyczaj daje lepsze wyniki niż GIF. Aby wybrać format, użyj rozwijanego menu okna Preset .
Dostępne są następujące parametry regulacji: algorytm kompresji, rozmycie (roztrząsanie), przezroczystość (przezroczystość) i liczba odtwarzalnych kolorów (kolory). Ostatni parametr jest najważniejszy. Zmniejsz liczbę kolorów do akceptowalnego poziomu, a następnie eksperymentuj z algorytmem kompresji. Zwykle najlepszy wynik z minimalną ilością daje wybór Selektywny .
Następnie przejdź do regulacji wygładzania. Ta funkcja umożliwia symulowanie brakujących kolorów za pomocą kilku sąsiadujących pikseli. Zwykle używany tryb dyfuzji i dla gradientów - szum. Określona wartość rozmycia ustawiona w oknie Ditheringu za pomocą rozwijanej skali.
Podobnie jak w przypadku optymalizacji obrazu w formacie JPEG, najlepszy wynik można osiągnąć tylko ręcznie, stosując metodę kolejnych przybliżeń, uzyskując najlepszy stosunek jakości do rozmiaru pliku. Wygodne może być jednoczesne wyświetlanie czterech obrazów (przycisk 4 w górę w lewym górnym rogu): oryginał i trzy różne opcje w formatach GIF i PNG.
W formacie GIF dostępna jest funkcja Lossy , która pozwala na mniejsze wartości, aby zmniejszyć rozmiar skompresowanego pliku. Podczas regulacji konieczne jest dokładne monitorowanie jakości, która szybko pogarsza się przy wartościach stratnych powyżej 20%.
Formaty GIF i PNG pozwalają zachować przejrzystość. Pozwala to na nałożenie obrazu na tło strony. Bez przezroczystości jesteś ograniczony do prostokątnego kształtu ramki obrazu. Aby utworzyć przezroczyste obszary, należy je wybrać lub utworzyć maskę w edytorze. Na przykład w logo „Zdjęcie”, znajdującym się w prawym górnym rogu tej strony, przezroczysty obszar otacza buźkę.
Utworzono taki przezroczysty obszar w następujący sposób (rys. 1):
- Najpierw pomalowałem emotikon „Zdjęcie”;
- Narzędzie Magiczna Różdżka Narzędzia (Pędzel Magiczny) zaznaczył obszar wokół emotikonu;
- Sam emotikon został wybrany poleceniem Select - Inverse (Selection - Invert);
- Aby przenieść buźkę na osobnej warstwie, użyj polecenia Warstwa - Nowa - Warstwa przez kopiowanie (Warstwa - Nowa - Warstwa przez kopiowanie);
- Wyłączono warstwę tła w tle, klikając okno Warstwy na obrazie oka na linii. W tym przypadku tło zastępuje się „polem szachowym” - przezroczystym obszarem;
- Wybrałem Plik - Zapisz dla Internetu (Plik - Zapisz dla Internetu), format PNG-8, ustaw pole wyboru Przezroczystość i zoptymalizowałem obraz za pomocą parametrów pokazanych na rysunku.
Rys.1. Sekwencja tworzenia obrazu z przezroczystością
Oczywiście podobny wynik można uzyskać bez sztuczek z przezroczystością: wystarczy przypisać kolor tła emotikonu taki sam jak na stronie witryny. W przypadku prostych obrazów jest to całkiem odpowiednie, ale jeśli tło ma teksturę lub obraz ma być umieszczony w różnych miejscach, to bez wsparcia przezroczystości mogą pojawić się trudności.
Obrazy zoptymalizowane pod kątem sieci nie zawsze nadają się do kompresji w jednym formacie. Na przykład martwa natura lub portret zazwyczaj mają jednolite rozmyte tło, idealne do silnej kompresji, a sam obiekt do wyświetlania, do którego nadają się tylko wysokiej jakości JPEG i PNG-24. Wiele z tych mieszanych obrazów w reklamach (broszury, kalendarze, katalogi produktów), gdzie zdjęcia sąsiadują z grafiką i tekstem. W takich przypadkach optymalne jest podzielenie obrazu na fragmenty - plasterki i zoptymalizowanie każdego z nich za pomocą własnego algorytmu kompresji. Ta metoda zostanie omówiona bardziej szczegółowo później. artykuły na temat przygotowywania obrazów do Internetu. Efekt oryginalnego formatu na kompresję obrazu pokazano w artykule na temat robienie zrzutów ekranu . Na przykład, jeśli obraz został już skompresowany w formacie JPEG, jego optymalizacja jest możliwa tylko w formacie JPEG, ponieważ GIF i PNG-8 wygenerują dużą ilość skompresowanego pliku.
Można także zastosować metodę optymalizacji obrazów mieszanych. ważona optymalizacja : czyli inaczej dla różnych obszarów obrazu. Ta metoda pozwala zmniejszyć liczbę kolorów i precyzyjnie kontrolować stopień kompresji, co pozwala zmniejszyć rozmiar pliku przy zachowaniu wysokiej jakości.
W przypadku, gdy wszystkie powyższe metody optymalizacji nie są dla Ciebie odpowiednie, zawsze można podać link do pobrania wysokiej jakości obrazu o dużej objętości. Jednocześnie okazuj szacunek użytkownikowi - nie zapomnij podać rozmiaru przesłanego pliku obrazu.
2.08.2008
