This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Datenschutzerklärung

Accept and continue

Report a bug

Cancel
3831 26
SEO Lesezeit 12 Minuten 8 August 2018

Der volle Guide der Bildoptimierung auf der Website

Der volle Guide der Bildoptimierung auf der Website

Anastasija Winogradowa
SEO-Spezialist
Bilder ziehen Besucher auf die Website und generieren mehr Traffic. Das Letzte, was deine Leser sehen möchten, wenn sie eine Seite aufrufen, ist ein langweiliger Text.
Jeder Inhalt, bei dem keine Bilder verwendet werden, scheint endlos und schwer zu verstehen zu sein. Bilder beeinflussen auch die Ladezeit und das Surfverhalten von Usern.

Deswegen kann qualitative Bildoptimierung die Rankingposition deiner Website in Suchmaschinen verbessern. Wie optimierst du Grafiken und Fotos, um Suchsysteme und Nutzer anzusprechen? Lies in diesem Artikel nach :)

Warum ist es so wichtig, Bilder zu optimieren?

Der Mensch liest Texte nicht sorgfältig durch, sondern „scannt" einfach. Oft lenken Seitenbesucher die Aufmerksamkeit nur auf grafische Elemente. Aus diesem Grund verwenden Suchmaschinen ein paar Kriterien, nach denen sie Bilder analysieren.

Sie bestehen hauptsächlich in der Verbesserung von Inhalten und Befriedigung der Nutzerbedürfnisse. Deswegen sollten Bilder schnell geladen, schön, informativ und hochwertig sein.

Seit Snippet-Texte in Google SERPs erweitert wurden, ist es sehr einfach, auf die erste Seite mithilfe von Grafiken zu kommen. Dein Bild kann auch zusammen mit dem Content von konkurrierenden Webseiten angezeigt werden.

Dadurch entstehen neue Chancen, Sichtbarkeit und Erkennbarkeit der Website mit Bildern und Infografiken zu erhöhen. Damit deine Website die besten Ergebnisse bei Suchmaschinen erzielt, solltest du komplexe Bildoptimierung vornehmen. Das Ziel ist, Suchsystemen dabei zu helfen, den Inhalt richtig zu analysieren und einzuordnen.

Welche Anforderungen bestehen an die Bildentwicklung?

Insgesamt laufen die Anforderungen an die Entwicklung von Bildern auf folgende Daten hinaus: Format, Qualität, Dateigröße.
#1

Bildformat

Google indexiert Bilder in den Formaten BMP, GIF, JPEG, PNG, WebP und SVG.

JPEG: Benutze dieses Dateiformat für Fotos.
PNG: Das Format ist für die Grafik oder einfach gesagt für Elemente geeignet, die Gestalter zeichneten.
SVG: Das ist das Format für die Darstellung der Vektorgrafik.

Es gibt auch andere Formate, wie WebP und JPEG-XR. Obwohl sie einige Vorteile haben, werden sie nicht von allen Browsern unterstützt. Zum Beispiel passt JPEG-XR zu IE, WebP ist das geeignete Format für Chrome, Opera, Android. In diesem Zusammenhang werde ich sie nicht betrachten. Trotzdem steht dir die Wahl offen :)
#2

Qualität

Zur Optimierung der Bilder für Google solltest du eine ideale Lösung zwischen Dateigröße und Qualität finden. Der Content ist in erster Linie für Besucher vorgesehen, deshalb sollten Fotos und Grafiken scharf und visuell ansprechend sein.
#3

Bildgröße und Auflösung

Die Bildgröße wirkt sich auf die Ladezeit der Seite aus, was ihrerseits das Ranking der Website beeinflusst. Wenn du zu viele hochauflösende Fotos verwendest, kann dies erheblich die Seitenladezeit verzögern. Es gibt eine Vielzahl von Tools, die grafische Darstellungen ohne Qualitätsverlust verkleinern (davon werde ich später erzählen). Wenn du sie anwendest, vergleich unbedingt das originale Bild mit dem Endergebnis, um ein optimales Verhältnis von Qualität und Quantität zu erreichen.

Erstelle Bilder in der Größe, in der sie auf der Webseite dargestellt werden.

Suchmaschinen verstehen deinen Seitencontent richtig, wenn du in CSS Breite und Höhe angibst. Für Retina-Displays füge Bilder in der Größe 2x hinzu und stelle die Darstellung der verschiedenen Größen entsprechend den Eigenschaften der Bildschirme ein. Sonst haben Benutzer von Retina-Displays das Risiko, Grafiken von schlechter Qualität anzuschauen.
Bildgröße und Auflösung der Bilder
Bekomme einen schnellen Überblick und spare deine Zeit

Möchtest du persönliche Serpstat-Demonstration, die Testversion oder erfolgreiche Use-Cases bekommen? Sende eine Demo-Anfrage und unser Support-Team kontaktiert dich ;)

Wie komprimierst du Bilder verlustfrei?

Wenn du das Internet schneller machen wirst, wäre dir Google sehr dankbar. Hier sind ein paar Cloud Tools, die du zur Bildkompression verwenden kannst.
1
Compressor ist ein kostenloser Service, der eine Beschränkung für die Größe der geladenen Datei auf 10 MB hat. Die Kompression ist auch ohne Qualitätsverlust möglich. In diesem Fall werden nur JPG- und PNG-Bildformate unterstützt. Mit dem Tool ist die Komprimierung um bis zu 90 % zu erreichen.
Beispel der Arbeit von Compressor
2
Mithilfe von Kraken können sowohl ein als auch mehrere Files gleichzeitig optimiert werden. Um Bilder der bestimmten Webressource zu optimieren, braucht man nur die URL der Website anzugeben. Die Ergebnisse bekommst du in der Form von Archivdateien.

Außerdem sind darin nützliche Features enthalten, wie Änderung der Bildgröße, API für Webressourcen und Plugins für WordPress und Magento.
Beispiel der Arbeit von Kraken
Die Services TinyPNG und JPEGMini funktionieren auf ähnliche Weise, obwohl sie verlustbehaftete Kompression beherrschen.
3
Noch eine Lösung bietet die Software ImageOptim für Mac, die standardmäßig die Bildqualität nicht reduziert. ImageOptim ist für JPEG-, SVG-, GIF- und PNG-Formate geeignet. Sie kann mehrere Files auf einmal komprimieren.

Der Service löscht solche Metadaten wie GPS-Position und Seriennummer der Kamera. Du kannst Bilder ins Internet stellen, ohne persönliche Informationen anzeigen zu lassen, die auch die Datenmenge vergrößern.

Es gibt auch Entsprechungen für Windows: FileOptimizer, Online interface, pngquant.
4
Server-Kompression

Gzip: Stelle den Web-Server zur Kompression JPEG-Files in Gzip-Format ein.

PageSpeed: Für Nginx und Apache ist das PageSpeed Modul zur Kompression auf dem Server-Niveau verfügbar. Empfehlungen zur Einstellung findest du hier.

Für die Analyse und Verfolgung der Bildgröße rate ich, die Online-Tools Pingdom und PageSpeed Insights zu verwenden.

PageSpeed Insights analysiert deine Seite und zeigt eine Liste von Ressourcen an, die verkleinert werden sollten. Dafür bietet es auch eine entsprechende Funktion, die laut diesen Empfehlungen Bilder und andere Dateien komprimiert.

Wie optimierst du Bilder auf der Seite?

#1

Dateiname

Um den Bildinhalt Suchmaschinen weiterzuleiten, gib entsprechende kurze Beschreibung im Bilddateinamen.

Als Trennzeichen benutze einen Bindestrich und vermeide generische Dateinamen wie „jzbdfjklJ_KSD5667.jpg". Der Name „go-pro.jpg" ist für Suchmaschinen verständlicher. Schlüsselwörter sollten maximal relevant sein und den Bildinhalt ausführlich beschreiben.

Beispiel: Wenn du mit einem Online-Shop arbeitest, der eine Seite mit GoPro 5 hat, wäre es besser, im Dateinamen das Modell zu nennen. In diesem Fall wird das Bild als „go-pro-hero-5-black-front.jpg" bezeichnet.
#2

Aufbewahrung

Speicher ähnliche Grafiken in einem Ordner, der einen entsprechenden Namen hat. Falls es auf der Website mehrere Bilder in einer Gruppe gibt (zum Beispiel Fotos von Handys des bestimmten Herstellers), sollten solche Files auf dem Server in einem Ordner gespeichert werden.

Beispiel: Beispiel.com/images/clothes/blue-jeans.jpg
#3

Bildpositionierung

Beim Ranking wird die Tatsache berücksichtigt, ob das Bild der Suchanfrage entspricht. Suchmaschinen analysieren den Text, der sich neben dem Bild befindet. Deswegen vermeide Diskrepanz zwischen Texten und Bildern.

Dieses Bild wurde in den Suchergebnissen für die Anfrage „weiße Hunde" angezeigt, was dem Inhalt wegen falscher Beschreibung nicht entspricht. Eine detaillierte Anleitung, wie du richtig die Bildbeschreibung erstellst, findest du weiter hinten.
Beispiel der Bildpositioniernung
 
Füge keine wichtigen Informationen auf dem Bild hinzu, denn Browser verstehen sie nicht.
#4

Backlinks

Außer dem Text beachten Suchmaschinen den Ankertext von Links, die zu Grafiken auf externen Webseiten führen. Erstelle externe Ankerlinks auf Basis von Bildern. Der Arkehrtext sollte mit dem Bildinhalt übereinstimmen.

Beispiel: Der Link zur Seite mit Innenraumfotos kann so aussehen:

<a href=https://beispiel.com/ interior/office-design.jpg>Fotos der Innenraumgestaltung</a>
#5

Alt-Attribute

Der Alt-Tag ist ein alternativer Text, der das Bild kennzeichnet. Er spielt eine wichtige Rolle in der Suchmaschinenoptimierung von Bildern:

  • Falls das Bild aus irgendeinem Grund nicht geladen wird, zeigt der Browser den alternativen Text.
  • Bildschirmleser benutzen das Alt-Attribut, um den Bildinhalt sehbehinderten Menschen zu erklären.
  • Webcrawler verwenden den Alt-Text, damit sie das Bild richtig indexieren können. Mithilfe des Meta-Tags werden relevante Ergebnisse auf Suchanfrage vom Benutzer bestimmt
Ich empfehle Keywords in die Beschreibung hinzufügen, ohne darüber das Informative zu vergessen. Normalerweise besteht das Alt-Attribut aus 125 Zeichen. Erstelle eine inhaltsreiche Beschreibung.

Wie würdest du dieses Foto beschreiben (ich hoffe, dass du keinen großen Hunger hast? ↓
Was denkst du, welche Variante besser ist?

"width="947" height="591">
oder
"width="947" height="591">
Natürlich ist die zweite Variante besser, weil sie das Bild maximal charakterisiert :)

Vergiss nicht, dass überflüssige Keywords die Optimierung schlecht beeinflussen. Deswegen ist der Text falsch: „Schokoladentorte Schokoladen Desserts mit Schokolade Sahnen Belegfrüchte Rezept".
#6

Sitemap

In Ergänzung zur Basis-Sitemap erstelle die Bilder-Sitemap sitemap-image.xml. Sie erhöht die Wahrscheinlichkeit, dass deine Website in der Google Bildersuche angezeigt wird.

Beispiel:

User-agent: Googlebot
Sitemap: https://beispiel.com/sitemap.xml
Beispiel sitemap-image.xml
#7

Mikrodaten

Mikrodaten des ImageObject helfen Suchmaschinen, den Content zu unterscheiden und als ein passendes Suchergebnis darzustellen.

Hier ist ein Beispiel der Mikrodaten-Verwendung: http://schema.org/ImageObject
#8

Einzigartigkeit

Um gute Ergebnisse bei der Bildoptimierung zu erreichen, veröffentliche nicht nur hochwertige, sondern auch einzigartige Bilder. Suchmaschinen schätzen qualitative und originelle Inhalte, um vielfältige und interessante Ergebnisse auszuwählen.

Wenn du nicht sicher bist, dass der Content auf deiner Website einzigartig ist, kannst du es leicht mit dem Service Tineye prüfen.

Oder prüfe, ob das Bild früher schon indexiert wurde.
Google-Bilderindexierung
Wenn in Ergebnissen keine ähnlichen Bilder gefunden werden, hast du einzigartigen Inhalt. Bildkopien befinden sich in der Liste rechts. Um die gefundene Liste anzuschauen, klicke auf den Link mit passender Größe.

Wo findest du Bilder?

#1

Google-Suche

Der einfachste Weg ist, die Google-Bildersuche zu verwenden. Achte darauf, dass Google die Bilder zeigt, die nicht nach Lizenz gefiltert werden. Filtere die Ergebnisse:
Google-Bildersuche
#2

Kostenlose Datenbanken

Wie erstellst du noch einzigartige Bilder? Finde das passende Foto in kostenlosen Datenbanken (zum Beispiel in Unsplash) und verbessere es mit der Fotosoftware (Canva ist gut dazu geeignet). Canva hat Unmengen von Elementen und einige von ihnen sind gratis. Kombiniere sie einfach und kreiere den einzigartigen Inhalt.
Canva zur Bilderstellung
#3

Reddit

Reddit-Nutzer stimmen dem offenen Zugang auf den Content zu, den sie auf der Plattform veröffentlichen. Außerdem besteht eine sehr geringe Wahrscheinlichkeit, auf diese Grafiken in ähnlichen Blogs oder sozialen Netzwerken zu stoßen.

Subreddits von Reddit
Wenn du beispielsweise das Bild mit einer Torte brauchst, öffne den Abschnitt DessertPorn.
Reddit, offene Abschnitte
  • Sortiere Daten nach Popularität und wähle das passende Bild.
Sortierung nach Popularität auf Reddit
  • Wähle das Bild aus.
Wenn du die Erweiterung Reddit Enhancement Suite verwendest, kannst du Bilder in voller Größe direkt auf der Seite anzeigen lassen. Wie das funktioniert?
Offene Bilder auf Reddit

Fazit

Zur erfolgreichen Bildoptimierung solltest du alle oben beschriebene Methoden praktisch anwenden:
1
Speicher Bilder im richtigen Dateiformat, die von Suchmaschinen indexiert werden.
2
Gib die Größe des sichtbaren Bildbereichs auf der Seite an.
3
Füge auf der Seite originelle und nützliche Bilder hinzu.
4
Verwende Tools zur Kompression.
5
Optimiere Bilder mit dem Alt-Tag.
6
Erstelle die Sitemap für Bilder.
7
Benutze Mikrodaten für Grafiken.
8
Lade Bilder herunter, die zum Textkontext passen.
9
Vergiss nicht, dass der grafische Content in erster Linie für Besucher erstellt wird.
Beim Kreieren und der Optimierung von Bildern folge dem Prinzip: Qualität und Nützlichkeit des Contents sind die wichtigsten Kriterien, nach denen Suchmaschinen deine Webseite einschätzen. Viel Erfolg bei der Optimierung!

Erfahre, wie du Serpstat mit bestmöglicher Effizienz verwendest

Möchtest du persönliche Produktdemonstration, die Testversion oder erfolgreiche Use-Cases bekommen?

Sende eine Anfrage und unser Support-Team kontaktiert dich ;)

Rate the article on a five-point scale

The article has already been rated by 2 people on average 5 out of 5
Hast du einen Fehler gefunden? Markiere diesen und betätige Ctrl + Enter, um es uns mitzuteilen

Teile den Artikel in sozialen Netzwerken :)

Einloggen Registrieren

Вы исчерпали лимит запросов.

Or email
Забыли пароль?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code queriesLeft

smthWentWrong

contactSupport
telegramVerification telegramBotLink
Choose the project to view data on it

Persönliche Produktdemonstration

Serpstat hilft dir, noch mehr Zeit zu sparen! Bitte fülle das Formular vollständig aus — du wirst schnellstmöglich von einem unserer Produktspezialisten kontaktiert.

Persönliche Demonstration umfasst den Testzeitraum des Services, umfangreiche Anleitungen und Webinare, individuelle Beratung von Serpstat-Experten. Wir machen alles, damit du mit Serpstat zurechtkommst.

Name

Email

Telefonnummer

Wir freuen uns auf deine Kommentare

Upgrade your plan

Export is not available for your account. Please upgrade to Plan A or higher to get access to the tool. Learn more.

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
Просмотр Редактирование

E-mail
Message
Optional
E-mail
Message
Optional

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов