[Teil 5] Die Website-Geschwindigkeit: Bilder im Blog optimieren!

Heute möchte ich wieder einmal meine Artikelserie zur Website-Geschwindigkeit fortsetzen und dieses Mal einen Blick auf die Bilder im eigenen Blog werfen.

Bilder werden häufig verwendet, um eine Seite oder einen Blog optisch aufzuwerten und außerdem lockern sie unsere Texte auf.

Zeitweise dienen sie als Eyecatcher und können manchmal die Komplexität eines Sachverhalts enorm vereinfachen. Deshalb benutze ich jede Menge Bilder.

Dafür nutze ich Infografiken, male in Screenshots herum oder suche mir kostenlose Icons aus dem Internet zusammen.

Doch gibt es ein paar Dinge, die man beim Verwenden von Bildern im eigenen Blog beachten sollte…

Die Website-Geschwindigkeit: Welches Bildformat?

Geschwindigkeit ist das A und OBilder können einen enormen Anteil beim Laden einer Seite haben, das einmal vorweg.

Ich selbst nehme es dabei nicht immer so genau, da ich voraussetze, dass mittlerweile überall Breitband-Internet zu Verfügung steht. Auch wenn das nicht immer stimmt.

Dennoch kann man bei der Wahl des richtigen Formats schon einen erheblichen und auch spürbaren Unterschied im Seitenaufbau bewirken. Deshalb sollten Bilder in diesen Formaten genutzt werden: GIF, JPEG oder PNG.

Diese Formate sind kleiner und somit recht schnell geladen. Doch werfen wir noch einen Blick auf die Eigenschaften der einzelnen Elemente.

GIF:

Das Kürzel steht für Graphics Interchange Format und ist seit jeher mit der Entwicklung des Internets verwoben. Das Problem an diesem Format ist die geringe Farbtiefe, weshalb lediglich 256 verschiedene Farben pro Einzelbild genutzt werden können. GIFs sind also keine Ressourcenfresser, denn im direkten Vergleich mit JPGs können eben nicht Millionen Farben genutzt werden.

Dafür bieten sie sich allerdings bei schlichten Dingen an, wie etwa Buttons, simplen Schriftzügen und natürlich sind sie auch für Animationen die erste Wahl.

JPEG:

Die Buchstaben stehen für Joint Photographic Experts Group und sind, wenn man es vereinfacht, die beste Wahl für aufwändige Arbeiten. Aufgrund der DOS-Beschränkung auf dreibuchstabige Dateiextensionen hat sich das Kürzel JPG eingebürgert. Das klare Merkmal dieses Formats ist die hohe Vielfalt an Farben, die es darstellen kann. Immerhin 16,7 Millionen.

Aufgrund der hohen Kompressionsrate sollte man bei harten Übergängen im Foto abwägen, bei weichen ist das Format allerdings empfehlenswert und sollte für aufwändige, farbprächtige Bilder im Internet genutzt werden.

PNG:

PNG steht für Portable Network Graphics. Das Format wurde speziell für das Internet entwickelt und letzten Endes das GIF-Format ablösen. Der markante Unterschied ist hierbei, dass es im Gegensatz zu diesem 24-Bit dargestellt werden können. Auch die Kompressionsrate ist meistens besser.

Ein weiterer Aspekt, der das PNG-Format auszeichnet, ist natürlich die Transparenz eines Bildes, die mittels Alphakanal überliefert werden kann. Leider gibt es immer noch ältere Browser, die Probleme bei der Darstellung des Formats haben.

Empfehlenswert ist die Verwendung von PNG dann, wenn ein Bild die Farbtiefe einer GIF-Datei sprengt, also mehr als 256 Farben benötigt.

Das Bildformat fürs Internet – Das war’s?

Natürlich gibt es noch unzählige Bildformate, die man verwenden kann. Dennoch bieten sich diese drei förmlich an und sind bei richtigem Einsatz maßgeblich am Seitenaufbau einer Seite beteiligt.

Hierbei denke ich allerdings, dass man nicht unbedingt das volle Potential herauskitzeln muss. Ich nutze beispielsweise fast ausschließlich das Format PNG und in seltenen Fällen GIF. Auch wenn die genannten Punkte manchmal dagegen sprechen.

Solange wir allerdings auf enorm gigantische Formate á la BMP verzichten und uns grob an diesen Richtlienien orientieren, kann das jede Menge bewirken. Außerdem möchte ich an dieser Stelle noch ein kleines Tool empfehlen.

Nämlich den Online Image Optimizer. Dieser optimiert die drei Formate für den Gebrauch im Internet und bietet außerdem noch die Möglichkeit, einzelne Bildformate schnell und problemlos zu konvertieren.

1 Meinung

  1. Sehr hilfreicher Beitrag. Vielen Dank für die Anregungen!