Jak działa bezstratna kompresja obrazu Google Page Speed?

Po uruchomieniu wtyczki Google PageSpeed ​​dla Firebug / Firefox na stronie internetowej zasugeruje ona przypadki, w których obraz można skompresować bezstratnie, i poda link do pobrania tego mniejszego obrazu.

Na przykład:

• Bezstratna kompresja http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg pozwoliłaby zaoszczędzić 33,5KiB (85% redukcji).
• Bezstratna kompresja http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg pozwoliłaby zaoszczędzić 18,5KiB (77% redukcji).
• Bezstratna kompresja http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png pozwoliłaby zaoszczędzić 262B (11% redukcji).
• Bezstratna kompresja http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png pozwoliłaby zaoszczędzić 91B (51% redukcji).
• Kompresja bezstratna http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm może zaoszczędzić 61B (5% redukcji).

Dotyczy to zarówno plików JPG, jak i PNG (nie testowałem GIF ani innych).

Zwróć także uwagę na miniatury Flickr (wszystkie te obrazy mają 75x75 pikseli). To całkiem spora oszczędność. Jeśli to naprawdę świetne, dlaczego Yahoo nie stosuje tej strony serwera do całej biblioteki i nie zmniejsza obciążenia pamięci masowej i przepustowości?

Nawet Stackoverflow.com oznacza bardzo drobne oszczędności:

• Bezstratna kompresja http://sstatic.net/stackoverflow/img/sprites.png?v=3 może zaoszczędzić 1,7 KB (redukcja o 10%).
• Bezstratna kompresja http://sstatic.net/stackoverflow/img/tag-chrome.png może zaoszczędzić 11B (redukcja o 1%).

Widziałem, jak PageSpeed ​​sugeruje całkiem przyzwoite oszczędności na plikach PNG, które utworzyłem za pomocą funkcji „Zapisz dla sieci Web” programu Photoshop.

Moje pytanie brzmi więc, jakie zmiany wprowadzają w obrazach, aby je tak bardzo zmniejszyć? Domyślam się, że istnieją różne odpowiedzi dla różnych typów plików. Czy to naprawdę bezstratne dla JPG? Jak mogą pokonać Photoshopa? Powinienem być wobec tego trochę podejrzliwy?

Jeśli naprawdę interesują Cię szczegóły techniczne, sprawdź kod źródłowy:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

W przypadku plików PNG używają OptiPNG z pewnym podejściem prób i błędów

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Po zastosowaniu wszystkich czterech kombinacji zachowywany jest najmniejszy wynik. Proste.

(Uwaga: optipngnarzędzie wiersza poleceń robi to również, jeśli zapewniasz -o 2przez -o 7)

W przypadku plików JPEG używają jpeglib z następującymi opcjami:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Podobnie, WEBP jest kompresowany przy użyciu libwebp z następującymi opcjami:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Istnieje również image_converter.cc, który służy do bezstratnej konwersji do najmniejszego formatu.

Używam jpegoptimdo optymalizacji plików JPG i optipngoptymalizacji plików PNG.

Jeśli jesteś włączony bash, polecenie bezstratnej optymalizacji wszystkich plików JPG w katalogu (rekurencyjnie) to:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Możesz dodać -m[%]do jpegoptimstratnej kompresji obrazów JPG, na przykład:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Aby zoptymalizować wszystkie pliki PNG w katalogu:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2jest domyślnym poziomem optymalizacji, możesz go zmienić z o2na o7. Zauważ, że wyższy poziom optymalizacji oznacza dłuższy czas przetwarzania.

Spójrz na http://code.google.com/speed/page-speed/docs/payload.html#CompressImages, który opisuje niektóre techniki / narzędzia.

To kwestia wymiany czasu procesora kodera na wydajność kompresji. Kompresja to poszukiwanie krótszych reprezentacji, a jeśli będziesz szukać mocniej, znajdziesz krótsze.

Jest też kwestia maksymalnego wykorzystania możliwości formatu obrazu, np. PNG8 + a zamiast PNG24 + a, zoptymalizowane tabele Huffmana w JPEG itp.

Photoshop tak naprawdę nie stara się tego robić podczas zapisywania obrazów do Internetu, więc nie jest zaskakujące, że każde narzędzie go pokonuje.

Widzieć

• ImageOptim (bezstratny) i
• ImageAlpha (stratny) dla mniejszych plików PNG ( ogólny opis działania ) i
• JPEGmini / MozJPEG (stratny) dla lepszego kompresora JPEG.

Aby zreplikować wyniki kompresji JPG PageSpeed ​​w systemie Windows:

Udało mi się uzyskać dokładnie takie same wyniki kompresji, jak w przypadku PageSpeed, używając wersji jpegtran dla systemu Windows, którą można pobrać ze strony www.jpegclub.org/jpegtran . Uruchomiłem plik wykonywalny za pomocą wiersza poleceń DOS (użyj Start> CMD). Aby uzyskać dokładnie ten sam rozmiar pliku (z dokładnością do bajtów) co kompresja PageSpeed, określiłem optymalizację Huffmana w następujący sposób:

jpegtran -optimize source_filename.jpg output_filename.jpg

Aby uzyskać więcej informacji na temat opcji kompresji, w wierszu polecenia wpisz: jpegtran

Lub użyć obrazów generowanych automatycznie z karty PageSpeed ​​w Firebug:

Udało mi się postępować zgodnie z radą Pumba80, aby uzyskać dostęp do zoptymalizowanych plików PageSpeed. Mamy nadzieję, że zrzut ekranu tutaj zapewnia większą przejrzystość dla środowiska FireFox. (Nie udało mi się jednak uzyskać dostępu do lokalnej wersji tych zoptymalizowanych plików w przeglądarce Chrome).

Aby wyczyścić niechlujne nazwy plików PageSpeed ​​za pomocą programu Adobe Bridge i wyrażeń regularnych:

Chociaż PageSpeed ​​w FireFox był w stanie wygenerować dla mnie zoptymalizowane pliki graficzne, zmienił również ich nazwy, zmieniając proste nazwy, takie jak:

nice_picture.jpg

w

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Odkryłem, że wydaje się, że to częsta skarga. Ponieważ nie chciałem ręcznie zmieniać nazw wszystkich moich zdjęć, użyłem narzędzia zmiany nazwy programu Adobe Bridge wraz z wyrażeniem regularnym. Możesz użyć innych poleceń / narzędzi zmiany nazwy, które akceptują wyrażenia regularne, ale podejrzewam, że Adobe Bridge jest łatwo dostępny dla większości z nas pracujących z problemami z PageSpeed!

1. Uruchom Adobe Bridge
2. Wybierz wszystkie pliki (używając Control A)
3. Wybierz Narzędzia> Zmiana nazwy partii (lub Control Shift R)
4. W polu Preset wybierz „String Substitution”. W polach Nowe nazwy plików powinno być teraz wyświetlane „Podstawienie ciągu”, a po nim „Oryginalna nazwa pliku”
5. Zaznacz pole wyboru „Użyj wyrażenia regularnego”

6. W polu „Znajdź” wprowadź wyrażenie regularne (co spowoduje zaznaczenie wszystkich znaków zaczynających się od skrajnego prawego podkreślenia):

   _ (?!. * _) (. *) \. jpg $

7. W polu „Zamień na” wpisz:

   .jpg

8. Opcjonalnie kliknij przycisk Podgląd, aby zobaczyć proponowane wyniki zmiany nazwy partii, a następnie zamknij

9. Kliknij przycisk Zmień nazwę

Zwróć uwagę, że po przetworzeniu program Bridge usuwa zaznaczenie plików, na które nie miało to wpływu. Jeśli chcesz wyczyścić wszystkie pliki .png, musisz ponownie wybrać wszystkie obrazy i zmodyfikować powyższą konfigurację (dla „png” zamiast „jpg”). Możesz również zapisać powyższą konfigurację jako ustawienie wstępne, takie jak „Wyczyść obrazy jpg PageSpeed”, aby w przyszłości móc szybko wyczyścić nazwy plików.

Zrzut ekranu konfiguracji / Rozwiązywanie problemów

Jeśli masz problemy, możliwe, że niektóre przeglądarki mogą nie wyświetlać poprawnie powyższego wyrażenia RegEx (obwiniaj moje znaki ucieczki), więc zrzut ekranu konfiguracji (wraz z tymi instrukcjami) można znaleźć na:

Jak używać narzędzia Batch Rename w Adobe Bridge do czyszczenia zoptymalizowanych obrazów PageSpeed, które mają niechlujne nazwy plików

Moim zdaniem najlepszą opcją, która skutecznie radzi sobie z większością formatów obrazu w ruchu, jest trimage . Skutecznie wykorzystuje optipng, pngcrush, advpng i jpegoptim w oparciu o format obrazu i zapewnia niemal idealną bezstratną kompresję.

Implementacja jest dość łatwa, jeśli używasz wiersza poleceń.

sudo apt-get install trimage    
trimage -d images/*

i voila! :-)
Dodatkowo znajdziesz całkiem prosty interfejs do zrobienia tego ręcznie.

Istnieje bardzo przydatny skrypt wsadowy, który rekurencyjnie optymalizuje obrazy pod folderem za pomocą OptiPNG (z tego bloga ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

JEDNA LINIA!

Jeśli szukasz przetwarzania wsadowego, pamiętaj o reklamacjach trimage, jeśli nie masz dostępu do Xserver. W takim przypadku po prostu napisz skrypt bash lub php, aby zrobić coś takiego

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Zmień opcje, aby dopasować je do swoich potrzeb.

W przypadku systemu Windows istnieje kilka interfejsów typu drag'n'drop dla łatwego dostępu.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

W przypadku plików PNG znalazłem ten dla własnej przyjemności, najwyraźniej 3 różne narzędzia zawarte w tym GIU. Po prostu przeciągnij i upuść i zrobi to za Ciebie.

https://pnggauntlet.com/

Zajmuje to jednak trochę czasu, spróbuj skompresować plik png o wielkości 1 MB - byłem zdumiony, ile procesora zajęło to porównanie kompresji, które musi być tym, co się tutaj dzieje. Wygląda na to, że obraz jest skompresowany na 100 sposobów, a najlepszy wygrywa: D

Jeśli chodzi o kompresję JPG, uważam, że jest to ryzykowne dla paska profili kolorów i wszystkich dodatkowych informacji - jednak - jeśli wszyscy to robią - to standard biznesowy, więc zrobiłem to sam: D

Zapisałem dzisiaj 113 MB na 5500 plikach podczas instalacji WP, więc zdecydowanie warto!