Bilder optimieren fürs Web

Wie du Bilder richtig abspeicherst!

Das ewige Bild-Dilemma: Bildqualität vs. Ladezeit. Und natürlich kommt es auf die Größe an!

Das richtige Bild spricht mehr als 1.000 Worte!

Bilder optimieren fürs Web

Lange Ladezeiten braucht und will niemand! Wer seine Seitenbesucher und Interessenten ewig warten lässt, wird dafür bestraft. Die ersten Zeichen einer Website sollen möglichst rasch zu sehen sein. Nicht zuletzt wird eine schnelle Ladezeit mit guten Rankingeffekten in den Suchmaschinen belohnt.

Nun kann man es sich einfach machen und keine oder nur kleine Bilder verwenden. Ist in Zeiten von HD, 4k ja sogar 8k Auflösungen mit Pixelanzahlen jenseits von 2.000 irgendwie doch keine Lösung. Denn wir Menschen sind visuelle Wesen und nehmen Bildinformationen um ein Vielfaches schneller auf, als gelesene Informationen. Ein Bild schafft es erheblich schneller in unsere Wahrnehmung. Es braucht jedoch mehr Speicherplatz und mehr Bandbreite als Text … das Dilemma ist perfekt!

Bildinhalte fürs Web optimieren

Größtmögliche Qualität bei kleinstmöglicher Bildgröße lautet daher der Drahtseilakt, dem sich Webhosts täglich aufs Neue stellen müssen. Schließlich ist die Bildqualität für den Nutzer oft gleichbedeutend mit der Qualität der Webseite im Allgemeinen. Wie also funktioniert das richtige Optimieren und Komprimieren?

Dateiformat, Dateigröße und Bildgröße

Beginnen wir mit ein paar Grundbegriffen! Profis unterscheiden bei der Optimierung Ihrer Bilder und Grafiken zwischen: Dateiformat, Dateigröße und Bildgröße.

Die Dateiformate

Als Dateiformat/Dateityp wird die Art und Weise bezeichnet, wie das Bild abgespeichert wird. Auf Windows-Rechnern einfach an der Dateiendung zu erkennen. Hier gibt es 3 Hauptformate und ein neues Format die als Webformat für Bilder in Betracht kommen: .jpg, .png, .gif und .webp

Das meistgenutzte Format ist das JPG oder auch JPEG (Joint Photographic Experts Group). Es verfügt über ein sehr hohes Farbspektrum (16,7 Millionen Farben) und wird daher gerne für Fotografien verwendet. JPG lassen sich zudem sehr gut komprimieren, eignen sich jedoch nicht für die Darstellung von scharfen Kanten, großen Farbflächen oder Text. Transparenzen sind im JPG ebenfalls nicht darstellbar. Achtung! JPG wendet ein Kompressionsverfahren an, das bei jedem Speichervorgang angewendet wird. Das bedeutet, dass bei jedem neuem Speichervorgang erneut Bildinformationen verloren gehen. Gut geeignet ist JPG für Bilder, die viele Farben, viele Übergänge und Verläufe beinhalten.

Das GIF (Graphics Interchange Format) verfügt nur über ein geringes Farbspektrum von 256 Farben, was bei Fotos oft unnatürlich wirkt. Dennoch hat es einen entscheidenden Vorteil: Es kann Bilder animieren. Das Format ist daher besonders für Animationen und kleine Grafiken geeignet. Ein weiterer Vorteil von GIF ist die Möglichkeit, Transparenzen darzustellen. Gut geeignet ist GIF für Bilder, die wenig Farben, kaum Übergänge und scharfe Kanten aufweisen.

PNG: Für große Farbflächen und scharfe Kanten ist PNG (Portable Network Graphic) das geeignetste Format. Die Bildkomprimierung im PNG wird jedoch dadurch bewerkstelligt, dass es die Menge der verwendeten Farben reduziert. Je stärker also ein Bild komprimiert ist, desto kleiner wird auch das Farbspektrum. Allerdings ist das PNG in der Lage, Bilder mit transparentem Hintergrund zu erzeugen, was es für Grafiken und Freisteller im Web prädestiniert. PNG kann als JPG mit Transparenz verstanden werden. Hast du bspw. einen runden Bildinhalt, also Teile im rechteckigen Bild, die durchsichtig sein müssen, dann ist das ein Fall für PNG.

Die Formate im Überblick:

  • Format
  • Verlustfrei
  • Transparenz
  • Animation
  • Einsatzzweck
  • JPEG
  • nein
  • nein
  • nein
  • Bilder mit Verläufen, vielen Farben, z.B. Fotos
  • GIF
  • ja
  • eine Farbe
  • ja
  • bewegte Bilder
  • PNG
  • ja
  • ja
  • nein
  • Bilder mit Verläufen, vielen Farben (z.B. Fotos), Icons und Transparenz
  • webp
  • tbd
  • tbd
  • tbd
  • tbd

Vom „World Wide Web“ zum „Wait Wide Web”

Die Dateigröße legt fest, wie viel Speicherplatz ein Bild verbraucht. Die Bildgröße beschreibt hingegen die Anzahl der Pixel. Je mehr Pixel, desto größer das Bild. Je mehr Pixel pro Zentimeter, desto höher die Auflösung. Dateigröße, Bildgröße und Informationsdichte sind also stark voneinander abhängig.

Die meisten Bilder, die direkt aus der Kamera kommen, sind unskaliert mehrere tausend Pixel groß. Einer Webseite reicht meist die Darstellung von HD – also 1.920px. Deshalb hat sich (derzeit) für Webbilder, die im Fullscreen-Modus verwendet werden eine Standardgröße von 1920 x 1280 Pixel (HD) etabliert. Des weiteren hat man sich über die Jahre auf die Abspeicherung auf in 72 dpi (dots per inch, eigentlich ppi= pixel per inch), zu achten. Standardmäßig sind die meisten Bilder mit 300 dpi abgespeichert, einer gängigen Abspeicherung für Druck.

ABER das Web kennt doch keine dpi!

Richtig: Sämtliche Bildschirmausgabe-Programme, etwa Browser ignorieren DPI-Angaben und bilden ein Bild-Pixel immer auf ein Bildschirm-Pixel ab. Allerdings benötigen Layout-Programme wie Indesign oder Illustrator eine Größenangabe zum Abspeichern. Die 72 dpi haben sich defacto-Standard und “Ersatzwert” etabliert.

Wie funktioniert Bildkomprimierung

Das gängigste Bildbearbeitungsprogramm ist Photoshop. Allerdings ist es ein kostenpflichtiges Profi-Programm, das Sie nicht zwangsweise kaufen müssen, wenn Sie nur hie und da ein Bild bearbeiten möchten. Als Gratisprogramme haben sich beispielsweise IrfanView oder die Windows-Freeware Paint.NET oder Microsoft Paint 3D für Windows 10 etabliert.

Im Endeffekt funktionieren auch fast alle Programme gleich. Entweder Sie haben die Möglichkeit unter “Bild” bei “Bildgröße” Änderungen vorzunehmen oder/und Sie klicken auf „Datei“, „Exportieren“ und „Für Web speichern“. Wichtig: Speichern Sie das Bild anschließend unter einem anderen Namen ab, damit Ihnen das Originalbild erhalten bleibt. Wenn’s schnell gehen soll, kann man auch mit kostenlosen Kompression-Programmen wie tinypng oder compressor brauchbare Ergebnisse erzielen.

Fazit: Die richtige Bildgröße spart Ladezeit

Ohne Bilder wäre das Web ziemlich langweilig und auch ziemlich schnell. Bilder verursachen viel Datentransfer und belasten somit das Internet. Optimiert (verkleinert) man sie, hilft man dabei die Datenmengen zu reduzieren. Sowohl auf diversen Servern, Webhosts, Mailclients und Broser-Caches als auch im Internet. Optimierst du die Bilder auf deiner Website haben alle etwas davon. In erster Linie du und deine Seitenbesucher. Du wirst mit besseren Rankings (aufgrund schnellerer Ladezeiten belohnt) und der Seitenbesucher bekommt schneller seine Wunschseite angezeigt.

Sie haben Fragen oder Ergänzungen zum Artikel oder wollen Ihre Inhalte optimieren, dann sind Sie bei uns richtig.

 Quellen: beesign.com