Optimale Bildgrößen für Websites
Hochauflösende Bilder steigern die Attraktivität einer Website. Allerdings ist eine hohe Pixelanzahl nicht immer vorteilhaft. Welche Bildgrößen optimal sind und wie du Bilder für deine Website komprimierst, erklärt dieser Artikel.
Bildgrößen im Web – warum sie eine Rolle spielen
Qualitative Fotos sind hochauflösend. Egal, ob eigene Aufnahmen oder Stockfotos aus dem Internet – es ist nicht selten, dass Bilder über 3000px (Pixel) in der Breite und in der Höhe messen. Das ist auch generell nichts Schlechtes. Allerdings kann die Verwendung hochauflösender Bilder auf Websites dazu führen, dass Nutzer*innen die Seite verlassen.
Denn je mehr Pixel ein Bild hat, desto größer ist die Bilddatei, die auf das Endgerät der Websitebesucher*innen heruntergeladen wird. Und auf sehr vielen Seiten, zum Beispiel in Onlineshops oder auf Nachrichtenseiten, werden jede Menge Fotos benutzt. Es gibt also jede Menge Daten, die Nutzer*innen laden müssen, weshalb Bilder für Websites im Hinblick auf ihre Größe angepasst werden sollten.
Auswirkungen auf die Ladegeschwindigkeit
Da eine schnelle Internetverbindung nicht an jedem Ort gewährleistet ist, kann es zum klassischen Fall von „Die Website lädt nicht“ kommen, wenn viele große Bilder geladen werden müssen. Einem Artikel von Google zufolge, verlässt der*die typische Benutzer*in eine Seite nach drei Sekunden, wenn die gewünschten Inhalte nicht angezeigt werden können – und niemand möchte Nutzer*innen oder potenzielle Kund*innen verlieren. Daher ist es ratsam, die Bilder hinsichtlich ihrer Dateigröße zu minimieren, um die Ladegeschwindigkeit zu optimieren.
Messung der Ladegeschwindigkeit
Der Service „PageSpeed Insights“ von Google analysiert Websites auf die Geschwindigkeit des Ladens von Inhalten und bewertet den „PageSpeed“ auf einer Skala von 0 bis 100. Es werden auch Hinweise und Empfehlungen zur Verbesserung der Ladezeiten angegeben.
Dieses Tool sollte man nutzen, wenn man die Performance einer Seite herausfinden möchte.
Bilder für das Web optimieren
Für die Optimierung von Bildern eignen sich professionelle Grafikprogramme wie Adobe Photoshop. Aber auch mit kostenlosen Alternativen wie GIMP oder sogar Microsoft Paint lassen sich gute Ergebnisse erzielen.
Auflösung der Bilder verringern
Am einfachsten und effektivsten ist es, die Auflösung, also die Anzahl an Pixeln, die das Bild horizontal und vertikal besitzt, zu verringern. Nur ein Bruchteil aller Nutzer*innen besitzt ultrahochauflösende Monitore – die vielen Pixel lohnen sich daher nicht. Die gängigsten Bildgrößen für die Verwendung auf Websites sind:
• 800x600px (Format 4:3)
• 1024x768px (Format 4:3)
• 1280x720px (Format 16:9) - HD
• 1920x1080px (Format 16:9) - FULLHD
Fotos mit einer Breite von 1920px oder höher sollten nur als Kopfgrafiken verwendet werden. Diese reichen meist über die gesamte Monitorbreite und müssen dementsprechend hochauflösend sein. Damit bei solchen Bildern die Dateigröße trotzdem gering gehalten werden kann, sollte man sie komprimieren.
Bilder für die Website komprimieren
Man unterscheidet zwei Arten von Kompression: Die verlustfreie und die verlustbehaftete Kompression.
Bei der verlustfreien Kompression gehen keine Bildinformationen verloren und es gibt keine visuellen Unterschiede. Die Kompression kommt durch die Umstrukturierung der Bilddaten zustande. Verlustfreie Kompression wird unter anderem bei PNG- oder GIF-Grafiken angewandt und eignet sich am besten für Illustrationen, Logos oder Schaubilder.
Das verlustbehaftete Komprimieren von JPG-Bildern hat Verluste der Bildqualität zur Folge. Diese werden aber immer versucht, unmerklich oder ästhetisch erträglich zu halten, indem zum Beispiel vier ähnlich gefärbte Pixel eine gleiche Farbe erhalten. Solche kleinen Farbänderungen sind kaum sichtbar. Verlustbehaftete Kompression entfernt also nur Bildinformationen, die über die Aufnahmefähigkeit der menschlichen Bildwahrnehmung hinausgehen.
Es wird empfohlen, Fotografien als JPG-Bild zu speichern, da man auf diesem Weg die kleinstmögliche Dateigröße erzielen kann. Der einzige Nachteil hierbei ist, dass Transparenz verloren geht. Möchte man also ein Bild mit transparentem Hintergrund haben, sollte man auf das PNG-Format setzen.
Komprimierte Bilder für Websites sollten im Idealfall nicht größer als 70kb sein. Dennoch kann eine Dateigröße bis 150kb bei einem hochauflösenden Bild noch akzeptiert werden.
Bildgrößen überprüfen
Befindet sich das Bild auf dem Computer, kann man mit einem Rechtsklick und einem Klick auf „Eigenschaften“ die Bildgröße sehen. Im Tab-Reiter „Details“ kann man die Abmessungen in Pixeln einsehen.
Ist das Bild auf einer Website eingebunden, kann man per Rechtsklick das Bild in einem neuen Tab öffnen. In dem Tab-Titel steht dann die Auflösung des Bildes (ist dies nicht sichtbar, muss man mit der Maus über den Tab hovern).
Auf einen Blick
Bildgrößen spielen eine wichtige Rolle bei der Ladegeschwindigkeit von Websites. Man sollte darauf achten, die Auflösung auf das Nötigste zu reduzieren und die Dateigröße möglichst klein zu halten, damit Benutzer*innen mit einer langsamen Internetverbindung nicht sofort die Website verlassen, wenn der Inhalt nicht lädt. Manchmal sind es eben die kleinen Dinge, die helfen können, Kunden zu gewinnen.
Autor: Jonas Dahm