Bilder für die Webseite richtig speichern: Auflösung vs. Ladezeit

Es ist ein Trend, der so schnell nicht verschwinden wird: Wir lieben Bilder im Web – je größer und beeindruckender, desto besser. Doch große Bilddateien führen oft zu langen Ladezeiten, was ungeduldige Nutzer dazu bringen kann, die Seite frühzeitig zu verlassen. Auch für Suchmaschinen zählen kurze Ladezeiten zu den wichtigsten Faktoren für ein gutes Webseiten-Ranking.

Für viele es nicht infrage, die Bildqualität zu verringern – schließlich steht sie für viele Nutzer direkt für die Qualität der gesamten Webseite. ist das Optimieren und Komprimieren von Webinhalten sowohl notwendig als auch gut umsetzbar. Wir zeigen, wie Sie Bilder so anpassen können, dass die Ladezeiten kürzer werden, ohne dass die beeindruckende Wirkung auf Ihre Besucher verloren geht.

Dateiformat

Bei der Optimierung von Bildern und Grafiken sollten Sie grundsätzlich zwischen drei Begriffen unterscheiden: Dateiformat, Dateigröße und Bildgröße. Das Dateiformat beschreibt die Art des Bildes und lässt sich an der Dateiendung erkennen. Die gängigsten Bildformate für Webinhalte sind:

JPEG (Joint Photographic Experts Group) punktet mit einer starken Komprimierung, die kaum Einbußen bei Bildqualität und Handhabung mit sich bringt. Es bietet zudem ein breites Farbspektrum und wird deshalb gerne für Fotos genutzt. JPEG ist das am weitesten verbreitete Format für Bilder im Internet.

Das PNG-Format (Portable Network Graphics) kann ebenfalls Bilder komprimieren, indem es die Anzahl der verwendeten Farben verringert. Je stärker ein Bild komprimiert wird, desto kleiner fällt auch das Farbspektrum aus. Im Gegensatz zu JPEG unterstützt PNG jedoch transparente Hintergründe, was es besonders für die Einbindung auf Webseiten beliebt macht. Daher eignet PNG vor allem für Grafiken mit wenigen Farben und für Bilder mit Transparenz.

Das GIF (Graphics Interchange Format) ist inzwischen ein veraltetes Format, das nur noch selten genutzt wird. Es unterstützt zwar Transparenz, bietet jedoch lediglich ein eingeschränktes Farbspektrum von 256 Farben, was bei Fotos oft unnatürlich wirkt. Sein großer Vorteil liegt jedoch in der Möglichkeit, Bilder zu animieren. Deshalb eignet es sich besonders gut für Animationen und kleine Grafiken, etwa in Newslettern.

Bildgröße und Volumen eines Bildes

Bildgröße und Dateigröße hängen eng zusammen. Die Dateigröße gibt an, wie viele Bytes (KB, MB oder GB) ein Bild hat und damit, wie viel Speicher es braucht. Die Bildgröße beschreibt die Anzahl der Pixel. Je mehr Pixel, desto größer das Bild. Und je mehr pro Zoll, desto höher die Auflösung.

Viele Bilder, die direkt aus der Kamera kommen, sind unkomprimiert und besitzen mehrere tausend Pixel. Der Anzeigebereich einer Webseite auf einem Monitor ist jedoch meist nur etwa 1280 breit. So große Bilder sind daher in der Regel gar nicht nötig.

Wer mit großflächigen Bildern punkten möchte, greift am besten zu einer Bildgröße von 1920 x 1280 Pixel – das sollte aber die Obergrenze sein. Andernfalls verlängern sich die Ladezeiten unnötig. Zudem sollten keine riesigen Bilddateien hochgeladen werden, um sie anschließend verkleinert darzustellen – das verschlechtert die Bildqualität erheblich und bläht die Datenmenge unnötig auf.

Kurze Ladezeiten zählen auch für Suchmaschinen zu den entscheidenden Kriterien beim Ranking von Webseiten.

Bildoptimierung: Weniger ist oft mehr

Bildkomprimierung ist eine tolle Methode, um die Ladezeiten einer zu verkürzen. Ziel ist es, hochwertige Bilder und Grafiken bei möglichst kleiner Dateigröße zu behalten. Da Komprimieren auch Qualitätsverlust bedeutet, ist ein guter Mittelweg wichtig. Zu stark komprimierte Bilder wirken oft unscharf oder „verpixelt“. Hochauflösende Bilder (z. B. 1920 x 1080 Pixel) lassen sich übrigens stärker komprimieren als kleinere Formate (z. B. 600 x 400 Pixel).

Bilder lassen sich mit vielen verschiedenen Bildbearbeitungsprogrammen komprimieren. Am einfachsten geht es in Photoshop: Klicken Sie auf „Datei“, „Exportieren“ und dann „Für Web speichern“. Im Menü können Sie anschließend das Dateiform sowie die Bildgröße in Pixeln festlegen. Für ein gutes Verhältnis zwischen Ladezeit und Qualität wählen Sie bei JPG die Einstellung „H (60)“. Speichern Sie das Bild danach unter einem anderen Namen, um das Original zu behalten.

Beim Skalieren von Bildern sollte man vorsichtig sein, da sie sonst schnell ihre ursprünglichen Proportionen verlieren und verzerrt wirken können. Dieses Verhältnis muss unbedingt beibehalten werden. Generell empfiehlt es sich, Bilder auf einer Webseite möglichst immer im gleichen Seitenverhältnis hochzuladen und starke Abweichungen zu vermeiden. Einheitlichkeit sorgt für Übersichtlichkeit und wirkt weniger zufällig.

Im Online-Bereich empfiehlt sich für Neueinsteiger übrigens ein Bildverhältnis von 9:6. Das sind gängige Proportionen, mit denen man zunächst nichts falsch machen kann.

Dateinamen als Unterstützung für die Suchmaschinenoptimierung

Zum Abschluss noch ein kurzer Abstecher in den SEO-Bereich: Suchmaschinen können zwar Bilder erkennen, aber nicht deren Inhalt. Hier kommen die Dateinamen ins Spiel, die den Suchmaschinen verraten, was auf dem Bild zu sehen ist. Dabei gibt es ein paar Regeln, die man für einekonforme Benennung beachten sollte.

• keine Leerzeichen, stattdessen Bindestriche
• keine Großbuchstaben
• keine Umlaute
• keine Sonderzeichen

Eine kurze Beschreibung im alt-Attribut ist ebenfalls hilfreich, falls ein Besucher Ihre Webseite ohne Bildanzeige aufruft. Auch Suchmaschinen achten auf diese kleinen Texte.

Das Maximum darf es sein

Wenn Sie Ihre Bilder schon optimal in Photoshop gespeichert haben, können Sie mit der Software TinyJPG noch eine stärkere Komprimierung erzielen – ganz ohne Qualitätsverlust.

Trotzdem ist das Optimieren und Komprimieren von Webinhalten sowohl wichtig als auch gut machbar.

Halbieren Sie die Ladezeit Ihrer Website!

Mit den vorangegangenen Informationen sollten Sie keine Schwierigkeiten haben, die Bilder Ihrer Website optimal zu gestalten. Was für den Nutzer kaum sichtbar ist, kann die Ladezeit deutlich verringern. Nutzen Sie also diese Chancen!

Und falls doch noch Fragen zur Inhaltserstellung auftauchen, melden Sie sich gerne – wir unterstützen Sie in allen Bereichen der Webseitengestaltung.