it-swarm.com.de

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. Außerdem enthält es einen Link zum Herunterladen dieses kleineren Bildes.

Zum Beispiel:

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

Beachten Sie auch die Flickr-Vorschaubilder (alle diese Bilder haben eine Auflösung von 75x75 Pixeln). Wenn dies wirklich so großartig ist, warum wendet Yahoo diese Serverseite nicht auf die gesamte Bibliothek an und reduziert ihre Speicher- und Bandbreitenbelastung?

Sogar Stackoverflow.com steht für einige geringfügige Einsparungen:

Ich habe gesehen, dass PageSpeed ​​ziemlich vernünftige Einsparungen für PNG-Dateien vorschlägt, die ich mit der Funktion "Save for Web" von Photoshop erstellt habe.

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

136
Drew Noakes

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


Für PNG-Dateien verwenden sie OptiPNG mit einigen Versuchs- und Fehleransätzen

// 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.

(Hinweis: Das Befehlszeilentool optipng tut dies auch, wenn Sie -o 2 durch -o 7 angeben.)


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

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

In ähnlicher Weise wird WEBP mit libwebp mit diesen 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 , das verwendet wird, um verlustfrei in das kleinste Format zu konvertieren.

82

Ich nutze jpegoptim um JPG-Dateien zu optimieren und optipng um PNG-Dateien zu optimieren.

Wenn Sie sich für bash befinden, lautet der Befehl zur verlustlosen Optimierung aller JPGs in einem Verzeichnis (rekursiv):

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

Sie können -m[%] zu jpegoptim hinzufügen, um JPG-Bilder mit Verlust zu komprimieren. 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 {} \;

-o2 ist die Standardoptimierungsstufe. Sie können diese Einstellung von o2 in o7 ändern. Beachten Sie, dass ein höherer Optimierungsgrad eine längere Verarbeitungszeit bedeutet.

46
Hoang Huynh

Werfen Sie einen Blick auf http://code.google.com/speed/page-speed/docs/payload.html#CompressImages , in dem einige der Techniken/Tools beschrieben werden.

29
Amber

Es ist eine Frage der CPU-Zeit des Encoders, um die Effizienz der Komprimierung zu erhöhen. Bei der Komprimierung wird nach kürzeren Repräsentationen gesucht. Wenn Sie härter suchen, finden Sie kürzere.

Es ist auch eine Frage der vollen Verwendung von Bildformatfunktionen, z. PNG8 + a anstelle von PNG24 + a, optimierte Huffman-Tabellen in JPEG usw.

Photoshop ist nicht wirklich bemüht, dies beim Speichern von Bildern für das Internet zu tun. Daher überrascht es nicht, dass jedes Tool dies übertrifft.

Sehen 

15
Kornel

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

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

jpegtran -optimize source_filename.jpg output_filename.jpg

Um weitere Informationen zu den Komprimierungsoptionen zu erhalten, geben Sie am Befehl Prompt Folgendes ein: jpegtran

Oder zur Verwendung der automatisch generierten Bilder auf der Registerkarte "PageSpeed" in Firebug:

Ich konnte den Ratschlägen von Pumbaa80 folgen, um auf die optimierten Dateien von PageSpeed ​​zuzugreifen. Hoffentlich sorgt der Screenshot hier für mehr Klarheit in der FireFox-Umgebung. (In Chrome konnte ich jedoch nicht auf eine lokale Version dieser optimierten Dateien zugreifen.)

Und um die fehlerhaften 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, änderte es auch ihre Namen, indem sie zu einfachen Namen wurden:

Nice_picture.jpg

in 

Nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Ich entdeckte, dass dies eine allgemeine Beschwerde zu sein scheint. Da ich nicht alle meine Bilder von Hand umbenennen wollte, habe ich das Umbenennungstool 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, problemlos verfügbar ist. 

  1. Starten Sie Adobe Bridge
  2. Alle Dateien auswählen (mit Control A)
  3. Wählen Sie "Werkzeuge"> "Stapel umbenennen" (oder "Control Shift R").
  4. Im Feld Preset wählen Sie "String Substitution". Die Felder für die neuen Dateinamen sollten jetzt "String-Ersetzung" gefolgt von "Original-Dateiname" anzeigen.
  5. Aktivieren Sie das Kontrollkästchen "Regulären Ausdruck verwenden".
  6. Geben Sie im Feld "Suchen" den regulären Ausdruck ein (damit werden alle Zeichen beginnend mit dem Trennzeichen ganz rechts unten markiert): 

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

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

    .jpg

  8. Klicken Sie optional auf die Schaltfläche Vorschau, um die vorgeschlagenen Ergebnisse der Stapelumbenennung anzuzeigen. Schließen Sie dann

  9. Klicken Sie auf die Schaltfläche Umbenennen

Beachten Sie, dass Bridge nach der Verarbeitung die Auswahl der nicht ausgewählten Dateien aufhebt. Wenn Sie alle .png-Dateien bereinigen möchten, müssen Sie alle Bilder erneut auswählen und die Konfiguration oben ändern (für "png" statt "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. 

Screenshot der Konfiguration/Fehlerbehebung

Wenn Sie Probleme haben, kann es vorkommen, dass einige Browser den RegEx-Ausdruck oben nicht korrekt anzeigen (geben Sie meinen Escape-Zeichen die Schuld). Einen Screenshot der Konfiguration (zusammen mit diesen Anweisungen) finden Sie unter:

/ - So verwenden Sie das Stapel-Umbenennungstool von Adobe Bridge zum Bereinigen optimierter PageSpeed-Bilder mit fehlerhaften Dateinamen

13
Thor

Meiner Meinung nach ist die beste Option, mit der die meisten Bildformate problemlos verarbeitet werden können, Zuschnitt . Es nutzt effektiv optipng, pngcrush, advpng und jpegoptim basierend auf dem Bildformat und liefert nahezu verlustfrei Kompression.

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.

10
Rohan

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!

2
Digs

Wenn Sie nach Batch-Verarbeitung suchen, sollten Sie Trimage-Beschwerden berücksichtigen, wenn Xserver nicht verfügbar ist. 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 nach Ihren Bedürfnissen.

0
Nate

Für Fenster 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 dieses zu meinem Vergnügen gefunden, anscheinend 3 verschiedene Werkzeuge, die in dieser GIU enthalten sind. Einfach per Drag & Drop und es erledigt es für Sie.

https://pnggauntlet.com/

Versuchen Sie jedoch, eine 1-MB-PNG-Datei zu komprimieren. Ich war erstaunt, wie viel CPU in diesen Komprimierungsvergleich gesteckt wurde, was hier vor sich geht. Anscheinend ist das Bild auf 100 Arten komprimiert und das Beste gewinnt: D

Was die JPG-Komprimierung angeht, so empfinde ich es als riskant, Farbprofile und alle zusätzlichen Informationen zu entfernen. Wenn jedoch alle dies tun, ist dies der Geschäftsstandard. Ich habe es also selbst getan: D

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

0
Kim Steinhaug