Website Speed Optimierung ist derzeit in aller Munde, egal ob gzip, expires Header oder Etags. Meiner Meinung nach, werden die wirklichen Datenfresser trotzdem oft nicht bedacht. Denn leider ist es komplizierter Bilder konsequent zu optimieren, daher tauchen in diesem Bereich auch ständig neue Defizite auf.
Ich werde heute sowohl zwei Seiten, als auch ein Tool vorstellen, welche es Dir ermöglichen, deine Grafiken zu verkleinern. Generell kann ich jedoch empfehlen, dass man in naher Zukunft auf den Gebrauch von Grafiken in Designs verzichten sollte, um diesen Problematiken aus dem Weg zu gehen.
Auf der einen Seite lassen sich mit Hilfe von CSS3 abgerundete Ecken und Verläufe darstellen, auf der anderen Seite ist es möglich mit Webfonts auf gerenderte Schriften zu verzichten. Außerdem ist es sinnvoll, viele kleine Grafiken in Sprites zusammen zu fassen und per CSS später zu positionieren. Dadurch lassen sich Daten und Requests einsparen. Genau diese Dinge hat Martin vor einiger Zeit in seinem Blog detaillierter beschrieben.
PageSpeed mit CSS Sprites von Martin Missfeldt
Dem einen oder anderen ist es gar nicht bewusst, welche Datenmengen bei einem Internetseitenbesuch durch die Leitung gehen. Hier sollte man sich mal mit einem Tool, z.b. PageSpeed (Chrome Broser) oder Yslow (Firefox Browser), die heruntergeladene Seitengröße anzeigen lassen. Alternativ kann man die betroffenen Seiten aber auch mit dem Smartphone oder einem Tablet ansurfen. Hierbei sollte auf jeden Fall beachtet werden, dass man nicht über das WLAN ins Internet geht. Spätestens nach diesem Test sollte es offensichtlich sein, dass ein großer Handlungsbedarf besteht.
Zunächst ist es wichtig, das richtige Format zu wählen ( jpg, png (8/24bit) oder gif). Sicherlich sind die Unterschiede oft nicht sichtbar und die eingesparten Kilobytes scheinen auf den ersten Blick auch nicht so hoch, jedoch summieren sich die Kilobytes später und genau dieser Fakt wird oftmals nicht berücksichtig.
Ich speichere die Bilder mit Photoshop über die Option „Für Web und Geräte speichern“.
Mit folgenden Einstellungen: GIF, PNG 8bit, PNG 24bit, JPG Qualität 30% , JPG Qualität 70%, JPG Qualität 100%.
Welchen dieser Screenshots würdest Du von der Datenmenge kleiner einschätzen?
(Am besten kann du die Screenshots vergleichen, wenn du sie in einem neuen Tab öffnest)
Lösung:
Reihe 1) PNG 24bit => 280KB | JPG Qualität 30% => 84KB
Reihe 2) GIF 256 Farben => 136KB | JPG Qualität 100% => 356KB
Reihe 3) PNG 8bit => 112 KB | JPG Qualität 70% => 172KB
Das größte Bild ist das JPG mit einer Qualität von 100%, dies ist an sich nicht verwunderlich.
Das kleinste Bild ist das JPG mit einer Qualität von 30%. Jedoch siehst du hier im Browserkopf Artefakte, welche ebenfalls in den Bereichen um die Schriften zu erkennen sind.
Im PNG 8 hingegen lässt sich bereits eine Verbesserung erkennen, da die Größe nun 128 KB beträgt. Problematisch bei diesem Bild ist es jedoch, dass es nur 256 Farben darstellen kann. Erkennbar ist dieses Problem im Browserkopf, da an dieser Stelle der Verlauf recht unsauber ist. Doch abgesehen von diesen Einzelheiten, bin ich mit dem Ergebnis trotzdem zufrieden.
Der Screen meines Blogs ist nicht so gut geeignet, da die Hauptfläche größtenteils weiß und schwarz sind und nicht sehr viele Farben beinhalten. Dabei lassen sich keine direkt Qualitätseinbußen erkennen.
Aus diesem Grund werde ich noch einen weiteren Test, mit einem normalen Foto machen. An diesem Beispiel lassen sich die Qualitätsunterschiede sichtbar erkennen.
Und wieder die altbekannte Frage an Dich, welches Bild würdest Du von der Datengröße kleiner einschätzen?
Lösung:
Reihe 1) JPG Qualität 100% => 644KB | JPG Qualität 70% => 231KB
Reihe 2) JPG Qualität 30% => 88KB | GIF 256 Farben => 405KB
Reihe 3) PNG 24bit => 1,1MB | PNG 8bit => 394KB
In der ersten Reihe lassen sich eigentlich keine Unterschiede erkennen. Jedoch ist die Größe der Bilder mehr als halbiert.
In der zweiten Reihe ist natürlich das JPG Bild mit 30% der absolute Knüller, mit 88KB ist dieses Bild für seine Maße wirklich klein. Dennoch ist der Qualitätsverlust sehr deutlich sichtbar. Im Bereich des Himmel bilden sich Artefakte, außerdem verschwimmt das Etikett und wird unscharf, so dass der Betrachter den Schriftzug darauf nicht mehr lesen kann. Bei dem 8bit PNG und dem GIF Bild ist es sehr ersichtlich, dass man an dieser Stelle mit 256 Farben nicht weit kommt. Es ist zu beobachten, dass die Bilder sich sehr ähnlich verhalten und das sie sich farblich im Bereich des Himmels verändern.
Über das PNG 24bit Bild brauche ich wohl kaum etwas sagen, mit 1,1MB ist das Bild nicht Web tauglich.
Mit diesen 3 Tools kannst Du deine Bilder noch zusätzlich optimieren und noch einige weitere KB’s einsparen.
ImageOptim – PNG Komprimierung
Ich möchte Dir ein cooles Tool für den Mac vorstellen.
Mit ImageOptim kannst Du PNG Dateien stark verkleinern. Dabei ziehst Du dein Bild einfach in das Programm und ImageOptim führt die Optimierung der Bilder aus. Je nach Größe des Bildes lässt sich hier noch einiges an Datengröße reduzieren.
JPEGmini
Mit JPEGmini lässt sich die Größe von JPG Bildern reduzieren. Ich habe hier einen interessanten Artikel mit einem Vergleichen gefunden. Diesen kostenlosen Dienst kann ich persönlich nur weiterempfehlen. Schau ihn Dir doch ruhig einmal an.
Hier findet du den ausführlichen Artikel von Stefan über JPEGmini
Yahoo Smush It
Ein ähnlichen Dienst bietet außerdem Yahoo an. Hier können auch JPG Bilder hochgeladen werden, diese werden komprimiert und anschließend lässt sich die optimierte Version herunterladen. Auch hier ist das Ergebnis verblüffend.
EDIT 26.10.2012
Heute in der T3N gesehen! TinyPNG ist ein Anbieter bei dem man online seine PNG Bilder optimieren kann. Sieht sehr gut aus! 🙂
Anbei der Link zum T3N Artikel: https://t3n.de/news/tinypng-bilder-wenig-421853/
Fazit:
An Bildoptimierung kommt heutzutage keine Internetseite mehr vorbei, denn allein wegen des massiven Zuwachses der Mobilensufer, sollte man sich die Mühe machen und die Grafikengröße reduzieren oder komplett durch CSS3 ersetzen. Besonders wenn es nicht möglich ist, für diese Nutzergruppe eine optimierte Handyversion bereitzustellen.
Allein mit der Photoshop Speicherfunktion, lassen sich sehr gute Ergebnisse erzielen und man kann so einiges für eine schnelle Internetseite tun. Hierbei musst Du lediglich beachten, dass, je nach Komprimierungsfaktor der Bilder, Fehler in Form von Artefakte entstehen. Aber eine Komprimierung von 60-70 % ist meistens kaum zu erkennen und daher umsetzbar.
Freunde der Suchmaschinenoptimierung wissen schon lange, das Google die Geschwindigkeit der Internetseite als Rankingfaktor mit in die Platzierung der SERPs einbezogen hat. Was ich persönlich sehr gut nachvollziehen kann, weil es nichts ärgerlicheres gibt , als langes Warten auf das Laden einer Internetseite.