Optymalizacja i kompresja png, jpg, jpeg bez utraty jakości

Po co optymalizować obrazy

W obecnym wieku technologii mobilnych, optymalizacji obrazów PNG i JPG, JPEG stał się ponownie ważny, ponieważ był istotny w czasach, gdy Internet właśnie wchodził w nasze życie i wszędzie był powolny i dial-up. Internet mobilny, oczywiście, nie jest całkowicie poprawny w porównaniu z dial-up, ale w niektórych miejscach, gdzie połączenie jest słabe, szybkość dostępu jest raczej mała. W tamtych czasach użytkownik nie miał dokąd pójść i musiał czekać na załadowanie strony. Teraz Internet się powiększył, wybór witryn jest duży. Użytkownik stał się kapryśny i niecierpliwy, a średni czas oczekiwania na załadowanie strony znacznie się zmniejszył. Użytkownikowi łatwiej jest znaleźć inną, bardziej zwinną stronę.
A poszukiwani giganci, tacy jak Google czy Yandex, zaczęli zwracać uwagę na szybkość ładowania stron internetowych, dając pierwszeństwo temu, że jest szybszy. Nie ostatnią rolę odgrywa tu waga strony, która z kolei silnie zależy od wagi znajdujących się na niej obrazów. Jest całkiem oczywiste, że posiadanie kompaktowych, skompresowanych obrazów jest korzystne dla wszystkich. Więc tutaj chcę porozmawiać o tym, jak przygotować pliki PNG i JPG, pliki JPEG do przesyłania na hosting.

Podstawowa optymalizacja obrazu

Oznacza to przycinanie niepotrzebnych pól, zmniejszanie głębi kolorów, usuwanie komentarzy i zapisywanie obrazu w odpowiednim formacie. Aby to zrobić, możesz użyć programu Adobe Photoshop lub, jeśli go nie masz, MS Paint lub GIMP.
Nawet podstawowe kadrowanie obrazu całkiem dobrze zmniejszy jego wagę.

Jak zmniejszyć obraz w MS Paint

Pokażę na przykładzie MS Paint, jak zmniejszyć obraz do żądanego rozmiaru.
Weźmy na przykład logo NGINX i jego obraz nginx.png, który ma rozmiar 2000 × 417 pikseli, który należy przyciąć do szerokości do 1024, ponieważ jest to szerokość układu strony i nie ma już sensu.

1. Otwórz farbę (Start-Run-Enter „mspaint”)

   Jak otworzyć MS Paint

2. Ładujemy nginx.png, znajdujemy „Resize”, okno otwiera się z procentami i pikselami, w nim przechodzimy do pikseli i ustawiamy żądany rozmiar, w naszym przypadku prowadzimy 1024 szerokości

   Jak zmniejszyć rozmiar obrazu w MS Paint

Na wyjściu otrzymujemy obraz, który przeszedł minimalną optymalizację podstawową. Nadszedł czas, aby skompresować jego wagę.

File Optimizer dla PNG i JPG, kompresja JPEG

Najłatwiejszym i najszybszym sposobem osiągnięcia optymalnej kompresji obrazu bez utraty jakości jest użycie programu File Optimizer.

Oficjalna strona i opis programu : http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

Pobierz Optymalizator plików, z którym możesz Sourceforge.net

Opis Jest to skuteczny optymalizator nie tylko dla obrazów, ale także dla plików .pdf, .docx, txt i innych plików tekstowych, audio i wideo, a także archiwów. Pełna lista obsługiwanych rozszerzeń znajduje się na oficjalnej stronie projektu.
Oto niektóre z narzędzi wykorzystywanych w pracach: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, gifsicle, Ghostscript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress . Myślę, że nawet ta niepełna lista jest imponująca.

Instalowanie i używanie Optymalizatora plików

Najpierw pobierz najnowszą wersję programu jako instalator lub archiwum z plikami. Nawiasem mówiąc, archiwum ma wersję dla 32-bitowych i 64-bitowych wersji systemu Windows.

Optymalizator plików w archiwum

Interfejs jest dość prosty i intuicyjny.
Nie trzeba konfigurować, ale możesz dostosować niektóre formaty za pomocą przycisku Opcje ...
Użyj Możesz przeciągnąć niezbędne pliki, a nawet foldery (katalogi) do okna programu, lub wybrać te niezbędne za pomocą menu Dodaj pliki ...
Optymalizuj wszystkie pliki, aby zoptymalizować pliki.

Interfejs optymalizatora plików

Zoptymalizowane pliki zastąpią źródło, hierarchia kategorii również zostanie zachowana. Statystyki będą wyświetlane przed każdym plikiem, jak bardzo zoptymalizowana wersja waży jako procent pierwotnego rozmiaru pliku.
Po zakończeniu pracy w linii statusu będą wyświetlane statystyki dotyczące liczby przetworzonych plików, a także ile można było zapisać.

Moim zdaniem File Optimizer działa bardzo dobrze.
Jedynym minusem, jeśli lista plików jest duża, możesz długo czekać na wyniki, ale warto.

Jeśli interesują Cię szczegóły metod optymalizacji, które można dostosować na swój sposób, porozmawiamy o konfiguracji i użyciu narzędzi do kompresji obrazu.

Kompresja PNG bez utraty jakości

Rozważ 3 programy do optymalizacji PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Porównajmy je w jakości kompresji obrazu. Kompresujemy nginx.png z poprzedniej sekcji. Pierwotna waga wynosi 27,5 KB.

PNG przed kompresją

Kompresja PNG za pomocą Adobe Photoshop

Pierwszy na liście to znany Photoshop. Wielofunkcyjny zestaw dla projektanta, który wie prawie wszystko, w tym kompresowanie obrazów.
W Photoshopie otwórz File-Save for Web lub użyj kombinacji Alt + Shift + Ctrl + S

Kompresuj PNG w programie Adobe Photoshop

Wynik wynosi 22,7 KB, tj. skompresowany o 17,5%

PNG po kompresji w Adobe Photoshop

Niestety, większość programów graficznych nie jest w stanie uwolnić pełnego potencjału algorytmów używanych do kompresji PNG. Głównym powodem jest to, że używają algorytmów heurystycznych do określenia optymalnej strategii kompresji, która pozwala nam oszacować wydajność różnych parametrów bez wykonywania kompresji, co w rezultacie daje duży procent błędów. Dlatego używamy specjalnie stworzonych narzędzi do kompresji PNG, a mianowicie OptiPNG i PNGOUT.

Używanie OptiPNG do kompresji PNG

OptiPNG to program zaprojektowany specjalnie do kompresji obrazów PNG. Pobierz go tutaj. http://optipng.sourceforge.net/ .

Polecam pobrać i zainstalować Daleki kierownik . Następnie będzie nam to przydatne

Jak zainstalować i używać OptiPNG

Pobrano .exe, załadowano do C: Windows, wziąłem niezbędny plik PNG, umieściłem go w jakimś folderze. Teraz, używając FAR Managera lub innego menedżera plików z obsługą konsoli, poszliśmy do tego folderu i wpisaliśmy polecenie do konsoli.

optipng -o7 nginx.png

Polecenie wymusza kompresję PNG w folderze. Później rozważymy prostą opcję kompresji za pomocą jednego kliknięcia.
Ale najpierw spójrz na wynik.

Kompresuj PNG za pomocą OptiPNG

18,8 Kb, tj. skompresowany o 31,6%, prawie jedna trzecia. Bardzo źle, prawda? Photoshop okazał się znacznie gorszy.

Używanie PNGOUT do kompresji PNG

PNGOUT to narzędzie, podobnie jak poprzednie, stworzone do kompresji PNG. Pobierz go tutaj. http://www.advsys.net/ken/utils.htm .

Jak zainstalować i używać PNGOUT

Wszystko jest dokładnie takie samo jak w przypadku OptiPNG. Pobierz PNGOUT.exe, prześlij go do C: Windows, otwórz menedżer plików w menedżerze plików, na przykład Far Manager, i napisz do wiersza poleceń

pngout nginx.png

Wynik poniżej

PNG po kompresji w PNGOUT

Wynik wynosi 23,4 Kb, tj. udało się skompresować o 15%. Nieźle.

Ogólnie rzecz biorąc, powiem od razu, że miałem różne wyniki z różnymi plikami, gdzieś PNGOUT działał wydajniej, gdzieś OptiPNG, dlatego radzę uruchamiać obrazy pojedynczo za pomocą obu narzędzi.

Jak szybko skompresować PNG w OptiPNG i PNGOUT

Utwórz plik png.reg i zapisz tam dane do rejestru

Edytor rejestru systemu Windows w wersji 5.00 [HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder OspPNG] @ = „Uruchom OptiPNG na folderze” [HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder OspPNG Komenda] @ = "cmd.exe / c „TITLE Uruchamianie OptiPNG na% 1 && FOR / r”% 1 „%% f IN (* .png) DO optipng -o7„ %% f ”„ ”[HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder PNGOUT] @ = "Uruchom PNGOUT na folderze" [HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder komenda PNGOUT komenda] @ = "cmd.exe / c" TYTUŁ Uruchamianie PNGOUT na% 1 && FOR / r „%% f IN (* .png) DO pngout„ %% f ”

Następnie uruchom ten plik i zapisz dane w rejestrze systemu Windows.
Teraz, gdy klikniesz folder z plikami PNG, które muszą być skompresowane, wybierzesz potrzebne polecenia, kompresja nastąpi automatycznie i dla wszystkich obrazów naraz.

Aby usunąć wszystko z menu kontekstowego, zapisz następujący kod w png.reg i uruchom go.

Edytor rejestru systemu Windows w wersji 5.00 -HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder komenda PNGOUT komenda]

Kompresja JPG, JPEG bez utraty jakości

Aby zoptymalizować JPG, JPEG, analogicznie do PNG, istnieją jego własne narzędzia: jpegtran i jpegoptim. Oczywiście możesz używać Photoshopa, ale w przypadku kompresji JPG, JPEG zdecydowanie polecam ich używanie.

Jak zainstalować, skonfigurować i używać jpegtran

jpegtran to potężne narzędzie, które umożliwia wykonywanie prostych kompresji JPG bez utraty jakości i kompresji z pewnym poziomem wygładzania, a nawet konwersji do Progressive JPEG.
Pobierz jpegtran tutaj http://jpegclub.org/jpegtran/ (wyszukaj i pobierz jpegtran.exe).

Jak kompresować jpg, jpeg używając jpegtran

Wlej jpegtran.exe w C: Windows
Następnie otwórz folder z żądanym JPEG w Far Manager i wprowadź w konsoli

jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Podstawowa optymalizacja 1.jpg # -copy none usuwa metadane z JPG # -optimize optymalizuje obraz

Progressive JPG, JPEG

Jest to typ JPG, który podczas ładowania strony pokazuje najpierw ogólne zarysy, a następnie ładuje i maksymalizuje jakość obrazu. Bardzo wygodne dla powolnego mobilnego Internetu i dlatego musi być używane.

jpegtran -progressive -outfile 1.jpg 1.jpg # Przekształca format 1.jpg na Progressive

Jak sprawdzić, czy obraz jest progresywny w formacie JPEG

Użyj http://highloadtools.com/progressivejpeg

Zaawansowane funkcje Jpegtran

Oto wszystkie możliwe zastosowania jpegtran

jpegtran --help użycie: jpegtran [przełączniki] plik_wyjściowy plik wyjściowy Przełączniki (nazwy mogą być skracane): -copy brak Kopiuj bez dodatkowych znaczników -optymalizacja-optymalizacja Tabela Huffmana (mniejszy plik, ale powolna kompresja) -progresywne Tworzenie progresywnego pliku JPEG Przełączniki do modyfikacji obrazu: -crop WxH + X + Y Przytnij do prostokątnego podobszaru -flip [poziomy w pionie] Obraz lustrzany (lewy-prawy lub górny- bottom) -grayscale (pomiń dane koloru) -perfect Niepowodzenie, jeśli nie można przekształcić bloków krawędzi - obróć [90 | 180 | 270] Obróć obraz (stopnie zgodnie z ruchem wskazówek zegara) -skaluj M / N Skaluj obraz wyjściowy o ułamek M / N, np. 1/8 -transpose Obraz transpozycji -przezroczysty Poprzeczny transpozycja obrazu -trim Upuść nie transformowane bloki krawędzi - przeciągnij WxH + X + Y Wipe (szare), użyj kodowania arytmetycznego - uruchom ponownie N ustaw czas interwału restartu w wierszach z lub -maxmemory N Maksymalna pamięć do użycia (w kilobajtach) -out nazwa pliku Określa nazwę pliku wyjściowego -vale lub -debug Emituj wynik debugowania Przełącza dla kreatorów: -scans plik Utwórz wieloskanowy plik JPEG na plik skryptu

Jak szybko na komputerze kompresować JPEG za pomocą jpegtran w systemie Windows

Kompresja za pomocą menu kontekstowego jest niemożliwa ze względu na specyfikę narzędzia, jednak można dostosować kompresję wielu plików JPEG na komputerze naraz.
Aby to zrobić, musimy utworzyć plik z rozszerzeniem .bat ( Daleki kierownik pomóc) i tam pisać

cd / d. for %% j in (* .jpg) do call: sheensay "%% ~ nxj" "%% ~ nj.jpg" goto: eof: sheensay jpegtran -copy none -optimize -progressive "% ~ 1" "% ~ 2 „

Następnie umieść ten plik w folderze z JPEG i uruchom. Plik wsadowy przygotuje zoptymalizowane obrazy, które będą gotowe do użycia.

Jak zainstalować, skonfigurować i używać jpegoptim

Pobierz wersję systemu Windows tutaj. http://sourceforge.net/projects/jpegoptim/ .

Jak kompresować jpg, jpeg używając jpegoptim

Wypełnij jpegoptim.exe w C: Windows. Następnie otwórz folder ze zdjęciami JPG za pomocą Far Managera i wejdź do konsoli

jpegoptim * .jpg --strip-all - wszystkie progresywne

Jak zoptymalizować wiele plików jpg, jpeg jednocześnie za pomocą jpegoptim

W przeciwieństwie do jpegtran, narzędzie jpegoptim całkiem zadziwiająco pozwala na pracę z nim z menu kontekstowego.
Utwórz plik jpegoptim.reg, na przykład, używając Far Managera i napisz tam

Edytor rejestru systemu Windows wersja 5.00 [HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy folder powłoka jegegoptim] @ = "Uruchom jpegoptim na folderze" [HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy folder powłoka jegegoptim polecenie] @ = "cmd.exe / c "TYTUŁ Uruchamianie jpegoptim na% 1 && FOR / r"% 1 "%% f IN (* .jpg) DO jpegoptim * .jpg --strip-all --all-progressive" %% f " „

Uruchomiono, wprowadzono dane w rejestrze. Teraz możesz kompresować wiele plików JPEG za pomocą menu kontekstowego, po prostu dodaj niezbędne obrazy do jednego folderu, kliknij prawym przyciskiem myszy i uruchom jpegoptim w folderze.

Jak kompresować jpg za pomocą jpegoptim

Jeśli chcesz usunąć jpegoptim z rejestru i menu kontekstowego, napisz jpegoptim.reg

Edytor rejestru systemu Windows w wersji 5.00 [-HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder komenda jpegoptim] [-HKEY_LOCAL_MACHINE OPROGRAMOWANIE Klasy Folder komenda jpegoptim komenda]

Zapisz, uruchom, wprowadź zmiany w rejestrze.

Jak dobrze jpegtran i jpegoptim kompresują jpg, jpeg

Przechodzimy do testów. Weźmy na przykład plik caching.jpg. W oryginale waży 29,5 Kb

Oryginalny jpeg

Testy jakości kompresji Jpegtran jpg, jpeg

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

JPG Optymalizacja z jpegtran

Wydajność wyniosła 29,1 KB, zapisano kompresję 1,36%

Testy jakości kompresji Jpegoptim jpg, jpeg

jpegoptim caching.jpg --strip-all

JPG Optymalizacja z jpegoptim

W Eksploratorze Windows nie jest to widoczne, kompresja wynosi kilkaset bajtów.

Cóż, plik źródłowy był dobrze przygotowany, więc kompresja nie dała widocznego efektu, ale gdy przetwarzasz niezoptymalizowane obrazy, czasami zastanawiasz się, jak dobrze możesz zaoszczędzić pieniądze.

Jak skonfigurować kompresję png i jpg, jpeg na komputerze

Jeśli przeczytałeś tę sekcję przedtem, ale nadal nie jesteś zadowolony z proponowanych opcji, sugeruję, abyś sam zbudował przenośny kombajn - usługę kompresji obrazów, zdjęć, obrazów, która będzie działać tak, jak potrzebujesz bezpośrednio na pulpicie.

Najpierw musisz zainstalować jpegtran , jpegoptim , optipng , pngout
Instrukcje instalacji znajdują się powyżej.

W tym celu musimy poprawnie zbudować architekturę folderów. Załóżmy, że masz zagnieżdżony folder obrazów z własną hierarchią folderów PNG i JPG, którą musisz przetworzyć.
Utwórz folder optimus, upuść go w folderze obrazów ze wszystkimi podfolderami i plikami.
Otwórz Daleki kierownik , otwórz w nim optimus, utwórz tam plik go.bat i tam zapisz

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path =% ~ dp0 :: Nazwa folderu, w którym znajdują się surowe obrazy, ustaw folder folderu = obrazy echo Przetwarzanie plików jpg w jpegtran :: Utwórz folder, w którym zostanie zapisany skompresowany plik jpg. W naszym przypadku jest to jpeg_images xcopy / y / t / c / i "% folder%" "jpg_% folder%" :: Dla każdego .jpg optymalizujemy za pomocą jpegtran. Wyjście .jpg zostanie zapisane do jpeg_images dla / r% folder% %% a in (* .jpg) do (ustaw fn = %% a & jpegtran -copy none -optimize -progressive -outfile% home_path% jpg_! Fn:% ~ dp0 =!% ścieżka_domowa%! fn:% ~ dp0 =!) echo Zakończono przetwarzanie plików * .JPG za pomocą jpegtran :: Wskazujemy, że teraz należy wykonać zadanie w nowym folderze folderów jpeg_images = jpg_% folder% echo Przetwarzanie plików * .JPG przez jpegoptim dla / r% folder% %% a in (* .jpg) do (ustaw fn = %% a & jpegoptim %% ~ a --strip-all) echo Przetwarzanie plików * .JPG przez jpegoptim zakończone echo Przetwarzanie plików * .PNG przez optipng xcopy / y / t / c / i "% folder%" "png_% folder%" dla / r% folder% %% a in (* .png) do (ustaw fn = %% a & optipng -o7 %% ~ a -out% ścieżka_domowa% png_! fn:% ~ dp0 =!) echo Przetwarzanie plików * .PNG przez optipng jest zakończone ustaw folder = png_% folder% echo Obra Otka * .png plików poprzez PNGOUT o / R folderu%% %% a in (* .png) nie (ustaw fn = %% a & PNGOUT %% ~ a) echo plików Leczenie * .png poprzez PNGOUT zakończone pauzy

Kod jest komentowany w ważnych częściach. W rzeczywistości nic skomplikowanego, zrozumiesz, jeśli tego potrzebujesz.

Teraz zapisz go.bat i uruchom go.

Jeśli istnieje wiele plików, kompresja obrazu zajmie trochę czasu. Poczekaj, aż konsola powiadomi o zakończeniu procesu.

Kompresja odbywa się z osobnymi plikami JPG, które są teraz zlokalizowane w jpg_images i oddzielnie PNG, które znajdują się w png_images.

Jeśli chcesz zmienić jakość lub inne parametry, zapoznaj się z opisem powyższych narzędzi i zmień kod, aby dopasować go do swoich potrzeb.

Jak zoptymalizować i skompresować GIF

Użyj Optymalizator plików . Pamiętaj jednak, że GIF dotyczy tylko animowanych obrazów. Zamiast tego użyj png. PNG kurczy się lepiej niż GIF, w PNG możliwe jest użycie przezroczystego podłoża, nie ma limitu 256 kolorów w palecie.

Podsumowując

W tym artykule starałem się maksymalnie rozwinąć, aby objąć sposoby optymalizacji PNG i JPG. Jeśli masz jakieś pytania, uzupełnienia, napisz w komentarzach, przedyskutuj