Wie funktioniert die verlustfreie Bildkomprimierung von Google Page Speed?

Wenn Sie das PageSpeed-Plugin von Google für Firebug / Firefox auf einer Website ausführen, werden Fälle vorgeschlagen, in denen ein Bild verlustfrei komprimiert werden kann, und ein Link zum Herunterladen dieses kleineren Bilds bereitgestellt.

Beispielsweise:

• Durch verlustfreies Komprimieren von http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg können 33,5 KB (85% Reduzierung) eingespart werden.
• Durch verlustfreies Komprimieren von http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg könnten 18,5 KB (77% Reduzierung) eingespart werden.
• Durch die verlustfreie Komprimierung von http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png könnten 262B eingespart werden (11% Reduzierung).
• Durch verlustfreies Komprimieren von http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png könnten 91B eingespart werden (51% Reduzierung).
• Durch verlustfreies Komprimieren von http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm könnten 61B eingespart werden (5% Reduzierung).

Dies gilt sowohl für JPG- als auch für PNG-Dateitypen (ich habe GIF oder andere nicht getestet.)

Beachten Sie auch die Flickr-Miniaturansichten (alle diese Bilder haben eine Größe von 75 x 75 Pixel). Dies sind einige ziemlich große Einsparungen. Wenn dies wirklich so großartig ist, warum wendet Yahoo diese Serverseite nicht auf die gesamte Bibliothek an und reduziert die Speicher- und Bandbreitenbelastung?

Sogar Stackoverflow.com steht für einige sehr geringe Einsparungen:

• Durch die verlustfreie Komprimierung von http://sstatic.net/stackoverflow/img/sprites.png?v=3 können 1,7 KB (10% weniger) eingespart werden.
• Durch verlustfreies Komprimieren von http://sstatic.net/stackoverflow/img/tag-chrome.png können 11B eingespart werden (1% Reduzierung).

Ich habe gesehen, dass PageSpeed ​​ziemlich gute Einsparungen bei PNG-Dateien vorschlägt, die ich mit der Photoshop-Funktion "Für Web speichern" erstellt habe.

Meine Frage ist also, welche Änderungen nehmen sie an den Bildern vor, um sie um so viel zu reduzieren? Ich vermute, es gibt unterschiedliche Antworten für unterschiedliche Dateitypen. Ist das für JPGs wirklich verlustfrei? Und wie können sie Photoshop schlagen? Sollte ich etwas misstrauisch sein?

Wenn Sie wirklich an den technischen Details interessiert sind, lesen Sie den Quellcode:

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

Für PNG-Dateien verwenden sie OptiPNG mit einem Trial-and-Error-Ansatz

// 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)
};

Wenn alle vier Kombinationen angewendet werden, bleibt das kleinste Ergebnis erhalten. So einfach ist das.

(NB: Das optipngBefehlszeilentool macht das auch, wenn Sie -o 2durch bereitstellen -o 7)

Für JPEG-Dateien verwenden sie jpeglib mit den folgenden Optionen:

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

Ebenso wird WEBP mit libwebp mit folgenden Optionen komprimiert :

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

Es gibt auch image_converter.cc , mit dem verlustfrei in das kleinste Format konvertiert wird.

Ich verwende jpegoptim, um JPG-Dateien und optipngPNG-Dateien zu optimieren.

Wenn Sie bashaktiviert sind, lautet der Befehl zum verlustfreien Optimieren aller JPGs in einem Verzeichnis (rekursiv):

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

Sie können hinzufügen , -m[%]zu jpegoptimkomprimieren JPG - Bilder verlustbehaftete, zum Beispiel:

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

So optimieren Sie alle PNGs in einem Verzeichnis:

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

-o2ist die Standardoptimierungsstufe, die Sie von o2bis ändern können o7. Beachten Sie, dass eine höhere Optimierungsstufe eine längere Verarbeitungszeit bedeutet.

Schauen Sie sich http://code.google.com/speed/page-speed/docs/payload.html#CompressImages an, in dem einige der Techniken / Tools beschrieben werden.

Es geht darum, die CPU-Zeit des Encoders gegen Komprimierungseffizienz einzutauschen. Bei der Komprimierung wird nach kürzeren Darstellungen gesucht. Wenn Sie stärker suchen, finden Sie kürzere.

Es geht auch darum, die Bildformatierungsfunktionen optimal zu nutzen, z. B. PNG8 + a anstelle von PNG24 + a, optimierte Huffman-Tabellen in JPEG usw.

Photoshop ist nicht wirklich bemüht, dies zu tun, wenn Bilder für das Web gespeichert werden. Daher ist es nicht verwunderlich, dass jedes Tool sie übertrifft.

Sehen

• ImageOptim (verlustfrei) und
• ImageAlpha (verlustbehaftet) für kleinere PNG-Dateien ( allgemeine Beschreibung der Funktionsweise ) und
• JPEGmini / MozJPEG (verlustbehaftet) für besseren JPEG-Kompressor.

So replizieren Sie die JPG-Komprimierungsergebnisse von PageSpeed ​​unter Windows:

Mit der Windows-Version von jpegtran, die Sie unter www.jpegclub.org/jpegtran erhalten, konnte ich genau die gleichen Komprimierungsergebnisse wie PageSpeed erzielen . Ich habe die ausführbare Datei über die DOS-Eingabeaufforderung ausgeführt (verwenden Sie Start> CMD). Um genau die gleiche Dateigröße (bis auf das Byte) wie bei der PageSpeed-Komprimierung zu erhalten, habe ich die Huffman-Optimierung wie folgt angegeben:

jpegtran -optimize source_filename.jpg output_filename.jpg

Um weitere Hilfe zu den Komprimierungsoptionen zu erhalten, geben Sie an der Eingabeaufforderung einfach Folgendes ein: jpegtran

Oder um die automatisch generierten Bilder auf der Registerkarte PageSpeed ​​in Firebug zu verwenden:

Ich konnte den Ratschlägen von Pumbaa80 folgen, um Zugriff auf die optimierten PageSpeed-Dateien zu erhalten. Hoffentlich bietet der Screenshot hier weitere Klarheit für die FireFox-Umgebung. (Ich konnte jedoch in Chrome nicht auf eine lokale Version dieser optimierten Dateien zugreifen.)

Und um die unordentlichen PageSpeed-Dateinamen mit Adobe Bridge und regulären Ausdrücken zu bereinigen:

Obwohl PageSpeed ​​in FireFox in der Lage war, optimierte Bilddateien für mich zu generieren, wurden auch deren Namen geändert und einfache Namen wie:

nice_picture.jpg

in

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Ich entdeckte, dass dies eine häufige Beschwerde zu sein scheint. Da ich nicht alle meine Bilder von Hand umbenennen wollte, habe ich das Umbenennungswerkzeug von Adobe Bridge zusammen mit einem regulären Ausdruck verwendet. Sie könnten andere Umbenennungsbefehle / -tools verwenden, die reguläre Ausdrücke akzeptieren, aber ich vermute, dass Adobe Bridge für die meisten von uns, die mit PageSpeed-Problemen arbeiten, sofort verfügbar ist!

1. Starten Sie Adobe Bridge
2. Wählen Sie alle Dateien aus (mit Steuerelement A).
3. Wählen Sie Extras> Chargenumbenennung (oder Control Shift R).
4. Wählen Sie im Feld Voreinstellung "String Substitution". In den Feldern Neue Dateinamen sollte jetzt "String Substitution" gefolgt von "Original Filename" angezeigt werden.
5. Aktivieren Sie das Kontrollkästchen "Regulären Ausdruck verwenden".

6. Geben Sie im Feld "Suchen" den regulären Ausdruck ein (der alle Zeichen ab dem Trennzeichen ganz rechts auswählt):

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

7. Geben Sie im Feld "Ersetzen durch" Folgendes ein:

   .jpg

8. Klicken Sie optional auf die Schaltfläche Vorschau, um die vorgeschlagenen Ergebnisse für die Stapelumbenennung anzuzeigen, und schließen Sie dann

9. Klicken Sie auf die Schaltfläche Umbenennen

Beachten Sie, dass Bridge nach der Verarbeitung die Auswahl von Dateien aufhebt, die nicht betroffen waren. Wenn Sie alle Ihre .png-Dateien bereinigen möchten, müssen Sie alle Bilder erneut auswählen und die obige Konfiguration ändern (für "png" anstelle von "jpg"). Sie können die obige Konfiguration auch als Voreinstellung wie "Clean PageSpeed ​​jpg Images" speichern, damit Sie Dateinamen in Zukunft schnell bereinigen können.

Konfigurations-Screenshot / Fehlerbehebung

Wenn Sie Probleme haben, ist es möglich, dass einige Browser den obigen RegEx-Ausdruck nicht richtig anzeigen (beschuldigen Sie meine Escape-Zeichen). Einen Screenshot der Konfiguration (zusammen mit diesen Anweisungen) finden Sie unter:

So verwenden Sie das Stapelumbenennungstool von Adobe Bridge zum Bereinigen optimierter PageSpeed-Bilder mit unordentlichen Dateinamen

Meiner Meinung nach ist Trimage die beste Option, die die meisten Bildformate auf einmal effektiv verarbeitet . Es nutzt effektiv optipng, pngcrush, advpng und jpegoptim basierend auf dem Bildformat und liefert eine nahezu perfekte verlustfreie Komprimierung.

Die Implementierung ist ziemlich einfach, wenn Sie eine Befehlszeile verwenden.

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

und voila! :-)
Zusätzlich finden Sie eine ziemlich einfache Oberfläche, um dies auch manuell zu tun.

Es gibt ein sehr praktisches Batch-Skript, das Bilder unter einem Ordner mithilfe von OptiPNG (aus diesem Blog ) rekursiv optimiert :

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

EINE LINIE!

Wenn Sie nach einer Stapelverarbeitung suchen, denken Sie daran, dass sich Trimage beschwert, wenn Sie keinen Xserver zur Verfügung haben. In diesem Fall schreiben Sie einfach ein Bash- oder PHP-Skript, um so etwas zu tun

<?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 {} \;");
?>

Ändern Sie die Optionen entsprechend Ihren Anforderungen.

Für Windows gibt es mehrere Drag'n'Drop-Schnittstellen für den einfachen Zugriff.

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

Für PNG-Dateien habe ich diese zu meinem Vergnügen gefunden, anscheinend 3 verschiedene Tools, die in dieser GIU verpackt sind. Einfach per Drag & Drop und es erledigt es für Sie.

https://pnggauntlet.com/

Es braucht jedoch Zeit, versuchen Sie, eine 1-MB-PNG-Datei zu komprimieren. Ich war erstaunt, wie viel CPU in diesen Komprimierungsvergleich investiert wurde, was hier vor sich gehen muss. Das Bild scheint auf 100 Arten komprimiert zu sein und das beste gewinnt: D.

In Bezug auf die JPG-Komprimierung habe ich das Gefühl, dass es riskant ist, Farbprofile und alle zusätzlichen Informationen zu entfernen. Wenn jedoch jeder dies tut, ist dies der Geschäftsstandard, also habe ich es einfach selbst gemacht: D.

Ich habe heute bei einer WP-Installation 113 MB auf 5500 Dateien gespeichert, es lohnt sich also auf jeden Fall!