Performance Autor: Anna 27.11.2023

Optimierung von Bildern – gekonnt den Fokus setzen

Mehr als 200 Rankingfaktoren sind für Google bei der Platzierung von Webseiten in den Suchergebnissen relevant. Allein mit einer guten Optimierung von Bildern landet deine Webseite zwar nicht unmittelbar auf Platz 1, aber sie gewinnt auf jeden Fall mehr Relevanz und Attraktivität – bei den Suchmaschinen und bei deinen Besucherinnen und Besuchern.

Das Schöne an der Optimierung von Bildern ist, dass schon ein paar Kniffe ausreichen, um ein besseres Ergebnis zu erzielen. Aufwand und Zeiteinsatz halten sich in Grenzen und du fügst ein weiteres Puzzleteil zu einer konsistenten User Experience hinzu. Wie die Optimierung von Bildern gelingt, warum sie so wichtig ist und welche Vorteile du dabei hast, erfährst du in unserem nachfolgenden Beitrag.

Was meint die Optimierung von Bildern?

Die Optimierung von Bildern auf der Webseite bezieht sich auf die Anpassung und Bearbeitung von Bildern, die sich auf deinen Seiten befinden – von Startseite bis Unterseiten, Blogs, Landingpages und Co. Ziel der Bildoptimierung ist es, die Ladezeiten zu minimieren, ohne die visuelle Qualität für den User merklich zu beeinträchtigen. Dazu stehen verschiedene Maßnahmen zur Verfügung, darunter die Reduzierung der Dateigröße, das Ändern des Bildformats, das Komprimieren des Bilds oder auch das Implementieren von „Lazy Loading“. Eine effektive Bildoptimierung verbessert die Gesamtperformance einer Webseite, fördert ein besseres Nutzererlebnis und kann positive Auswirkungen auf das Suchmaschinenranking haben.

Welche Vorteile hat die Bildoptimierung?

Mit der Optimierung von Bildern kannst du von einigen nennenswerten Vorteilen profitieren.

Schnellere Ladezeiten

Die Optimierung von Bildern führt zu einer erheblichen Reduzierung der Dateigrößen. Das bedeutet, dass weniger Daten übertragen werden müssen, wenn ein User auf deine Webseite zugreift. Das Ergebnis? Die Inhalte der Webseite, insbesondere Bilder, werden schneller geladen. Der Pagespeed fördert nicht nur die Benutzerzufriedenheit, sondern reduziert auch die Abbruchrate.

Verbessertes Nutzererlebnis

Ein schneller Seitenaufbau durch die Optimierung von Bildern trägt maßgeblich zu einem positiven Nutzererlebnis bei. Wenn Bilder schnell und ohne Verzögerung geladen werden, können User ohne Unterbrechungen durch die Inhalte navigieren. Dies minimiert Frustration und steigert die Wahrscheinlichkeit, dass Besucher länger auf der Seite verweilen, sich mit Freude durch deine Angebote klicken und eher geneigt sind, mehr zu kaufen, als sie eigentlich wollten.

Verbesserte SEO-Rankings

Wenngleich die Optimierung von Bildern per se keine Auswirkung auf das Ranking hat, legen Suchmaschinen großen Wert auf die Nutzererfahrung. Ein wichtiger Faktor hierbei ist die Geschwindigkeit deiner Webseite. Durch die Optimierung von Bildern verbessert sich die Ladezeit, was wiederum positive Auswirkungen auf die User-Experience und damit das Suchmaschinenranking haben kann. Zudem kann Google gut optimierte Bilder samt der Struktur dahinter deutlich besser crawlen. Mit einem höheren Ranking steigerst du die Sichtbarkeit deiner Webseite und erhältst mehr organischen Traffic.

Reduzierte Serverbelastung

Große Bilddateien beanspruchen logischerweise mehr Serverressourcen. Indem du Bildgrößen reduzierst, wird diese Belastung verringert. So sparst du Speicherplatz, reduzierst den Datenverkehr und mitunter sogar die Webhosting-Kosten.

Höhere Conversion

Wenn User ohne Verzögerungen oder technische Probleme durch eine Webseite navigieren, steigt die Wahrscheinlichkeit, dass diese konvertieren, indem sie einen Kauf tätigen oder deinen Newsletter abonnieren.

Mobile Optimierung von Bildern

Heute greifen mehr User über mobile Endgeräte als über den Desktop auf Webinhalte zu. Daher ist es keine Frage mehr, dass Webseiten für alle Endgeräte ausgelegt sein müssen. Durch das Optimierung von Bildern können Inhalte gezielt für mobile Geräte optimiert werden, sodass sie korrekt geladen und ausgespielt werden.

4 Tipps, um Bilder zu optimieren

Nun geht es von der Theorie in die Praxis. Nachfolgend geben unsere Grafikexperten vier Tipps an die Hand, wie die Optimierung von Bildern umsetzen werden kann.

Wahl des richtigen Dateiformats

Es gibt verschiedene Bildformate, für die du dich auf deiner Webseite zur Optimierung von Bildern entscheiden kannst. Die gebräuchlichsten sind JPEG und PNG. JPEG ist ideal für Fotos, da es eine gute Komprimierung bietet. Der Qualitätsverlust hält sich dabei in Grenzen. Zudem wird es, mit gleichbleibender Farbintensität, auf nahezu allen Geräten angezeigt. Das Format lässt sich hervorragend für Blogartikel einsetzen.

PNG eignet sich besonders bei der Optimierung von Bildern mit Transparenz. Ein Vorteil ist, dass trotz Komprimierung die Qualität erhalten bleibt. Es wird ebenso auf allen Geräten angezeigt. Ideal sind PNG-Formate für Symbole, Logos und Bilder, die die User nicht unbedingt vergrößern müssen. Wenn es um Qualität geht, ist diese Bildformat zur Optimierung von Bildern die erste Wahl.

Bilder komprimieren

Bei der Optimierung von Bildern steht ferner auch die Komprimierung von großen Bildern im Fokus. Das erleichtert das Hochladen gleichermaßen wie das Speichern und Laden. Wichtig ist dabei, eine ausgewogene Balance zwischen Größe und Qualität zu finden. Wie bereits erwähnt, muss bei JPG-Formaten immer mit einer verlustbehafteten Komprimierung gerechnet werden. Bilder und Fotos in PNG sind davon nicht betroffen. Die Qualität bleibt bei der Komprimierung und Optimierung von Bildern erhalten. Es gibt zahlreiche Tools, die Bilder komprimieren können und sogar automatisch den besten Grad der Komprimierung für dein Bild auswählen.

Alt-Text einbauen

Alt-Texte (kurz für Alternativtexte) beeinflussen die Bildladezeit zwar nicht, sind aber für die Suchmaschinenoptimierung (SEO) unerlässlich. Anhand der Beschreibung kann Google die Relevanz des Bilds für eine Suchanfrage einschätzen. Ein klarer und beschreibender Alt-Text hilft den Suchmaschinen also, den Inhalt eines Bilds zu verstehen, und verbessert die Barrierefreiheit für User mit Sehbehinderungen. Ein passender Bildtitel bietet zusätzliche Informationen und erhöht die Benutzerfreundlichkeit.

Wie du einen Alt-Text zur Optimierung von Bildern erstellst? Führe zuerst das Hauptkeyword der Seite auf und lasse dann eine kurze Beschreibung des Bilds folgen. Der Text sollte zwischen 75 und 115 Zeichen lang sein.

Lazy Loading implementieren

„Lazy Loading“ oder „träges Laden“, ist eine Technik, bei der nur jene Bilder und Medieninhalte geladen werden, die im aktuell sichtbaren Bereich des Users liegen. Das bedeutet konkret: Wenn ein User eine Webseite besucht, werden zu Beginn nur jene Bilder angezeigt, die er tatsächlich sieht. Erst wenn er weiter nach unten scrollt und andere Bereiche der Webseite aufruft, werden nach und nach die weiteren Bilder und Inhalte geladen.

Der entscheidende Vorteil dieser Optimierung von Bildern liegt auf der Hand: Webseiten laden schneller, da nicht sofort auf alle Inhalte zugegriffen wird. Darüber hinaus reduziert das Lazy Loading die Serverbelastung, da weniger Daten simultan übertragen werden.

Für die Implementierung nach der Optimierung von Bildern gibt es verschiedene Ansätze. Viele moderne Content-Management-Systeme und Webentwicklungsframeworks bieten bereits integrierte Lösungen oder Plugins dafür an. Bei der manuellen Implementierung können Entwickler JavaScript-Bibliotheken wie „lozad.js“ oder „lazysizes“ verwenden.

Es ist jedoch wichtig zu beachten, dass bei der Implementierung von „Lazy Loading“ die Benutzererfahrung und die Suchmaschinenoptimierung (SEO) nicht beeinträchtigt werden sollten. Bei wichtigen Inhalten, die für das Ranking in Suchmaschinen relevant sind, solltest du auf Lazy Loading bei der Optimierung von Bildern verzichten.