Wie funktioniert die verlustfreie Bildkomprimierung von Google Page Speed?

138

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:

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:

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?

Drew Noakes
quelle
Es sieht so aus, als ob Pagespeed jetzt eine verlustbehaftete Komprimierung verlangt. Bevor die Ergebnisse sagten: "Durch verlustfreies Komprimieren von xxx.jpg könnten xx kb eingespart werden (xx% Reduzierung)". Jetzt heißt es: "Durch das Komprimieren von xxx.jpg könnten xx kb eingespart werden (Reduzierung um xx%)." Wichtig ist, dass Google anscheinend verlangt, nur die kleineren Bilder (Miniaturansichten usw.) verlustbehaftet zu komprimieren. Kann jemand herausfinden, welche verlustbehafteten Komprimierungswerkzeuge und -parameter Google verwendet?
Martin

Antworten:

83

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


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.

user123444555621
quelle
3
Insbesondere Retain_color_profile (false) für JPEGs kann eine schlechte Idee sein. Mit zunehmender Verbreitung des erweiterten Farbumfangs wird eine klar definierte Anweisung zur Farbwiedergabe mehrdeutig. Wenn das Originalbild sRGB-codiert war, funktioniert dies in einigen Browsern (Safari, Firefox mit about: config-Änderung) weiterhin, während in anderen möglicherweise nur tatsächlich getaggte Bilder farbverwaltet sind (Standard Firefox). Natürlich ist es Browsern ohne Farbmanagementfunktionen egal…
CO
2
Ich habe seit optipng file.png -o7und ich bin nicht immer überall in der Nähe , was Google zeigt. Vielleicht konvertieren sie nach Möglichkeit zu SVG?
Nateowami
@Nateowami Ich hatte das gleiche Problem ... für einige PNGs macht Google besser als optipng -o7. Für diese können Sie die optimierten Bilder von der Pagespeed-Website selbst herunterladen.
Chrisvdb
46

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.

Hoang Huynh
quelle
29

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

Bernstein
quelle
1
Danke für den Link. Ich denke, ich möchte wirklich mehr darüber erfahren, welche Arten von Redundanzen in Bilddateien vorhanden sind, die entfernt werden können, wenn die Dateigröße Ihr Hauptanliegen ist. Ich weiß, dass Informationen im Internet verfügbar sind. Ich wollte nur einen schönen Ort haben, um sie hier auf SO zusammenzustellen.
Drew Noakes
Ich verwende ein benutzerdefiniertes Build-Tool, das Bilder sowohl mit optipng als auch mit pngcrush komprimiert und dann die kleinere Datei auswählt. Trotzdem beschwert sich Page Speed ​​über nicht optimale Bilder. Welches Tool verwenden sie also wirklich?
user123444555621
@ Pumbaa80 Sie können auch advsys.net/ken/util/pngout.htm ausprobieren (was ausdrücklich besagt, dass es manchmal kleinere Größen als optipng und pngcrush bekommen kann).
Amber
Ich habe gerade herausgefunden, dass Page Speed ​​tatsächlich optipng verwendet, mit einem benutzerdefinierten Wrapper , der die besten Konfigurationsoptionen ermittelt. @ Amber Keine Option, ich verwende kein Windows;)
user123444555621
15

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

Kornel
quelle
Die einzige Antwort, die versucht, die tatsächliche Frage zu beantworten, die das O / P tatsächlich gestellt hat, anstelle der anderen Frage "Wie kann ich meine Bilder am meisten komprimieren?" lol
toddmo
13

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

Thor
quelle
Danke, dass du das geteilt hast!
Rotaercz
1
Wenn Sie IIS verwenden, wurde PageSpeed ​​kürzlich auf Windows portiert und führt dieselben Optimierungen automatisch durch. iispeed.com Um die beste Reduzierung zu erzielen , habe ich ganze Verzeichnisse von JPEGs mit JPEGmini mp-
James Moberg
Es scheint, als gäbe es keine PageSpeed-Erweiterung mehr für Firebug.
Stephan Schielke
10

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.

Rohan
quelle
2
Irgendwelche Alternativen für Windows?
Mathias Lykkegaard Lorenzen
2

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!

Digs
quelle
1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" wenn Sie Leerzeichen in Ihrem Dateinamen haben
Ned Martin
0

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.

Nate
quelle
0

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!

Kim Steinhaug
quelle