Kontrast
Dierekt zum Inhalt
VisionConnect Blog / Design

Bilder im Web

13. Juli 2016
Bilder im Web

Lange Ladezeiten von Webseiten stehen oft in einem direkten Zusammenhang mit zu großen Bilddaten. Tipps, wie Sie Ladezeiten und Speicherplatz reduzieren.

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.

www.gimp.org

Über den/die Autor*in

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.
Mehr Beiträge im VisionConnect-Blog

… passend zum Thema.