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?
quelle
Antworten:
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
Wenn alle vier Kombinationen angewendet werden, bleibt das kleinste Ergebnis erhalten. So einfach ist das.
(NB: Das
optipng
Befehlszeilentool macht das auch, wenn Sie-o 2
durch bereitstellen-o 7
)Für JPEG-Dateien verwenden sie jpeglib mit den folgenden Optionen:
Ebenso wird WEBP mit libwebp mit folgenden Optionen komprimiert :
Es gibt auch image_converter.cc , mit dem verlustfrei in das kleinste Format konvertiert wird.
quelle
optipng file.png -o7
und ich bin nicht immer überall in der Nähe , was Google zeigt. Vielleicht konvertieren sie nach Möglichkeit zu SVG?Ich verwende
jpegoptim
, um JPG-Dateien undoptipng
PNG-Dateien zu optimieren.Wenn Sie
bash
aktiviert sind, lautet der Befehl zum verlustfreien Optimieren aller JPGs in einem Verzeichnis (rekursiv):Sie können hinzufügen ,
-m[%]
zujpegoptim
komprimieren JPG - Bilder verlustbehaftete, zum Beispiel:So optimieren Sie alle PNGs in einem Verzeichnis:
-o2
ist die Standardoptimierungsstufe, die Sie vono2
bis ändern könneno7
. Beachten Sie, dass eine höhere Optimierungsstufe eine längere Verarbeitungszeit bedeutet.quelle
Schauen Sie sich http://code.google.com/speed/page-speed/docs/payload.html#CompressImages an, in dem einige der Techniken / Tools beschrieben werden.
quelle
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
quelle
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:
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:
in
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!
Geben Sie im Feld "Suchen" den regulären Ausdruck ein (der alle Zeichen ab dem Trennzeichen ganz rechts auswählt):
_ (?!. * _) (. *) \. jpg $
Geben Sie im Feld "Ersetzen durch" Folgendes ein:
.jpg
Klicken Sie optional auf die Schaltfläche Vorschau, um die vorgeschlagenen Ergebnisse für die Stapelumbenennung anzuzeigen, und schließen Sie dann
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
quelle
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.
und voila! :-)
Zusätzlich finden Sie eine ziemlich einfache Oberfläche, um dies auch manuell zu tun.
quelle
Es gibt ein sehr praktisches Batch-Skript, das Bilder unter einem Ordner mithilfe von OptiPNG (aus diesem Blog ) rekursiv optimiert :
EINE LINIE!
quelle
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G"
wenn Sie Leerzeichen in Ihrem Dateinamen habenWenn 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
Ändern Sie die Optionen entsprechend Ihren Anforderungen.
quelle
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!
quelle