Nie jest tajemnicą, że optymalizacja grafiki witryny może znacznie przyspieszyć ładowanie i wyświetlanie strony internetowej, zwiększyć kompatybilność z innymi urządzeniami i uczynić witrynę bardziej atrakcyjną dla wyszukiwarek. Zasadniczo strony zawierają wiele ikon, grafiki w formacie png . Domyślnie standardowe motywy graficzne CMS są już zoptymalizowane , ale gdy istnieje potrzeba ulepszenia czegoś, np. Aktualizacji ikon, pojawiają się problemy.
Na popularnych stronach, takich jak www.iconsearch.ru , www.iconfinder.com i inne, ikony są w formacie PNG-24 z kanałem alfa zapewniającym przezroczystość tła . Oznacza to, że taki obraz można umieścić absolutnie na dowolnym tle, ale jego rozmiar jest ogromny - około 5 razy wyższy niż obraz zoptymalizowany.
Tak więc artykuł o tym, jak wykonać optymalizację wsadową grafiki witryny w formacie PNG i, w miarę możliwości, bez utraty jakości, zmniejsza rozmiar obrazów wyjściowych. Przede wszystkim powinieneś zdecydować, czy potrzebujesz kanału alfa , czyli przezroczystości ikony. Faktem jest, że przezroczystość dodaje dodatkowe kilobajty do obrazu. W rozważanym przykładzie przyjmiemy, że tło głównego obszaru witryny zawierającego ikony jest białe .
Oto foldery zawierające obrazy do optymalizacji.
Foldery źródłowe z ikonami
Otwórz program o nazwie Photoshop . Naciśnij Alt + F9 - otworzy się okno „Operacje” . Utwórz nową operację o nazwie „Ikony” .
Utwórz nową operację w Photoshopie
Następnie rozpocznie się rejestracja operacji, która będzie używana do przetwarzania wsadowego. Otwórz dowolny obraz testowy, który można „sparaliżować”. Następnie przejdź do menu Obraz -> Rozmiar obrazu . Zmień rozmiar, aby wskazać ostateczny rozmiar piksela. Jeśli ta operacja nie jest wymagana, pomiń ten krok.
Następnie wybieramy główny kolor , który będzie tłem naszej ikony (na samym dole paska narzędzi po lewej stronie). W naszym przypadku jest biały . Następnie przejdź do menu Obraz -> Tryb -> Kolory indeksowane . W otwartym oknie określ następujące parametry:
Paleta - lokalna (selektywna),
Kolory - tutaj podajemy liczbę 256. Jest to liczba kolorów użytych w obrazie i ten parametr określa, jak bardzo obraz zostanie zmniejszony. Polecam umieścić wartość 128. Jeśli ikona nie zawiera wielu kolorów, możesz umieścić mniej;
Wymuszony - nie pokazuj;
Przezroczystość - odznacz;
Substrate - Primary color (będzie to tło ikony);
Dithering - losowy, 75%.
Photoshop. Kolory indeksowane.
Kliknij OK, zapisz plik, a następnie zatrzymaj nagrywanie operacji w oknie Operacje. Następnie przejdź do menu Plik -> Automatyzacja -> Przetwarzanie wsadowe . Wybierz operację, którą stworzyliśmy, a także określ ścieżkę do folderu z naszymi ikonami. Pola wyboru ujawniają się jak na poniższym obrazku:
Photoshop. Przetwarzanie wsadowe.
Po zakończeniu operacji rozmiar ikon nie ulegnie zmianie - nie martw się ! Obrazy są już zoptymalizowane: „odcinamy” niepotrzebne kolory , usuwamy kanał alfa , ale obrazy nadal zawierają wiele pustych bajtów , które nie zawierają przydatnych informacji. Musimy je usunąć. Do tego jest bardzo dobry program, którego ledwo znalazłem. Jest to jedyna funkcjonalna i najprostsza w użyciu aplikacja, która może oczyścić obraz PNG z „śmieci” , pozostawiając tylko te bajty, które zawierają informacje. W ten sposób nie szkodzi jakości obrazu - już go naprawiliśmy i ograniczyliśmy w Photoshopie.
Program nosi nazwę PngOptimizer . Idź do strony http://psydk.org/PngOptimizer.php i pobierz archiwum ZIP z programem (jest bezpłatne). Z niego potrzebujemy tylko małego pliku o nazwie PngOptimizer.exe . Umieściliśmy dla nas wygodne miejsce, uruchom program i po prostu przeciągnij i upuść wszystkie foldery z ikonami . Program zapisze wszystkie pliki, pozostawiając je w tych samych miejscach, w których się znajdują:
Optymalizacja PNG z PngOptimizer
Proces zajmie trochę czasu i będziesz zadowolony z wyniku. Teraz musimy usunąć wszystkie kopie zapasowe (kopie zapasowe) pozostawione przez program. Zaczynają się od znaku podkreślenia . Przejdź do folderu, w którym znajduje się folder z ikonami i przejdź do wyszukiwania „ _ *. Png ”. Explorer znajdzie wszystkie pliki z rozszerzeniem PNG, które zaczynają się od podkreślenia. Wybierz je wszystkie i usuń je .
Wszystko Teraz ikony są gotowe do załadowania na serwer!
