Bei der Arbeit mit einigen WordPress-Themen habe ich einige Bilddateien modifiziert und festgestellt, dass meine bearbeiteten Versionen manchmal 3-4x größer sind als das Original (im selben Format gespeichert). Ich möchte die Qualität nicht beeinträchtigen. Wie kann eine Datei verkleinert werden, damit sie schneller geladen wird?
Im Moment benutze ich beispielsweise Photoshop und setze den Schieberegler für die Bildqualität auf '8' (von 10).
Antworten:
Smashing Magazine hat 2 großartige Artikel über PNG-Optimierung und JPG-Optimierung verfasst .
Sie sind ziemlich ausführlich und erklären einige Dinge, die Sie möglicherweise nicht über die Formate und ihre Implementierungen wissen, sehr ausführlich. Im JPEG-Artikel heißt es beispielsweise: "Wenn Sie in Photoshop die Qualität auf unter 50 einstellen, wird ein zusätzlicher Optimierungsalgorithmus namens Farb-Downsampling ausgeführt, bei dem die Farbe in den benachbarten 8-Pixel-Blöcken gemittelt wird."
Beide Artikel befassen sich mit bestimmten Techniken, die Sie in Photoshop verwenden können, um Ihre Dateien für eine stärkere Komprimierung vorzubereiten. Das ist weitaus effektiver als Techniken, die nach dem Speichern einer Datei angewendet werden.
Nachdem Sie diese Dateien gespeichert haben oder wenn Sie nicht das Glück haben, überlagerte Quelldateien für Optimierungen in Photoshop zu haben, können Sie diese Dateien noch stärker komprimieren.
Ich benutze eine Mac-App namens ImageOptim . Von ihrer Website:
ImageOptim optimiert Bilder - so dass sie weniger Speicherplatz beanspruchen und schneller geladen werden -, indem die besten Komprimierungsparameter ermittelt und unnötige Kommentare und Farbprofile entfernt werden. Es verarbeitet PNG-, JPEG- und GIF-Animationen.
ImageOptim bietet eine grafische Benutzeroberfläche für verschiedene Optimierungstools: AdvPNG von AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran von libjpeg, Gifsicle und optional PNGOUT .
Es eignet sich hervorragend zum Veröffentlichen von Bildern im Web (verkleinert Bilder, die in Photoshop für das Web gespeichert wurden, auf einfache Weise) und zum Verkleinern von Mac- und iPhone-Anwendungen.
Stück Kuchen. Ziehen Sie Ihre Bilder (oder Bildordner) in das Fenster. Alle Tools werden ausgeführt, um die Komprimierungsschemata zu optimieren und unnötige Metadaten und Farbprofilinformationen zu entfernen (die ohnehin nicht allgemein unterstützt werden). Sie sollten vor dem Speichern Farbprofile korrigieren. nicht speichern und einbetten).
Alle in diesem Zitat verlinkten Tools haben Windows / Linux / Mac-Versionen mit Ausnahme von PNGOUT, aber zum Glück hat jemand PNGOUT auf OS X und Linux portiert , weil er so nachdenklich ist. Wenn Sie sich für die Verwendung von ImageOptim entscheiden, werden alle Dateien außer PNGOUT in die .app-Datei aufgenommen. Greifen Sie also nach dem PNGOUT-Port, legen Sie ihn in / usr / local / bin (oder wo auch immer) ab und teilen Sie ImageOptim mit, wo er sich befindet.
Insbesondere bei PNG-Bildern ist es für mich nicht ungewöhnlich, dass die Dateigröße selbst nach dem Speichern über Photoshops "Save For Web & Devices" um über 30% sinkt.
Protip: Sortieren Sie nach dem Ausführen der Optimierung nach der Symbolspalte links und markieren Sie alle Zeilen mit dem (X) -Symbol - Dateien, die nicht weiter verkleinert wurden. Entfernen Sie sie aus der Liste und führen Sie alle Bilder mit dem Häkchensymbol erneut aus. Ich kann Ihnen fast versprechen, dass Sie Bilder haben, die immer noch an Dateigröße verlieren. Wiederholen Sie das Sortieren, Auswählen, Entfernen und erneute Ausführen, bis Sie alle (X) -Symbole erhalten, und nennen Sie es einen Tag lang.
Beim Speichern von Fotos in Photoshop empfehle ich die Verwendung von File > Save for Web and Devices. Damit können Sie mit Komprimierungsstufen spielen und das visuelle Ergebnis in Echtzeit sehen. Auf Fotos können Sie es normalerweise niedriger als Stufe 8 speichern und trotzdem großartige Ergebnisse erzielen.
Vielleicht möchten Sie Yahoo Smush.it überprüfen . Ich habe festgestellt, dass es sehr gut funktioniert.
Bei PNG-Bildern können Sie die Anzahl der Farben in der Farbkarte reduzieren und als indiziertes PNG speichern. Betrachten Sie beispielsweise ein Logo mit 128 x 128 Pixel (nicht komprimiert). Stellen Sie sich vor, es gibt nur 16 Farben, die tatsächlich verwendet werden.
Sie können sehen, dass Sie die Größe erheblich reduzieren können, ohne die Qualität des Bildes zu beeinträchtigen (dies gilt nur für bestimmte Arten von Bildern).
Bei Schaltflächen und Website-Symbolen können Sie diese auch zu einem Bild zusammenfassen und mithilfe von CSS oder JavaScript ihre Anzeige (Sprites) steuern. Dies spart die Anzahl der HTTP-Anforderungen für jedes Bild.
Probieren Sie andere Formate aus.
Versuchen Sie grundsätzlich, Ihr Bild in verschiedenen Formaten zu speichern, und überprüfen Sie dann die Dateigröße.
Wenn Sie JPEG verwenden, sollten Sie in der Lage sein, die Bildqualität in einem Grafikeditor wie paint.net nach oben und unten anzupassen. Eine Bildqualität von 50% ist normalerweise gut genug für das Web und verkleinert das Bild erheblich.
Mit PNG können Sie das nicht, aber es ist erwähnenswert, dass PNG manchmal viel größer und manchmal viel kleiner als JPEG ist. PNG ist viel kleiner für Schwarzweißbilder, z. B. Schwarzweiß-Strichzeichnungen.
Heutzutage wird empfohlen, CSS-Sprites zu verwenden, um die Ladezeiten zu verkürzen, indem Anforderungen reduziert werden. Sie müssen sich jedoch erneut die Bildgröße ansehen, die Sie erhalten. Es ist durchaus möglich, dass das CSS-Sprite-Bild viel größer als die Teilbilder ist, wenn Sie beispielsweise mehrere Schwarzweiß-PNGs mit einem Farb-PNG kombinieren.
Sie möchten auch sicherstellen, dass Sie alle EXIF-Daten entfernen - fast alles ist für die Benutzer im Web irrelevant. Müssen sie wirklich wissen, dass Sie eine Canon 5D zum Aufnehmen des Fotos verwendet haben und dass Sie diese verwendet haben? eine Blende von 2,8, für 0,5 Sekunden belichtet, mit einer ISO von 160, ohne Belichtungskorrektur und einer Brennweite von 9 mm?
Alle diese Metadaten verleihen Ihrem Bild mehr Gewicht und sollten im Allgemeinen entfernt werden.
Wie Jessegavin betont , zeigen die meisten Bild-Apps eine Vorschau der Auswirkungen der Komprimierung - verwenden Sie sie, da eine pauschale Einstellung von "8" selten den bestmöglichen Kompromiss darstellt.
Mit dem Google Page Speed Firefox- / Firebug- Plug-in können Sie eine gute Vorstellung davon erhalten, um wie viel Sie die Bildgrößen reduzieren können (einschließlich der Möglichkeit, kleinere Versionen anzuzeigen und zu speichern).
Nachdem Sie alle anderen Vorschläge gemacht haben, um sicherzustellen, dass Ihr Bild so klein wie möglich ist und gleichzeitig die gewünschte Qualität beibehält, möchten Sie auch Ihre Website so konfigurieren, dass sie Bilder mit minimalen HTTP-Headern bereitstellt, und sicherstellen, dass die Mit den von Ihnen bereitgestellten Headern können die Bilder durch Zwischenspeichern von Proxyservern und Webbrowsern ordnungsgemäß gespeichert werden.
Um die Größe der Anforderungen zu verringern, stellen Sie sicher, dass Ihr Webserver so konfiguriert ist, dass keine unnötigen Header wie X-Powered-By gesendet werden. Stellen Sie außerdem sicher, dass Sie Bilder, CSS und andere statische Komponenten von einem Host aus bereitstellen, der keine Cookies setzt (z. B. static.example.com).
Setzen Sie für statische Bilder den Expires-Header auf ein Datum in ferner Zukunft. Dies stellt sicher, dass der Webbrowser und alle Caching-Proxys in der Mitte das Bild so lange wie möglich festhalten. Der einzige Nachteil dabei ist, dass Sie, wenn Sie ein anderes Bild anzeigen möchten, stattdessen einen anderen Dateinamen und einen Link zu diesem verwenden müssen. Die Versionsnummerierung im Dateinamen (z. B. myimage_1.png oder /images/3/logo.png) kann hierfür eine effektive Methode sein. Legen Sie für weniger statische Seiten einen realistischen Expires-Header (Zugriff plus X Stunden) fest und stellen Sie sicher, dass Sie entweder den Last-Modified-Header oder den eTag-Header (nicht beide) festlegen, damit Browser, die die Dateien zuvor heruntergeladen haben, sie schnell testen können ob sie die aktuelle Version haben, indem sie Header vergleichen, anstatt das gesamte Bild herunterzuziehen.
Obwohl es viele Ressourcen gibt, die diese Techniken diskutieren, hat Yahoo großartige Arbeit geleistet und viele Tipps zur Verbesserung der Leistung der Inhaltsbereitstellung an einem Ort zusammengefasst.