Grafiken auf der Homepage 

Haben Sie sich auch schon des öfteren über lange Ladezeiten einer Seite gewundert (wie z.B. von dieser!)? Natürlich liegt das auch manchmal an der Netzauslastung, an der Leitung oder am Server.

Eine der häufigsten Ursachen aber  für lange Ladezeiten von einzelnen Seiten ist der nachlässige Umgang mit Grafiken. Dabei gibt es gerade hier jede Menge Möglichkeiten zur Optimierung, wenn man ein paar Tatsachen zu diesem Thema im Kopf behält. 

 
  • Eine Bildauflösung, die höher als etwa 95 dpi ist, verschwendet nur Speicher, da eine Wiedergabe am Bildschirm mit höherer Auflösung nicht möglich ist.
  • Bilder größer als die geplante Wiedergabe hochzuladen, ist ebenfalls Verschwendung. Soll das Bild 200 x 100 Pixel werden, so laden wir das Bild auch nur in dieser Größe und zwingen es nicht erst über den HTML-Code auf die richtige Höhe und Weite.
  • Auch die Farbtiefe spielt eine Rolle. Oft genügen 256 Farben oder sogar weniger, GIF-Bilder erlauben sogar max. 256 Farben.
  • Zur optimalen Kompression von JPG-Bildern sollte man spezielle Tools einsetzen, die die Möglichkeiten von JPG maximal ausnutzen. Standard Grafik-Programme sind hier nicht immer ausreichend.
 

An einem Beispiel: 

Ausgangsbasis ist ein digitales Foto oder ein gescanntes Bild mit folgenden Daten: 

135 x 101 mm oder 
640 x 480 Pixel 
120 dpi Auflösung 
24 Bit Farbtiefe RGB 
im Format Windows-Bitmap (BMP) 
ergibt 921 Kilo-Byte 
 

Das Bild sieht in etwa so aus: 

 
Original: 921 Kilo-Byte
 
 
 
Nun beginnen wir mit der Optimierung: 

Als erstes: die Auflösung wird von 120 dpi auf 95 dpi reduziert. Das Bild ist jetzt nur noch 570 Kilo-Byte groß. 

Bildgröße. Das Foto soll auf dem Bildchirm in einer Breite von 300 Pixel wiedergegeben werden (so groß wie das oben abgebildete 'Original'). 
Zuvor jedoch entscheiden wir uns, ob überhaupt das ganze Bild abgebildet werden soll. In diesem Fall entscheiden wir uns für einen Ausschnitt und beschneiden das Foto im Bildbearbeitungsprogramm auf den gewünschten Ausschnitt. 

Dies reduziert die Bildgröße bereits auf 410 Kilo-Byte. 

Nun reduzieren wir die Bildgröße auf 300 Pixel Breite. Ergebnis: 207 Kilo-Byte.
 
Als nächstes reduzieren wir die Farbtiefe auf 256 Farben: 
Obwohl nur noch 256 Farben: kaum ein Unterschied,
aber nur noch 70 Kilo-Byte.
Obwohl wir uns immer noch im Windows-Bitmap-Format befinden, ist das Foto jetzt bereits um über 90 Prozent kleiner.
 
 
Jetzt wird in JPG-Format umgewandelt.  
Das Ergebnis: 11 KB ( = 1,2 Prozent vom Original)
 
Ich benutze dazu den JPEG-Optimizer* (Shareware). Hier läßt sich die Komprimierung mit einem Schieberegler einstellen, wobei gleichzeitig das Ergebnis angezeigt wird. Und zwar das Ergebnis als Bild und die neue Dateigröße in Byte. So kann man am Bildschirm beurteilen, ob die Qualität noch den Erwartungen entspricht.
Dieses Bild ist bis auf 11 KB komprimiert, das darüber auf 16 KB.
Wir erinnern uns, das Original hatte 921 KB. Hätte man dieses Bild nur einfach als JPG abgespeichert, wäre eine Bildgröße von ca 40 KB entstanden.
Der Aufwand lohnt sich: ich klicke oft von Seiten weg, wenn der Ladevorgang wegen überdimensionaler Bilder elend lang dauert - und wer will das schon?
*Den JPEG-Optimizer können Sie hier herunterladen.
Die Shareware ist voll funktionsfähig. Registrierung kostet 29 $.
 
Zurück zur Übersicht Tips und Tricks