Lange Ladezeiten von Webseiten stehen häufig in einem direkten Zusammenhang mit viel zu großen Bilddaten. Moderne Content Management Systeme wie TYPO3 oder WordPress können Bilder verkleinert ausgeben. Doch sollte man aus verschiedenen Gründen auf die Bildgrößen und Bildformate bei der Erstellung seiner Webseite achten.
Der Speicherplatz
Internetauftritte sind, in Abhängigkeit des genutzten Webhostingpakets, in der Regel auch immer an ein bestimmtes Kontingent gebunden – dem Speicherplatz. Günstige Digitalkameras mit immer größeren Auflösungen verleiten gerne dazu, Bilder in ihrer ursprünglichen Qualität im Netz bereitzustellen. So kann heute ein Bild von Hand mit einer Auflösung von 4600 x 2600 gut über 5 Megabyte (MB) Speicherplatz verwenden.
Doch werden diese Bilddaten in den meisten Fällen niemals vom Nutzer abgerufen. Dargestellt wird das Bild im Netz dann vielleicht in einer Größe von 250 x 140 Pixel und benötigt nur noch wenige Kilobyte.
Selbst wenn wir das Bild so anlegen wollen, dass der Nutzer es durch Anklicken vergrößern kann, reichen für eine qualitativ gute Darstellung oft schon Bildgrößen von 800×600 Pixel aus. Diese liegen in dem meisten Fällen schon um die 1 Megabyte. Somit hätten wir schon mit einem Bild 4MB auf dem Server an Platz und an Datentransfer gespart.
Grafikformate
Für das Web stehen verschieden Grafikformate mit unterschiedlichen Anwendungsfällen zur Verfügung. Nicht immer ist es sinnvoll alle Bilder im gleichen Format abzuspeichern.
Das JPG Format eignet sich besonders für Personen- und Landschaftsaufnahmen. Mit seiner verlustbehafteten Komprimierung wird das Bild aber mit jedem Abspeichern schlechter und sogenannte Artefakte (Pixelblöcke) schleichen sich in das Bild ein.
Das GIF Format war dafür beliebt, dass wie bei einem Daumenkino kleinere Animationen (animated gif) im Web dargestellt werden konnten. Das Format erlebt zur Zeit wieder eine Renaissance durch die Cinemagraphs.
Die Möglichkeiten transparente Flächen zu enthalten, werden heute von dem PNG Format weitaus besser gelöst. Leider neigt besonders das PNG24 Format gerne dazu größere Dateien zu erzeugen als mit dem JPG Format.
Sofern die in PNG24 zur Verfügung stehende Halbtransparenz nicht verwendet wird, bietet sich die Verwendung des JPG Formates eher an.
JPG | GIF | PNG8 | PNG24 | SVG | |
|---|---|---|---|---|---|
Farben | 16,7 Mio | 256 | 256 | 16,7 Mio | 16,7 Mio |
Transparenz | nein | Einfache Transparenz | Einfache Transparenz | ja | ja |
Verlustfrei | nein | ja | ja | ja | ja |
Farbverläufe | ja | nein | nein | ja | ja |
Animation | nein | ja | nein | nein | ja |
Verwendung | Fotos | Animation, Grafiken, Icons, transparente Bilder | Grafiken, Icons, transparente Bilder | Grafiken, Icons, transparente Bilder | Grafiken, Icons, transparente Bilder, Vektorbasiert, responsive |
Bilder bei der Suchmaschinenoptimierung
Durch die Bildersuche in den Suchmaschinen sind die auf der Webseite eingesetzten Bilder auch zu einem Faktor in der Suchmaschinenoptimierung geworden.
Google ist mittlerweile in der Lage textliche Inhalte in Bildern auszulesen. Dennoch kann im einzelnen bei der Bildbearbeitung noch einiges für die Suchmaschinenoptimierung getan werden.
Bildname
Im Internet eingesetzt Bilder sollten mit lesbaren, beschreibenden Dateinamen versehen werden. Eine Datei mit dem Namen „typo3-webagentur-hannover.png“ bietet der Suchmaschine weit mehr Informationen als ein „dcim20160312-400006.jpg“.
Metadaten
Das Bildformat JPG unterstützt die Hinterlegung von Textinformationen innerhalb der Bilddatei.
Exif – Kamera-Informationen und Geodaten
IPTC – Informationen zur Veröffentlichung und Katalogisierung
XMP – Informationen zur Veröffentlichung und Katalogisierung
PNG-Dateien können zwar mit Metadaten versehen werden, unterstützen aber keins der oben genannten anerkannten Formate. Hier handelt es sich aber sicherlich um den „Königsweg“ der Suchmaschinenoptimierung, bei dessen Aufwand in der Bearbeitung aktuell das Ergebnis nicht rechtfertigt.
Bildgrößen für Facebook und Co
Soziale Netzwerke wie Facebook, Pinterest, Snapchat oder Twitter sind in der aktuellen Marketingstrategie von Unternehmen ein wichtiger Kanal geworden. Hier kommt Bildern eine besondere Bedeutung zu. Werden doch Beiträge mit Bildern weitaus häufiger angeklickt als solche ohne.
Hier ist es angebracht sich der META Information zu bedienen, die von den Netzwerken bereitgestellt werden. Hier hat sich besonders das von Facebook initiierte Opengraph Format durchgesetzt. So kann ein eigenständiges Bild zu jeder Seite hinterlegt werden. Diese Bilder werden dann beim Teilen der Seite auf den Netzwerken für die Vorschauanzeige bevorzugt.
Die aktuellen Bildgrößen für Sharing Grafiken auf den verschiedenen Netzwerken sind regelmäßig Thema verschiedenster Blogbeiträge. Hierzu hilft ein Suche über die bekannten Suchmaschinen.
https://duckduckgo.com/?q=social+media+bildgr%C3%B6%C3%9Fen&t=ffsb&iax=1&ia=images
Bildbearbeitungsprogramme
Adobe Photoshop ist mit Sicherheit das bekannteste Bildbearbeitungsprogamm. Doch muss überlegt werden, ob dieser Grafikbolide mit all seinen Funktionen und der zugegebenermaßen nicht eben günstigen Preisgestaltung für das Verkleinern oder die Ausschnittswahl das richtige Programm ist.
Wir empfehlen hier das kostenfreie Programm GIMP das auf allen bekannten Betriebssystemen lauffähig ist und die wichtigsten Werkzeuge zur Bildbearbeitung mitbringt.
Markus Söth
Vom Kaufmann über die Landschaftsarchitektur gestalte ich nun den großen Garten des Internets. Für die VisionConnect GmbH arbeite ich im Webdevelopment Bereich an den Möglichkeiten und Visionen des digitalen Zeitalters. Für Marketing und Innovation bin ich immer zu haben und stehe mit meinen Erfahrungen unseren Kunden bei ihren Projekten zur Seite.