Alles, was Sie für den Erfolg wissen müssen

Grundlegende Tipps zur Bildoptimierung, die jeder für jede Art von Website anwenden kann, auch für WordPress. Viele Fakten, Statistiken und Screenshots enthalten.

Hier sind drei kurze Fakten, die Ihnen helfen zu verstehen, wie wichtig Bilder für Menschen (und für SEO) sind:

  • 90 % aller Daten, die das Gehirn überträgt, sind visuell.
  • Das menschliche Gehirn verarbeitet ein Bild in der gleichen Zeit, die es für das Lesen von 1000 Wörtern benötigen würde. (Ja, es stellt sich heraus, dass das alte Sprichwort tatsächlich auf einer wissenschaftlichen Tatsache beruht).
  • Der Wiedererkennungswert von visuellen Inhalten liegt selbst nach drei Tagen noch bei 65%, während der Wiedererkennungswert für geschriebenen Text nur bei 10% liegt.

Da der Großteil des Suchvolumens von Mobiltelefonen stammt und die Aufmerksamkeitsspanne der Menschen auf acht Sekunden gesunken ist, ist es für Websites unerlässlich, ein schnelles, reibungsloses und angenehmes Benutzererlebnis zu bieten.

Die Bildoptimierung ist ein wichtiger Teil dieses Puzzles.

Was kann die Bildoptimierung für meine Nutzer (und für SEO) leisten?

  • Indem Sie die Geschwindigkeit Ihrer Website um Sekunden reduzieren, können Sie die Absprungrate senken und die Verweildauer auf der Website erhöhen.
  • Es hilft, die Ladegeschwindigkeit der Seite zu verbessern, was ein wichtiger Google-Ranking-Faktor ist.
  • Es kann dazu beitragen, Ihre Keyword-Prominenz zu verbessern. Mehr dazu erfahren Sie hier.
  • Sie hilft bei der umgekehrten Bildersuche, was vor allem bei produktbasierten Unternehmen einen großen Mehrwert darstellen kann.
  • Viele Geräte und Desktops verwenden hochauflösende Bildschirme, wodurch der Bedarf an qualitativ hochwertigen Bildern steigt.

Grundlegende Tipps zur Bildoptimierung

Diese Tipps kann jeder für jede Art von Website anwenden (auch für WordPress), so dass Sie nicht allein auf die Gnade Ihrer Entwickler und Designer angewiesen sind.

Die Wahl des richtigen Bildtyps: Vektor oder Raster?

  • Vektorbilder sind einfach und werden mit Hilfe von Linien, Punkten und Polygonen erstellt. Vektorbilder sind am besten für Formen, Logos, Symbole und flache Bilder geeignet. Sie weisen so gut wie keine Pixel auf, wenn man hineinzoomt, und eignen sich daher für Geräte mit hoher Auflösung. Außerdem können Sie ein und dieselbe Bilddatei auf mehreren Plattformen verwenden (auch für responsives Webdesign), ohne mehrere Varianten verwenden zu müssen.
  • Bei Rasterbildern hingegen handelt es sich um Bilder, die aus rechteckigen Rastern bestehen, die jeweils mit mehreren Farbwerten (Pixeln) gefüllt sind. Rasterbilder geben den Bildern, die Sie vermitteln möchten, Tiefe und verleihen ihnen einen emotionalen und psychologischen Reiz, da diese Bilder real aussehen. Wenn sie jedoch nicht gut behandelt werden, können sie die Ladegeschwindigkeit Ihrer Website stark beeinträchtigen! Außerdem müssen Sie möglicherweise mehrere Dateivarianten speichern, um sicherzustellen, dass sie auf verschiedenen Plattformen kompatibel sind und sich für responsive Designs eignen.

Google erwähnte auch, dass für die Übertragung eines Pixels vier Byte Speicher benötigt werden. Stellen Sie sich vor, Sie hätten mehrere Bilder auf einer Website mit 800 x 800 Pixeln. Unsere Website würde mindestens etwa 625 kBps benötigen. Oder, einfacher ausgedrückt, stellen Sie sich einen Elefanten vor, der an einem Hasenrennen teilnimmt.

Ich würde vorschlagen, idealerweise eine Mischung aus beidem zu verwenden. Ein ideales Verhältnis könnte 40 % Vektorbilder und 60 % Rasterbilder sein.

Auswahl des besten Bildformats – SVG, JPG, PNG oder GIF?

SVG ist die einzige und beste Option für Vektorbilder. Aufgrund der flachen Bilder profitieren Sie außerdem von einer hohen Qualität, die leicht skalierbar ist.

Beste Formate für Rasterbilder:

  • PNG: Erzeugt qualitativ hochwertige Bilder mit großen Dateigrößen. Es ist nur dann zu empfehlen, wenn Sie jedes Detail des Bildes speichern möchten.

  • JPG: Erzeugt Bilder von guter Qualität, die keine große Dateigröße haben. Allerdings handelt es sich dabei um verlustbehaftete Bilder, was bedeutet, dass Sie einige kleine Bilddetails dauerhaft verlieren. JPG ist zweifelsohne das bevorzugte Bildformat, da es das problemlose Herunter- und Hochladen von Bildern ermöglicht. Aus diesem Grund sind sie am weitesten verbreitet – etwa 72,3 % der Websites verwenden JPG-Bildformate und die meisten Telefone speichern Bilder als JPG-Dateien. Sie werden besonders für E-Commerce-Websites und soziale Medien empfohlen.

  • Gif: Wenn Sie nach Animationen suchen, ist GIF die ideale Wahl, da es 256 verschiedene Farben aus dem 24-Bit-RGB-Farbraum unterstützt. Zurzeit verwenden nur 26,6 % der Websites das GIF-Format.

Größenänderung von Bildern

Bei einer so großen Anzahl an Geräte liegt es auf der Hand, warum die Leute mit der idealen Bildgröße durcheinander kommen.

Beachten Sie, dass Bildgröße und Bilddateigröße zwei verschiedene Dinge sind. Hier erklären wir, wie Sie die ideale Bildgröße (auch Bildgröße genannt) ermitteln können.

Im Zusammenhang mit den Bildabmessungen werden wir auch das Seitenverhältnis besprechen.

Was ist ein Seitenverhältnis?

Seitenverhältnisse geben die Breite und Höhe eines Bildes an und werden im Format „x:y“ angegeben.

Warum ist das wichtig?

Erinnern Sie sich an die Zeit, als Sie versucht haben, ein Bild zu skalieren und es buchstäblich überproportional vergrößert haben? Genau davor bewahrt Sie das Programm. Wenn Sie sich beim Zuschneiden oder Ändern der Größe von Bildern auf ein Bildseitenverhältnis beziehen, können Sie die Lebensfähigkeit und Schönheit der Bildabmessungen beibehalten.

Je nach verwendetem Content-Management-System (CMS) haben Sie möglicherweise Ihre eigenen Maßvorlagen.

Laut Squarespace liegt die ideale Größe für die Bildoptimierung in einem CMS zwischen 1500 und 2500 Pixeln.

Aus persönlicher Beobachtung kann ich empfehlen, 1080 x 1080 Pixel und 1500 x 2500 Pixel zu verwenden.

Benennung von Bildern – Bewährte Praxis

Suchmaschinen haben Gehirne ohne Augen. Wenn Sie also Ihre Bilder nicht richtig benennen, können sie Ihre Bilder nicht „lesen“ und Sie nicht entsprechend einstufen. An dieser Stelle kommen Ihre Schlüsselwörter ins Spiel. Wie ich bereits oben erwähnt habe, können Sie Ihre Schlüsselwortdichte und Ihre Chancen auf eine Platzierung verbessern, wenn Sie Ihre Bilder gut benennen.

Lassen Sie uns dies anhand eines Beispiels erklären:

  • Wie Menschen Bilder üblicherweise speichern – „Zufällige Zahlen und Buchstaben“, „Blumen können tanzen“ und „Was habe ich mir nur dabei gedacht“

  • Wie man Bilder speichern sollte – „Fünf Tipps zur Bildoptimierung“ und „Die ideale Methode zur Benennung von Bildern im Jahr 2021“.

Benennen Sie Ihre Bilder in Kleinbuchstaben mit Bindestrichen dazwischen und ohne Leerzeichen. Wie Sie gesehen haben, habe ich das Schlüsselwort „Bildoptimierung“ in dem Beispiel „Fünf Tipps zur Bildoptimierung“ verwendet. Sie werden überrascht sein, wie sehr das beim Ranking hilft.

Bonus

Sie können auch die folgenden Möglichkeiten nutzen, um die Verwendung von Schlüsselwörtern im Inhalt Ihrer Website zu verbessern:

  • Alt-Text (Wenn Ihr Bild langsam lädt, wird dieser Text anstelle des Bildes angezeigt, damit die Nutzer eine Vorstellung davon bekommen, was dort zu sehen sein sollte).
  • Bildunterschriften (Text, der eine kurze Beschreibung enthält und den Nutzern hilft, mehr über das Bild zu erfahren).

Und wenn Sie eine E-Commerce-Website haben, können Sie sogar strukturierte Daten nutzen, um der Suchmaschine genauere Angaben zu Farbe, Typ, Größe und vielem mehr Ihrer Produkte zu geben.

Komprimierung der Bytegröße der Bilddateien

Die Komprimierung einer Datei ist vielleicht der einfachste, aber auch der wichtigste Teil der Bildoptimierung, da sie sich direkt auf die Ladezeit der Website auswirkt. Die Punkte eins bis vier bereiten Sie auf diese letzte Phase der Bildoptimierung vor.

Zwei Live-Beispiele dafür, wie viel Ladezeit Sie unterm Strich kosten kann:

  • Amazon beobachtete einen Umsatzrückgang von einem Prozent für jede Verlängerung der Seitenladezeit um 100 ms.

  • Google verzeichnete einen 20-prozentigen Umsatzrückgang für jede Verlängerung der Anzeigezeit der Suchergebnisse um 500 ms.

Was ist die ideale Dateigröße?

Sie sollten eine Dateigröße von unter 70KB anstreben. Bei großen Dateien mit mehr als 300KB sollten Sie bestenfalls eine Dateigröße von 100KB erreichen. Auf diese Weise brauchen Ihre Bilder keine zusätzlichen Millisekunden zum Laden und Sie erhalten verlustbehaftete, komprimierte Bilder, die die visuelle Qualität nicht beeinträchtigen.

Wie kann man die Dateigröße eines Bildes verringern?

Alles, was Sie tun müssen, ist, diese Dateien auf einer Website zur Dateikomprimierung abzulegen, und schon sind Sie fertig. Hier finden Sie einige gute, kostenlose Online-Tools zur Komprimierung von Bilddateien:

  • TinyPNG/TinyJPG – (Komprimiert .png- und .jpg-Dateien – 135 kb reduziert auf 43,9 kb – Bearbeitet bis zu 20 Bilder gleichzeitig – Unterstützt Dropbox)
  • Image optimizer – (Komprimiert .png- und .jpg-Dateien – 135 kb reduziert auf 49 kb – Bearbeitet jeweils nur 1 Datei)
  • WeCompress – (Komprimiert .png-, .jpg- und andere Dateien – 135 kb reduziert auf 48 kb – Bearbeitet nur 1 Datei gleichzeitig)
  • EzGif – (Komprimiert .gif und andere Dateien – 2MiB reduziert auf 1.77MiB – Bearbeitet nur 1 Datei auf einmal. Außerdem können Sie das Gif vor der Komprimierung bearbeiten).

Bonus Tipps

  • Verwenden Sie anstelle von Bildern mit Text, lieber Web-Schriften, da diese besser aussehen, nicht mit dem Bild skaliert werden müssen, weniger Platz benötigen und die Ladezeit verkürzen.

  • Verwenden Sie für Ihre Bilder eine Auflösung von 72dpi.

Abschließende Anmerkungen

Auch wenn Sie all diese Tipps zur Bildoptimierung beherzigen, kann es passieren, dass Ihre Website in 13 Sekunden oder noch schneller geladen wird. Das ist der Zeitpunkt, an dem Sie sich vielleicht fragen sollten:

  • Brauche ich all diese Bilder?
  • Welche Bilder sind überflüssig?
  • Wo ist der beste Platz für Bilder auf der Website?

Website-Inhalte, sowohl visuelle als auch schriftliche, stehen in einer Wechselbeziehung, die Emotionen weckt und Menschen dazu inspiriert, sich weiter mit Ihrem Produkt oder Ihrer Dienstleistung zu beschäftigen. Die Menschen (oder zumindest ich) beurteilen ein Unternehmen anhand seiner Website.