Gut optimierte Bilder können Ihre Website schneller, zugänglicher und in den Suchergebnissen besser auffindbar machen.

Aber wie stellen Sie sicher, dass Ihre Bilder für Sie arbeiten? In diesem Leitfaden führen wir Sie durch die besten Praktiken zur Optimierung von Bildern, um sowohl die Performance als auch das Ranking in Suchmaschinen zu verbessern.

Die Wahl des richtigen Dateiformats

Das Dateiformat, das Sie für Ihre Bilder wählen, ist wichtiger, als Sie vielleicht denken. Jedes Format bietet unterschiedliche Vorteile in Bezug auf Geschwindigkeit und Qualität. Die falsche Wahl kann Ihre Website verlangsamen oder die Bildqualität mindern.

JPEG: ist ideal für komplexe Bilder und Fotos. Es bietet ein gutes Gleichgewicht zwischen Dateigröße und Qualität.
PNG: eignet sich gut, wenn Sie transparente Hintergründe benötigen (z. B. Logos oder Icons). PNG-Dateien sind jedoch größer als JPEGs.
WebP: ist ein neueres Format, das hohe Qualität bei kleinen Dateigrößen bietet – perfekt für die meisten Webbilder. Es gibt viele Online-Converter von JPEG/PNG zu WebP.

Bilder komprimieren für schnelleres Laden

Große Bilder können Ihre Website verlangsamen, was sich negativ auf die Nutzererfahrung und das Suchmaschinenranking auswirkt. Durch die Komprimierung von Bildern wird die Dateigröße reduziert, während die Bildqualität akzeptabel bleibt.

Es gibt zwei Arten der Komprimierung:

Lossy: Entfernt einige Bilddaten, um die Dateigröße zu verringern (wird bei JPEGs verwendet). Am besten für Blogbilder und Fotos geeignet, bei denen ein kleiner Qualitätsverlust nicht auffällt.
Lossless: Behält alle Bilddaten bei, komprimiert jedoch die Datei so weit wie möglich (wird bei PNGs verwendet). Ideal, wenn die Qualität oberste Priorität hat.

Gut: Ein Bild von 500 KB auf 80 KB komprimieren, mit minimalem Qualitätsverlust, um die Ladezeit der Seite zu verbessern.

Schlecht: Ein unkomprimiertes 3-MB-Bild hochladen, das Ihre Website verlangsamt.

Vwerwendung von beschreibenden Datei Namen und Alt-Text

Dateinamen und Alt-Texte helfen Suchmaschinen, Ihre Bilder zu verstehen. Ohne diese tragen Ihre Bilder nicht effektiv zur Suchmaschinenoptimierung (SEO) bei. Der Schlüssel ist, beschreibend, aber prägnant zu sein.

File names: Verwenden Sie Wörter, die das Bild beschreiben, und fügen Sie relevante Keywords hinzu. Zum Beispiel ist „rote-schuhe.jpg“ besser als „IMG_1234.jpg“.
Alt text: Bietet eine textuelle Beschreibung des Bildes, die von Screenreadern und Suchmaschinen verwendet wird. Integrieren Sie Keywords, aber vermeiden Sie Keyword-Stuffing..

Bildgrößenanpassung und Dimensionsmanagement

Das Hochladen großer, hochauflösender Bilder, wenn dies nicht notwendig ist, kann Ihre Website verlangsamen. Passen Sie Ihre Bilder an die benötigten Anzeigegrößen an.

Vor dem Hochlanden anpassen: Laden Sie kein 2000 px breites Bild hoch, wenn es auf Ihrer Website nur mit 500 px angezeigt wird. Ändern Sie die Größe auf 500 px, bevor Sie es hochladen.
Use responsive images: Mit Tools wie srcset und dem <picture> Element können Sie je nach verwendetem Gerät unterschiedliche Bildgrößen ausliefern.

Gut: Ein auf 500 px verkleinertes Bild hochladen, das auf allen Geräten schnell lädt.

Schlecht: Ein 3000 px großes Bild für ein kleines Thumbnail hochladen, was Bandbreite verschwendet und die Seite verlangsamt.

Mobile Optimierung

Mehr als die Hälfte des gesamten Internetverkehrs stammt von mobilen Geräten. Die Optimierung Ihrer Bilder für Mobilgeräte ist entscheidend für SEO und Benutzererfahrung.

Verwenden Sie responsive Bilder, die sich an die Bildschirmgröße anpassen.
Komprimieren Sie Ihre Bilder, damit sie auch bei langsameren Mobilfunkverbindungen schnell geladen werden.
Lazy Loading: Bilder erst laden, wenn sie in den sichtbaren Bereich scrollen, um die anfängliche Ladezeit zu verbessern.

Lazy Loading und Page-Speed

Die Ladegeschwindigkeit einer Seite ist ein wichtiger Rankingfaktor für Google. Lazy Loading ist eine effektive Technik zur Leistungssteigerung, da Bilder erst geladen werden, wenn sie sichtbar werden.

Um Lazy Loading zu implementieren, fügen Sie das Attribut loading="lazy" zu Ihren <img> Tags hinzu.
Dies reduziert die anfängliche Ladezeit, insbesondere bei Seiten mit vielen Bildern.

Gut: In einem Blogbeitrag mit 10 Bildern stellt Lazy Loading sicher, dass zunächst nur die sichtbaren Bilder geladen werden, was die Ladezeit der Seite verkürzt.

Schlecht: Alle Bilder gleichzeitig laden, was die Seite verlangsamen und Benutzer frustrieren kann.

Strukturierte Daten und Sitemaps

Suchmaschinen das Verständnis Ihrer Bilder zu erleichtern, kann die Wahrscheinlichkeit erhöhen, dass sie in den Suchergebnissen angezeigt werden. Verwenden Sie strukturierte Daten und Bild-Sitemaps, um Ihr SEO zu verbessern.

Strukturierte Daten (Schema Markup): Fügen Sie Kontext zu Bildern hinzu, wodurch sie eher in erweiterten Suchergebnissen erscheinen.
Bild-Sitemaps: Reichen Sie eine Sitemap bei der Google Search Console ein, um Suchmaschinen das Auffinden Ihrer Bilder zu erleichtern.

Beispiel für ein Schema-Markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://thiswebsite.com/image-path", 
  "name": "Weibliche Präsidentin im Oval Office",
  "description": "Eine Zeichnung einer weiblichen Präsidentin, die hinter dem Schreibtisch im Oval Office sitzt, umgeben von klassischer Dekoration wie der amerikanischen Flagge, Bücherregalen und einem großen Fenster.",
  "author": {
    "@type": "Person",
    "name": "Artist Name"
  },
  "datePublished": "2024-10-16",
  "license": "https://thiswebsite.com/image-license",
  "representativeOfPage": true,
  "thumbnailUrl": "https://thiswebsite.com/thumbnail-path",
  "width": "1024",
  "height": "1024"
}
</script>

Guter und Schlechter Alt-Text

Stellen Sie sich vor, Sie schreiben einen Artikel über eine Präsidentin. Wie würden Sie den Alt-Text für das Bild formulieren?

Guter Alt-Text

Für das Bild einer Präsidentin sollte der Alt-Text beschreibend, prägnant und kontextbezogen sein. Hier sind einige Beispiele, je nach Situation:

Alt-Text: „Porträt von Präsidentin [Name] im Oval Office.“ – Dies bietet genügend Kontext, um das Bild zu beschreiben.
Alt-Text: „Präsidentin [Name] hält eine Rede vor den Vereinten Nationen.“ – Diese Version ist kurz, beschreibend und hebt die berufliche Tätigkeit der Präsidentin hervor.
Alt-Text: „Präsidentin [Name] schüttelt [Name] die Hand, um ein Friedensabkommen zu unterzeichnen.“ – Fügt Kontext zu diplomatischen Verhandlungen hinzu.

Schlechter Alt-Text

Schlechter Alt-Text für das Bild einer Präsidentin beschreibt das Bild unzureichend oder liefert irrelevante, vage oder zu generische Informationen. Hier sind einige Beispiele für schlechten Alt-Text:

lt-Text: „Image12345.jpg“ – Dies ist unbrauchbar, da es das Bild überhaupt nicht beschreibt und weder für SEO noch für die Barrierefreiheit einen Mehrwert bietet.
Alt-Text: „Die aktuelle Präsidentin posiert für ein Präsidentinnenbild mit einer Präsidentinnenfotografin im offiziellen Präsidentinnenbüro.“ – Dieses Beispiel ist übertrieben, da es versucht, zu viele Keywords unterzubringen.
Alt-Text: „Frau hält eine Rede.“ – Dies ist zu vage, da nicht klar ist, wer die Person ist, wo sie sich befindet oder was genau passiert. Das mindert den Kontext.
Alt-Text: „Die Präsidentin trägt einen blauen Anzug, steht hinter einem Rednerpult, hält eine Rede, und im Hintergrund klatschen Menschen, während sie bei einer Veranstaltung im Freien spricht.“ – Dies ist zu detailliert und enthält unnötige Informationen, die nicht zum besseren Verständnis des Bildes beitragen.

Fazit

Bildoptimierung ist ein wesentlicher Bestandteil einer benutzerfreundlichen, SEO-starken Website. Durch Best Practices wie die Wahl des richtigen Formats, das Komprimieren von Bildern, die Verwendung beschreibender Dateinamen und Alt-Texte sowie die Implementierung eines responsiven Designs können Sie die SEO und Performance Ihrer Website erheblich verbessern.

Eveline Roberts