Bilder optimieren und Ladezeit verbessern

Wenn ein Besucher eine Webseite öffnet, müssen neben den Texten auch die darauf verwendeten Bilder übertragen und dargestellt werden. Je größer die Bilddateien sind, desto mehr Daten müssen übertragen werden.

Ein einfaches Beispiel: Ein Foto direkt aus einer modernen Kamera kann mehrere Megabyte groß sein. Für eine Webseite wird aber häufig nur ein kleiner Teil dieser Datenmenge benötigt.

Das ist vergleichbar mit einem Paketversand: Wenn der Empfänger nur einen kleinen Gegenstand benötigt, macht es keinen Sinn, dafür ein riesiges Paket zu verschicken.

Nicht nur die Anzahl der Bilder ist entscheidend. Auch die Größe der einzelnen Dateien spielt eine wichtige Rolle.

Eine Seite mit fünf gut optimierten Bildern kann deshalb schneller geladen werden als eine Seite mit nur zwei sehr großen Bildern.

Besonders auffällig wird das auf mobilen Geräten. Dort kann die Internetverbindung langsamer sein als am Arbeitsplatz oder im Büro. Große Bilddateien benötigen dann entsprechend länger, bis sie vollständig übertragen wurden.

Ein häufiger Fehler ist, Bilder deutlich größer hochzuladen, als sie auf der Webseite tatsächlich dargestellt werden.

Wird ein Bild beispielsweise auf der Webseite mit einer Breite von 800 Pixeln angezeigt, muss dafür nicht unbedingt ein Bild mit 4.000 Pixeln Breite übertragen werden.

Das Bild kann zwar trotzdem korrekt dargestellt werden, der Besucher lädt aber unnötig viele Daten herunter.

Deshalb sollte ein Bild möglichst zu der Größe passen, in der es auf der Webseite tatsächlich benötigt wird.

Ein Bild sollte natürlich nicht so stark verkleinert oder komprimiert werden, dass es sichtbar schlecht aussieht. Gleichzeitig ist die höchstmögliche Bildqualität nicht automatisch die beste Lösung für eine Webseite.

Entscheidend ist ein sinnvoller Mittelweg.

Ein Foto auf einer Unternehmensseite muss beispielsweise nicht die gleiche Qualität haben wie ein Bild, das später großformatig gedruckt werden soll. Für die Darstellung auf einem Bildschirm reicht häufig eine deutlich kleinere Datei aus.

Neben der Größe spielt auch das verwendete Bildformat eine Rolle. Moderne Formate wie WebP oder AVIF können Bilder bei guter Qualität deutlich kleiner speichern als ältere Formate.

Das kann gerade bei Webseiten mit vielen Bildern einen spürbaren Unterschied machen.

Für Besucher ist dabei nicht wichtig, welches Format verwendet wird. Entscheidend ist, dass das Bild schnell geladen wird und trotzdem gut aussieht.

Auf einer langen Webseite befinden sich häufig Bilder, die der Besucher beim Öffnen der Seite noch gar nicht sehen kann.

Ein Bild am unteren Ende einer langen Seite muss beispielsweise nicht unbedingt gleichzeitig mit dem Titelbild ganz oben geladen werden.

Hier kann das sogenannte verzögerte Laden helfen. Dabei werden bestimmte Bilder erst geladen, wenn sie in die Nähe des sichtbaren Bereichs kommen.

Für den Besucher bedeutet das: Die wichtigen Inhalte am Anfang der Seite können schneller zur Verfügung stehen.

Eine Webseite kann auf einem schnellen Büroanschluss problemlos wirken und auf einem Smartphone trotzdem deutlich länger laden.

Gerade unterwegs kann die Verbindung schwanken. Zusätzlich ist der Bildschirm kleiner, sodass viele große Bilder gar nicht in ihrer ursprünglichen Größe benötigt werden.

Deshalb sollte eine Webseite nicht nur für einen schnellen Rechner im Büro optimiert werden. Auch Besucher mit einem Smartphone sollten die wichtigsten Inhalte möglichst schnell sehen können.

Bei der Bildoptimierung geht es nicht ausschließlich um die Dateigröße.

Ein sinnvoller Dateiname kann beispielsweise dabei helfen, den Inhalt eines Bildes besser zuzuordnen. Noch wichtiger ist ein passender Alternativtext, wenn ein Bild für den Inhalt der Seite relevant ist.

Der Alternativtext beschreibt, was auf dem Bild zu sehen ist, und kann unter anderem von Menschen genutzt werden, die Bilder nicht sehen können.

Ein gutes Beispiel wäre:

typo3-webentwicklung-unternehmen.jpg

statt:

IMG_4837.jpg

Dabei sollte man aber auch hier nicht übertreiben. Ein Dateiname oder Alternativtext sollte den tatsächlichen Inhalt des Bildes beschreiben und nicht einfach mit Suchbegriffen gefüllt werden.

Bei der Optimierung einer Webseite reicht es deshalb nicht, einfach jedes Bild möglichst stark zu verkleinern.

Es sollte geprüft werden:

• Welche Bilder werden tatsächlich benötigt?
• Welche Größe wird auf der Webseite angezeigt?
• Wie groß sind die Dateien?
• Welches Bildformat wird verwendet?
• Wann wird das Bild geladen?
• Ist das Bild für den Besucher überhaupt wichtig?

Gerade bei größeren Webseiten können sich dabei viele kleine Optimierungen summieren.

Optimierte Bilder können die Ladezeit deutlich verbessern, sind aber nur ein Teil der gesamten Webseite.

Auch CSS, JavaScript, Schriftarten, externe Dienste, der Server und die technische Struktur können beeinflussen, wie schnell eine Seite beim Besucher erscheint. Welche Faktoren eine Webseite insgesamt langsam machen können, erklären wir in unserem Artikel„Was kann eine Webseite langsam machen?“

Das bedeutet: Wenn eine Webseite trotz optimierter Bilder langsam bleibt, sollte nicht einfach weiter an den Bildern gearbeitet werden. Dann lohnt sich ein Blick auf die gesamte Ladezeit und die verschiedenen Bestandteile der Seite.

Am einfachsten lassen sich Bilder optimieren, wenn bereits bei der Erstellung einer Webseite darauf geachtet wird.

Wer von Anfang an passende Bildgrößen verwendet, unnötig große Dateien vermeidet und Bilder sinnvoll einbindet, muss später weniger nachbessern.

Gerade bei Unternehmenswebseiten mit vielen Bildern, Referenzen, Projekten oder Produktdarstellungen kann eine durchdachte Bildstrategie deshalb langfristig viel Arbeit sparen.

Bilder sind für viele Webseiten unverzichtbar. Sie können Leistungen erklären, Vertrauen schaffen und Inhalte anschaulicher machen.

Entscheidend ist deshalb nicht, möglichst wenige Bilder zu verwenden, sondern die richtigen Bilder passend für die Webseite aufzubereiten.

Dateigröße, Bildformat, Darstellung, Ladezeit und mobile Nutzung sollten dabei zusammen betrachtet werden. So kann eine Webseite ansprechend bleiben, ohne dass Besucher unnötig lange warten müssen.