smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Website beschleunigen: 2. Grafiken optimieren

27. September 2012
Stephan
Website beschleunigen - Tipps für eine schnellere Website

Gerade die Dateigrößen von Grafiken können zum Teil sehr groß ausfallen und so das Laden eurer Website verlangsamen. Aus diesem Grund solltet ihr die Grafiken auf eurer Website immer optimieren, um kleinere Dateigrößen und kürzere Ladezeiten zu erhalten.

So geht es in diesem Teil der Artikel-Serie „Website beschleunigen“ um die Optimierung von Grafiken und was ihr bei deren Verwendung beachten solltet.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel der Artikel-Serie „Website beschleunigen“:

  1. Reduzierung von HTTP-Requests
  2. Grafiken optimieren
  3. Browser-Caching
  4. Gzip-Komprimierung
  5. Code minimieren & optimieren
  6. Tipps für WordPress
  7. Sonstige Performance-Tipps

Das richtige Grafikformat

Generell solltet ihr eure Grafiken in einem der folgenden Formate abspeichern:

PNG, JPEG oder GIF

Dieses Thema wird auch in dem von Google veröffentlichten „Performance Best Practices“-Guide näher erläutert. So sollten laut Google folgende Regeln beachtet werden:

  • PNG ist bevorzugt einzusetzen und vor allem GIF vozuziehen
  • GIF nur für sehr kleine und einfache Grafiken (kleiner 10x10px oder Farbpalette mit weniger als 3 Farben) und für Animationen verwenden
  • JPEG für fotografische, naturgetreue Bilder/Fotos
  • definitiv kein BMP oder TIFF einsetzen

Grafiken optimieren

Um eure Grafiken zu optimieren gibt es verschiedene Möglichkeiten.

Mit Optimierung von Grafiken ist im Allgemeinen die Reduzierung der Dateigrößen von Grafiken gemeint.

Zum einen kann es sein, dass das Grafikbearbeitungsprogramm eurer Wahl Einstellungsmöglichkeiten zum Abspeichern von optimierten Grafiken anbietet.

Beispielsweise kann in GIMP beim Abspeichern von JPEG-Grafiken angegeben werden, mit welcher Qualität die Grafik abgespeichert werden soll.

Dabei gilt: je geringer die eingestellte Qualität, desto geringer die Dateigröße der Grafik.

Bei JPEG-Grafiken hat sich z.B. eine Qualität zwischen 80-90% bewährt. Im Endeffekt hängt es aber natürlich immer von der zu optimierenden Grafik ab.

Zum anderen gibt es spezielle Tools zum Optimieren von Grafiken, wie z.B. OptiPNG. OptiPNG dient, wie der Name bereits vermuten lässt, zum Optimieren von PNGs.

Dazu mal ein kleines Beispiel zur Demonstration:

Original PNG – ~18,1kb

Unoptimierte PNG-Grafik

PNG mit OptiPNG optimiert – ~16,1kb

Mit OptiPNG optimierte PNG-Grafik

In diesem Beispiel konnte die Dateigröße um ca. 10,8% reduziert werden. Das klingt im ersten Moment zwar nicht viel, macht aber bei mehreren Grafiken schon einiges aus.

Beim Einsatz von JPEG-Grafiken macht sich die Optimierung meistens noch stärker bemerkbar:

Original JPEG – Qualität 100% – ~48,9kb

Unoptimierte JPEG-Grafik

JPEG – Qualität 85% – ~12,3kb

Mit GIMP optimierte JPEG-Grafik

Ohne einen allzu sichtbaren Qualitätsverlust zu haben, konnten wir alleine durch die Minderung der Qualität eine deutliche Reduzierung der Dateigröße erreichen. Im Gegensatz zu PNG-Grafiken macht hier eine Optimierung also noch mehr Sinn.

Neben Offline-Tools gibt es auch einige Online-Tools zum Optimieren von Grafiken. Guido hat in seinem Blog z.B. über das Tool Kraken berichtet und festgestellt, dass es Grafiken schnell und vor allem gut optimiert.

Breite und Höhe immer angeben

Damit der Browser die Maße (Breite & Höhe) einer Grafik nach dem Laden nicht selbst noch berechnen muss, solltet ihr diese immer direkt angeben:

Schlecht

<img src="example.png" />

Gut

<img src="example.png" width="300" height="200" />

Grafiken nicht durch Browser skalieren lassen

Aus Performancegründen solltet ihr eingebundene Grafiken nicht durch den Browser skalieren lassen. Das passiert genau dann, wenn ihr eine Grafik habt dessen Abmaße nicht mit denen im HTML angegebenen übereinstimmen.

Nehmen wir an, wie haben z.B. eine 500x400px große Grafik und binden sie so ein:

<img src="example.png" width="200" height="100" />

In diesem Fall muss der Browser die Grafik von 500x400px zu 200x100px skalieren.

Grundsätzlich solltet ihr also eure Grafiken immer in der Größe bereitstellen, in der sie auch benötigt und angezeigt werden. Gerade beim Runterskalieren von Grafiken ist es so, dass ja trotzdem die komplette Grafik geladen wird. Es wird also unnötigerweise eine Grafik mit größerer Dateigröße geladen als benötigt.

Fazit

Wenn ihr viele unoptmierte Grafiken auf eurer Website eingebunden habt, dann solltet ihr diese unbedingt optimieren. Mit den hier vorgestellten Tipps sollte eure Website somit auf jeden Fall um einiges schneller laden.

Ein weiterer Tipp in Bezug auf die Optimierung von Grafiken ist der Einsatz von CSS-Sprites. Mehr Informationen hierzu findest im ersten Teil dieser Artikel-Serie zum Thema „Reduzierung von HTTP-Requests“.

Kennt ihr noch weitere Tipps, Tools etc. zum Optimieren von Grafiken?

Kommentare  
8 Kommentare vorhanden
1 Emanuel schrieb am 28. September 2012 um 00:29 Uhr

Ich möchte in Zukunft auch mehr mit Bildern arbeiten. Tolle Tipps. Auf manchen Seiten sind die Ladezeiten wirklich recht lang.

2 Felix schrieb am 30. September 2012 um 14:31 Uhr

Hallo,

ich muss zugeben, dass mich deine komplette Artikelserie sehr beeindruckt hat. Dieser Artikel ist jedoch meiner Meinung nach der Beste, da sich nach wenigen Zeilen der komplette Informationsbedarf gedeckt hat.

Besonders gut finde ich dein Beispiel, an dem man erkennen kann, dass der Qualitätsverlust zu kompensieren ist 🙂

3 Stephan L. schrieb am 30. September 2012 um 20:24 Uhr

Hallo Felix,

danke für dein Kommentar und dein positives Feedback!

Ja, an dem JPEG-Beispiel sieht man wohl am besten, wie viel Einsparpotenzial bei der Dateigröße doch eigentlich vorhanden ist und ohne, dass wirklich ein sichtbarer Qualitätsverlust erkennbar ist.

Ich hoffe du schaust ab und an mal wieder vorbei, da die Artikelserie ja noch lange nicht zu Ende ist. 😉

Grüße Stephan

4 Emanuel schrieb am 2. Oktober 2012 um 16:19 Uhr

Ich versuche auch gerade mehr Bilder für meine Webseite zu verwenden. Habe bilslang nur Videos dafür genommen. Die Videos will ich beibehalten, da die Besucher der Webseite länger bleiben aber noch ein paar Bilder im Text wären auch nicht schlecht. Ich will aber auch nicht, das meine Seite zu lange Ladezeiten hat. Stuper Tipps und schöne Idee für einen Blogbeitrag.

Grüße Emanuel

5 Stephan L. schrieb am 2. Oktober 2012 um 16:39 Uhr

Hallo Emanuel,

freut mich wenn dir die Tipps was bringen!

Im nächsten Teil gehe ich dann auch auf Browser-Caching ein, so dass z.B. die Grafiken/Bilder nicht immer erneut vom Server geladen werden müssen. Das könnte für dich dann auch noch interessant sein, falls du es nicht sowieso schon nutzt (Stichwort: Expire-, Last-Modified-Header).

Grüße Stephan

6 Jonas Geldschläger schrieb am 3. Oktober 2012 um 19:29 Uhr

Habe auch in den letzten Tagen ein wenig mit den gängigen Chache-Plugins herumgespielt und bin gleichermaßen von den Ergebnissen überrascht, auch wenn mit Sicherheit noch jede Menge Potential verborgen liegt.

Allerdings würde mich in diesem Kontext vor allem das Nutzen von Sprites interessieren, da ich, gelinde gesagt, einfach „zu blöd“ bin, das richtig und gezielt umzusetzen, jedenfalls „großflächig“.

beste Grüße 🙂

7 Jonas Geldschläger schrieb am 3. Oktober 2012 um 19:31 Uhr

Sehe gerade, dass das ja schon im ersten Teil behandelt wurde. Schaue mir das also vorab an, bevor ich „fordere“ 🙂

beste Grüße

8 Stephan L. schrieb am 3. Oktober 2012 um 21:45 Uhr

Hey Jonas,

ja, über CSS-Sprites habe ich im ersten Teil bereits etwas geschrieben, weshalb ich das in diesem Artikel nicht noch mal wiederholen wollte.

CSS-Sprites passen halt irgendwie zu beiden Aspekten – sowohl zu HTTP-Requests reduzieren als auch zu Grafiken optimieren.

Da ich auf CSS-Sprites jetzt aber nicht allzu tiefgründig eingegangen bin, hier noch zwei weiterführende Quellen (jedoch englischsprachig):

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Beste Grüße

Stephan

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!