Bilder machen eine Website lebendig, sie sind aber auch der häufigste Grund für lange Ladezeiten. Ein einziges Foto in voller Kamera-Auflösung kann größer sein als der gesamte übrige Inhalt einer Seite. Wer Bilder richtig aufbereitet, verbessert die Geschwindigkeit deutlich, ohne dass die Qualität sichtbar leidet. In diesem Beitrag erfahren Sie, worauf es dabei ankommt.
Warum Bilder die Ladezeit bestimmen
Moderne Kameras und Smartphones liefern Fotos mit mehreren Millionen Bildpunkten. Für die Darstellung auf einer Website wird davon nur ein Bruchteil gebraucht, denn die meisten Bilder erscheinen in einer Breite von wenigen hundert Bildpunkten. Wird die große Datei trotzdem geladen, wird sie im Browser nur verkleinert angezeigt, die Daten wurden aber umsonst übertragen.
Besonders spürbar ist das mobil, wo die Verbindung langsamer sein kann und Datenvolumen begrenzt ist. Seiten mit unnötig großen Bildern laden dort deutlich länger, und viele Besucher warten nicht darauf. Die Aufbereitung der Bilder ist deshalb eine der wirksamsten Maßnahmen für eine schnelle Website.
Die richtige Größe wählen
Ein Bild sollte nur so groß sein, wie es auf der Seite dargestellt wird, mit einem Spielraum für hochauflösende Bildschirme. Ein Bild, das in einer Spalte von 600 Bildpunkten Breite erscheint, braucht keine 4000 Bildpunkte. Eine doppelte Breite reicht in der Regel aus, damit es auch auf scharfen Displays gut aussieht.
Bei Astro können Bilder beim Erstellen der Website automatisch in mehreren Größen erzeugt werden. Der Browser wählt dann die passende Variante für das jeweilige Gerät. Betreiber müssen dafür nur ein ausreichend großes Original bereitstellen, die Verkleinerung übernimmt die Technik.
Das passende Format
Neben der Größe zählt das Dateiformat. JPEG eignet sich für Fotos, PNG für Grafiken mit Transparenz, doch beide sind bei gleicher Qualität größer als moderne Formate wie WebP oder AVIF. Diese erreichen bei ähnlichem Aussehen deutlich kleinere Dateien und werden von aktuellen Browsern unterstützt.
Bei einer Astro-Website werden Bilder beim Erstellen in solche Formate umgewandelt. Die Originale bleiben unverändert erhalten, sodass jederzeit eine neue Fassung erzeugt werden kann. Für Logos und einfache Symbole bietet sich zudem SVG an, weil es sich ohne Qualitätsverlust beliebig skalieren lässt und sehr klein bleibt.
Komprimierung mit Augenmaß
Bei der Komprimierung wird die Dateigröße verringert, indem Bildinformationen vereinfacht werden. Eine mäßige Komprimierung ist für das Auge nicht erkennbar und spart oft mehr als die Hälfte der Datenmenge. Wird zu stark komprimiert, entstehen sichtbare Blöcke und Unschärfen.
Ein guter Mittelweg ist, die Qualität so weit zu senken, bis erste Unterschiede auffallen, und dann einen Schritt zurückzugehen. Wichtige Bilder, etwa das große Bild am Seitenanfang, verdienen dabei etwas mehr Qualität als kleine Vorschaubilder in Listen.
Laden zum richtigen Zeitpunkt
Nicht jedes Bild muss sofort geladen werden. Bilder weiter unten auf der Seite können erst dann nachgeladen werden, wenn der Besucher dorthin scrollt. Dadurch erscheint der sichtbare Bereich schneller, und Daten für nie angesehene Bilder werden gespart.
Das Bild am Seitenanfang sollte dagegen sofort geladen werden, weil es zum ersten Eindruck gehört. Außerdem sollten Breite und Höhe der Bilder festgelegt sein, damit der Text nicht springt, wenn ein Bild erscheint. Diese Details wirken klein, verbessern aber das Gefühl von Schnelligkeit spürbar.
Zur Aufbereitung gehört auch die Auswahl. Weniger, dafür aussagekräftige Bilder wirken oft besser als eine lange Reihe ähnlicher Fotos. Jedes Bild sollte einen Zweck erfüllen, sei es, Vertrauen zu schaffen, eine Leistung zu zeigen oder einen Text aufzulockern. Das spart Daten und macht die Seite übersichtlicher.
Beschreibungen und Dateinamen
Bilder brauchen eine kurze Beschreibung, die erklärt, was zu sehen ist. Sie hilft Menschen mit Screenreader und wird angezeigt, falls ein Bild nicht geladen werden kann. Auch Suchmaschinen nutzen sie, um den Inhalt eines Bildes zu verstehen.
Sprechende Dateinamen unterstützen das zusätzlich. Ein Name wie fensterbau-krefeld.jpg sagt mehr als IMG_4821.jpg. Die Beschreibung sollte sachlich sein und nicht mit Stichworten vollgestopft werden, denn sie ist in erster Linie für Menschen gedacht.
Kurz zusammengefasst
Bilder sollten nur so groß sein wie nötig, in einem modernen Format vorliegen und mit Augenmaß komprimiert werden. Bilder außerhalb des sichtbaren Bereichs lassen sich später laden, und jedes Bild braucht eine kurze Beschreibung. Bei Astro übernimmt die Technik einen großen Teil dieser Arbeit, solange ausreichend gute Originale vorliegen.
Wie gut sind Ihre Bilder aufbereitet?
Ein Test mit Google PageSpeed Insights zeigt, ob Bilder die Ladezeit bremsen. TA-WebDesign erstellt Websites mit Astro, bei denen Bilder automatisch in passenden Größen und Formaten ausgeliefert werden. Mehr dazu finden Sie unter Astro-Webdesign.