So optimierst du deine Bilder für deine (Divi-)Website richtig!

Wenn du wie ich schon mal stundenlang vor dem Computer gesessen hast, um Bilder für deine Website hochzuladen und zu optimieren, dann weißt du, wie viel Arbeit das sein kann. Aber hier kommt der Clou: Wenn du gleich von Anfang an darauf achtest, deine Bilder richtig zu beschriften und zu optimieren, sparst du dir später viel Arbeit. Glaub mir, das zahlt sich aus – sowohl für die Accessibility als auch für die Optimierung des Pagespeeds. Außerdem, wenn du noch mehr Tipps zum Thema Accessibility und Divi haben möchtest, schau dir gerne meinen Blogbeitrag Divi Barrierefrei: Plugins und Tricks zur Verbesserung der Accessibility an.

Warum Bilder optimiert werden sollten

Bilder sind neben Videos (die nicht über YouTube und Co. eingebunden wurden) oft die größten Dateien auf einer Website und können die Ladezeiten erheblich beeinflussen. Lange Ladezeiten führen zu einer schlechten Benutzererfahrung, was dazu führt, dass Besucher deine Seite schnell wieder verlassen. Studien zeigen, dass bereits eine Verzögerung von einer Sekunde die Konversionsrate um bis zu 7% senken kann.

Optimierte Bilder laden schneller und reduzieren die Serverlast, was die allgemeine Performance deiner Website verbessert. Darüber hinaus spielt die Bildoptimierung eine wichtige Rolle bei der Suchmaschinenoptimierung (SEO). Google bevorzugt schnell ladende Websites und berücksichtigt die Ladezeit als Ranking-Faktor. Schließlich verbessert die korrekte Beschriftung von Bildern die Zugänglichkeit deiner Website, indem sie Screenreadern hilft, den Inhalt zu erklären, was besonders für Menschen mit visuellen Einschränkungen wichtig ist – und glaub mir – spätestens im Juni 2025 betrifft das Thema „Accessibility“ auch deine Website. 

So funktioniert’s! Schritt für Schritt zu optimierten Bildern:

Hier erkläre ich dir jetzt Schritt für Schritt, welche Dinge du optimieren kannst bzw. solltest und auch, was es damit auf sich hat. Angefangen mit dem Dateiformat bis über die richtige Größe und Auflösung für Bilder auf Websites. Du kannst dafür Photoshop oder ähnliche Programme verwenden. Ich persönlich verwende die Affinity Designer Suite dafür.

Los geht’s!

1. Das richtige Dateiformat wählen

Ein Dateiformat ist die Art und Weise, wie Daten auf einem Computer gespeichert werden. Jedes Format hat spezifische Eigenschaften, die bestimmen, wie die Daten komprimiert, gespeichert und wiedergegeben werden. Bei Bildern gibt es mehrere gängige Formate, jedes mit seinen eigenen Vor- und Nachteilen. Hier findest du eine Auflistung der gängigen Bilddateiformate für Websites. Ich habe dir auch jeweils einen Vergleich mit demselben Bild im WebP-Format bereitgestellt.

Dateiformate fürs Web und ihre Vor-/Nachteile:

1. JPEG (Joint Photographic Experts Group):

• Vorteile:
  + Kleine Dateigröße: JPEG-Dateien sind stark komprimiert, was die Dateigröße erheblich reduziert und somit die Ladezeit der Website verbessert.
  + Gute Qualität bei hoher Kompression: Trotz verlustbehafteter Kompression bleibt die Bildqualität für die meisten Webanwendungen ausreichend hoch.
  + Breite Unterstützung: JPEG ist ein weit verbreitetes Format, das von nahezu allen Bildbearbeitungsprogrammen und Webbrowsern unterstützt wird.

•  Nachteile:
  – Verlustbehaftete Kompression: Bei jeder Speicherung verliert das Bild an Qualität, was besonders bei mehrfacher Bearbeitung sichtbar wird.
  – Keine Transparenz: JPEG unterstützt keine Transparenzen, was es für Logos und Grafiken mit transparentem Hintergrund ungeeignet macht.
  – Wird von Google nicht als „modernes Format“ für Bilder anerkannt.

Speichern in Photoshop: „Datei > Exportieren > Für Web speichern“ und dann als JPEG exportieren.
Speichern in Affinity Designer: „Datei > Exportieren > JPEG“ wählen.

2. PNG (Portable Network Graphics):

• Vorteile:
  + Verlustfreie Kompression: PNG-Dateien behalten ihre Qualität unabhängig davon, wie oft sie gespeichert werden.
  + Unterstützung von Transparenz: PNG kann Bilder mit transparenten Hintergründen speichern, was es ideal für Logos und Grafiken macht.
  + Hohe Bildqualität: Besonders geeignet für Bilder mit Text, Grafiken und Illustrationen, die eine scharfe Kanten- und Farbwiedergabe benötigen.

•  Nachteile:
  – Größere Dateigröße: Aufgrund der verlustfreien Kompression sind PNG-Dateien oft größer als JPEGs, was die Ladezeiten verlängern kann.
  – Nicht ideal für Fotos: Für detaillierte Fotografien kann die Dateigröße unverhältnismäßig groß werden.
  – Wird von Google nicht als „modernes Format“ für Bilder anerkannt.

Speichern in Photoshop: „Datei > Exportieren > Für Web speichern“ und dann als PNG exportieren.
Speichern in Affinity Designer: „Datei > Exportieren > PNG“ wählen.

 WebP (WebPicture):

Ich persönlich verwende fast ausschließlich Bilder im WebP-Format da die Vorteile gegenüber den anderen einfach deutlich überwiegen. WebP ist ein modernes, neueres Bildformat, das von den meisten modernen Webbrowsern unterstützt wird, darunter Google Chrome, Firefox, Edge und Safari. Die einzigen gängigen Browser, die WebP nicht unterstützen, sind:

• Internet Explorer: Kein Support
• KaiOS Browser: Kein Support

• Vorteile:
  + Hohe Kompressionseffizienz: WebP bietet sowohl verlustfreie als auch verlustbehaftete Kompression, was eine gute Balance zwischen Bildqualität und Dateigröße ermöglicht.
  + Unterstützung von Transparenz: WebP kann Transparenz ähnlich wie PNG speichern, aber mit kleinerer Dateigröße.
  + Modernes Format: Entwickelt für das Web, bietet es eine bessere Leistung in Bezug auf Komprimierung und Qualität als ältere Formate.

•  Nachteile:
  – Kompatibilität: Obwohl die Unterstützung für WebP wächst, wird es noch nicht von allen Webbrowsern und Bildbearbeitungsprogrammen unterstützt.

Speichern in Photoshop: „Datei > Exportieren > Für Web speichern“ und dann als WebP exportieren.
Speichern in Affinity Designer: „Datei > Exportieren > WebP“ wählen.

2. Auflösung und Größe einstellen

Die Auflösung eines Bildes beschreibt die Anzahl der Pixel, die in einem bestimmten Bereich enthalten sind, meist gemessen in DPI (Dots Per Inch). Höhere DPI-Werte bedeuten mehr Detailgenauigkeit und Bildschärfe. Für Webbilder ist eine Auflösung von 72 DPI in der Regel ausreichend.

Hier ein Beispiel:
Angenommen, du hast ein Bild, das du in voller Breite auf deiner Website anzeigen möchtest. Die maximale Breite deiner Website beträgt 1920 Pixel. In diesem Fall solltest du das Bild auf 1920 Pixel Breite und eine entsprechende Höhe skalieren.

Wenn du dasselbe Bild jedoch nur in einem kleinen Abschnitt oder einer Sidebar verwenden möchtest, wo die maximale Breite nur 300 Pixel beträgt, dann solltest du das Bild auf 300 Pixel Breite skalieren. Ein Bild mit 1920 Pixel Breite hochzuladen, um es dann auf 300 Pixel Breite anzuzeigen, würde unnötig große Dateien auf deine Website laden und die Ladezeit erhöhen.

Zusammengefasst: Lade die Bilder nur in der Größe hoch, die sie maximal auf deiner Website benötigen. Wenn ein Bild nur klein angezeigt wird, skaliere es entsprechend vor dem Hochladen, um die Dateigröße zu minimieren und die Ladezeiten zu verbessern.

Schritt 1

Öffne die entsprechende Seite im Browser, auf der sich dein Bild befindet, welches du untersuchen möchtest. Drücke entwender F12 oder Cmd+Option+I (Mac), um die Entwicklerkonsole zu öffnen. Du kannst alternativ auch mit der rechten Maustaste auf die Seite und dann auf „Untersuchen“ klicken oder über die Einstellungen in Chrome, welche rechts oben im Bildschirm durch die drei Punkte gekennzeichnet sind, über „Weitere Tools“ auf die „Entwicklertools“ zugreifen. Viele Wege führen hier nach Rom – oder zur Entwicklerkonsole.

Schritt 2

Im Tab „Elemente“ der Entwicklerkonsole siehst du den HTML-Code der Seite. Fahre mit der Maus über den Code, um die hervorgehobenen Elemente auf der Seite zu sehen. Du kannst auch das Werkzeug „Element auswählen“ (kleines Pfeilsymbol oben links in der Konsole) verwenden und auf das Bild klicken, um direkt zum entsprechenden HTML-Code zu springen.

Schritt 3

Die HTML-Passage für das Bild wird nun blau markiert. Wenn du mit der Maus über die URL des Bildes fährst, erscheint ein kleines Fenster, das die Dimensionsangaben des Bildes zeigt. Schau dir die „Gerenderte Größe“ (rendered size) und die „Intrinsische Größe“ (intrinsic size) an. „Gerenderte Größe“ ist die Größe, die das Bild tatsächlich auf dem Bildschirm hat. Die „Intrinsische Größe“ ist die tatsächliche Größe des Bildes, wie es hochgeladen wurde, auch bekannt als die natürlichen Abmessungen. Wenn du hier große Abweichungen hast, kannst du das Bild auf die 

Wenn die gerenderte Größe eines Bildes deutlich kleiner ist als die intrinsische Größe, kann die Dateigröße reduziert werden. Dies verbessert die Ladezeiten der Website erheblich.

Beispiel: Ein Bild hat eine intrinsische Größe von 1920×1080 Pixel, wird jedoch auf der Website nur mit 300×200 Pixel angezeigt. In diesem Fall solltest du das Bild auf 300×200 Pixel verkleinern und erneut hochladen.

Allerdings gibt es auch Situationen, in denen es sinnvoll ist, größere Bilder zu verwenden. Zum Beispiel habe ich hier in meinem Blogbeitrag als Beispielbild das Beitragsbild verwendet. Damit es auch beim Teilen auf Social Media gut aussieht, habe ich die von WordPress empfohlenen Werte für Beitragsbilder genutzt: 1200 x 630 Pixel. Das stellt sicher, dass das Bild in sozialen Netzwerken optimal dargestellt wird.

Es gibt also gute Gründe für größere Bildgrößen. Aber oft ist man sich gar nicht bewusst, wie stark der Pagespeed unter nicht optimierten Bildern leiden kann. Eine gezielte Anpassung der Bildgröße kann die Performance deiner Website erheblich verbessern. Und wenn du das gleich von Anfang an beim Hochladen deiner Bilder auf deine Website berücksichtigst, sparst du dir eine Menge Nachbearbeitung wenn du deinen Pagespeed optimieren möchtest – glaube mir. 

3. Bilder richtig beschriften

Du dachtest, mit dem Optimieren der Bilder wäre alles getan? Nun ja… Wenn du SEO- und Accessibility-technisch alles sauber erledigen möchtest, solltest du diese, nachdem du sie hochgeladen hast, auch noch richtig beschriften. Ein gut beschriftetes Bild verbessert nicht nur das SEO deiner Seite, sondern macht sie auch barrierefreier und benutzerfreundlicher. Hier sind ein paar Tipps, wie du das richtig anstellst:

Warum Bilder beschriften?

SEO: Suchmaschinen können Bilder nicht sehen, aber sie können den Text lesen, der mit den Bildern verbunden ist. Wenn du also deine Bilder beschriftest, gibst du den Suchmaschinen mehr Informationen über den Inhalt deiner Seite. Das hilft, deine Website besser zu ranken.

Barrierefreiheit: Menschen mit Sehbehinderungen nutzen Screenreader, um den Inhalt von Webseiten zu verstehen. Diese Tools lesen den Alternativtext (Alt-Text) eines Bildes vor. Ein beschreibender Alt-Text kann diesen Nutzern helfen, den Kontext und Inhalt der Bilder zu verstehen.

Wie du Bilder richtig beschriftest

Titel: Gib jedem Bild einen aussagekräftigen Titel. Dieser sollte kurz und prägnant sein, aber den Inhalt des Bildes gut beschreiben. Zum Beispiel: „Sonnenuntergang am Strand von Bali“.

Alt-Text: Der Alt-Text ist eine kurze Beschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann. Er sollte den Inhalt und die Funktion des Bildes beschreiben. Zum Beispiel: „Ein Sonnenuntergang am Strand von Bali mit orangefarbenem Himmel und ruhigem Meer.“

Beschriftung (Caption): Dies ist der Text, der direkt unter dem Bild angezeigt wird. Er kann zusätzliche Informationen oder Kontext bieten. Zum Beispiel: „Ein wunderschöner Sonnenuntergang am Strand von Bali, aufgenommen im Sommer 2023.“

Beschreibung (Description): Dies kann eine ausführlichere Beschreibung des Bildes sein und wird in der Mediathek von WordPress verwendet. Zum Beispiel: „Dieses Foto zeigt einen atemberaubenden Sonnenuntergang am Strand von Bali. Der Himmel ist in warmen Orange- und Gelbtönen gefärbt, das Meer ist ruhig und reflektiert die Farben des Himmels. Aufgenommen wurde das Bild im Sommer 2023 während eines Urlaubs.“

Alt-Texte richtig einfügen

Relevanz: Stelle sicher, dass der Alt-Text relevant zum Bildinhalt ist. Er sollte beschreiben, was auf dem Bild zu sehen ist und, falls wichtig, welche Funktion das Bild hat.

Klarheit: Schreibe klare und verständliche Alt-Texte. Vermeide unnötigen Jargon und halte die Beschreibung so einfach wie möglich.

Länge: Alt-Texte sollten nicht zu lang sein, idealerweise zwischen 5 und 15 Wörtern. Sie müssen das Bild gut beschreiben, aber nicht ausufernd sein.

Einfache Sprache: Nutze einfache und direkte Sprache. Denke daran, dass der Alt-Text auch für Menschen verständlich sein sollte, die vielleicht nicht viel technisches Wissen haben.

So fügst du Alt-Texte in WordPress ein

1. Bild hochladen: Lade dein Bild in die Mediathek von WordPress hoch.
2. Bild auswählen: Klicke auf das hochgeladene Bild in der Mediathek.
3. Alt-Text einfügen: Im rechten Bereich findest du ein Feld für den Alt-Text. Gib hier deine beschreibende Text ein.
4. Speichern: Nachdem du den Alt-Text eingegeben hast, speichere deine Änderungen.

Ein gut beschriftetes Bild trägt wesentlich dazu bei, dass deine Website besser gefunden wird und für alle Nutzer zugänglich ist. Das ist nicht nur gut für dein SEO, sondern auch für die Nutzerfreundlichkeit und Barrierefreiheit deiner Seite.

Mein Fazit

Die Optimierung von Bildern für deine Divi-Website ist essenziell, um die Ladezeiten zu verbessern, die Benutzererfahrung zu optimieren und dein SEO-Ranking zu stärken. Beginne mit der Wahl des richtigen Dateiformats, wie WebP, das eine ausgezeichnete Balance zwischen Qualität und Dateigröße bietet. Achte auf die richtige Auflösung und Größe der Bilder, um unnötig große Dateien zu vermeiden. Vergiss nicht, deine Bilder korrekt zu beschriften, um die Zugänglichkeit und Auffindbarkeit deiner Website zu erhöhen. Mit diesen Schritten sicherst du dir eine schnellere und benutzerfreundlichere Website.

Wenn du noch mehr Tipps und Tricks zum Thema Webdesign und Bildoptimierung suchst, schau dir gerne die weiteren Beiträge auf meinem Blog an!

Vielen Dank für’s Lesen! Wenn du den Beitrag hilfreich gefunden hast, freue ich mich darüber, wenn du ihn mit anderen teilst! Du hast das Divi-Theme noch nicht, möchtest es dir aber kaufen? Wenn du über den nachfolgenden Banner bestellst, kostet dich das Divi Theme keinen Cent mehr und du unterstützt zusätzlich meine Arbeit.

Bis bald!
Alex von CCA media