Bildoptimierung kann verwirrend sein, mit gemischten Signalen, die von Google und Horden von SEO-Experten gesendet werden. Gerade wenn Sie damit fertig sind, Ihre Bilder reaktionsfähig zu machen und Ihre Inhalte „faul geladen“ zu sein, bringt Google eine Core Web Vitals-Metrik heraus, die Ihnen ein „Nicht bestanden“ gibt, wenn sie Ihre Inhalte auf der Seite verschieben. Selbst wenn Sie dieses Problem beheben, beschwert sich Google in seinen PageSpeed-Berichten, dass Sie Ihre Bilder nicht als WebP speichern.

Kumulative Layoutverschiebungen für Bilder

Seit mehr als einem Jahrzehnt weisen wir Webentwickler darauf hin, keine feste Breite und Höhe für Bilder festzulegen. Wenn Sie ein Bild in Ihrem HTML-Code auf 800 x 600 Pixel einstellen und ein iPhone 8-Benutzer die Seite mit einer Bildschirmauflösung von 750 x 1.334 Pixel anzeigt, erhält er eine sehr störende horizontale Bildlaufleiste und es werden 50 Pixel des Bildes abgeschnitten. Es ist nicht mobilfreundlich und uns wurde gesagt, wir sollten es für Smartphone-Benutzer optimieren. Stattdessen machen wir das Bild mithilfe von CSS in der Größe anpassbar, basierend auf der Breite des Ansichtsfensters (z. B. Breite: 100 %; Höhe: automatisch;).

Das Problem dabei ist, dass die meisten Bilder nicht sofort auf der Seite geladen werden. Der HTML- und Textinhalt wird zuerst geladen, dann werden die Bilder heruntergeladen und basierend auf Ihrem CSS-Stil in der Größe angepasst. Und ohne bestimmte Abmessungen im <img>-Tag hat der Browser keine Ahnung, wie groß das Bild sein wird, bis es heruntergeladen wird. Auf dem Webseiten-Layout wird kein Platz reserviert, bis das Bild zur Anzeige verfügbar ist. Dies ist kein Problem für Desktop-Benutzer mit schnellen Internetverbindungen, kann aber bei Besuchern mit langsamen Verbindungen zu Frustration führen, da sich Schaltflächen, Inhalte und Links bewegen, bevor Sie darauf klicken oder scrollen können.

Core Web Vitals (ja, Mai 2021) enthält daher eine Metrik namens Cumulative Layout Shift, die Seiten schlecht bewertet, wenn Bilder und andere Elemente nach dem Laden unerwartete Änderungen am Seitenlayout vornehmen. Wie können wir das Problem beheben, ohne die responsive Bildgrößenänderung zu verlieren?

Seitenverhältnis

Google Chrome und Microsoft Edge (plus Firefox & Safari in Kürze) haben eine Lösung für dieses Problem, mit der CSS-Eigenschaft „aspect-ratio“. In den meisten Situationen werden Bilder so eingestellt, dass sie 100 % der Container-/Seitenbreite ausfüllen und dann die Höhe „automatisch“ festlegen. Ein 1.500 x 1.000 Pixel großes Bild würde also auf einem älteren iPhone-Modell proportional auf 750 x 500 skaliert. Das CSS und der Browser wissen jedoch nur, dass das Bild 500 Pixel hoch sein wird, sobald das Bild geladen ist.

Das Seitenverhältnis behebt dies, indem Sie die Bildproportionen vor dem Laden festlegen können. In unserem Fall beträgt das Bildseitenverhältnis 3/2 (ein einfacher Bruch von 1.500/1.000). Durch die Einstellung „Seitenverhältnis: 3/2;“ In der CSS-Klasse des Bildes weiß der Browser, dass die Bildhöhe nach dem Laden 500 Pixel beträgt, und kann den erforderlichen Platz reservieren. Dies verhindert eine Layoutverschiebung.

Sichtbarkeit der Inhalte

Wenn Ihre Website nicht auf einem langsamen JavaScript-Framework wie React oder Angular läuft, sind große und/oder viele Bilder wahrscheinlich Ihr größtes Geschwindigkeitsproblem. Es muss nicht nur jedes Bild heruntergeladen werden, sondern die Datei muss gerendert und auf der Seite angeordnet werden.

Die alte Methode, dies anzugehen, bestand darin, JavaScript zu verwenden, um die Bilder nur zu laden, wenn der Benutzer sie in die Ansicht scrollt (Lazy Loading). Diese setzt auf JavaScript und hat noch „Overhead“ für den Webbrowser. Wie wir in unserem Artikel Core Web Vitals in E-Commerce besprochen haben , unterstützen Chrome und andere Browser jetzt natives Lazy Loading . Aber indem wir das Laden von Bildern verzögern, bis sie benötigt werden, verzögern wir auch die unvermeidliche kumulative Layoutverschiebung, da Browser die Abmessungen unserer Bilder immer noch nicht kennen, bis sie geladen sind.

Verwenden Sie die neue CSS-Eigenschaft „content-visibility“ , die in Chrome, Opera und Edge (in Kürze Firefox und Safari) verfügbar ist. Diese Eigenschaft kann auf ganze Abschnitte einer Seite angewendet werden und das Rendern dieser Abschnitte verzögern, bis sie in die Ansicht gescrollt werden. Im Gegensatz zum verzögerten Laden werden die Bild-Assets immer noch zu Beginn des Seitenladevorgangs heruntergeladen. Besucher können sehr schnell mit dem Lesen der sichtbaren Inhalte beginnen und die Assets für Elemente weiter unten auf der Seite im Hintergrund herunterladen. Dies verringert die Wahrscheinlichkeit von CLS-Problemen, da der Browser die Assets bereits heruntergeladen haben sollte, wenn Bilder in die Ansicht gescrollt werden.

Dies ist jedoch kein direkter Ersatz für natives Lazy Loading. Das Laden aller Medieninhalte für eine große Seite ist für mobile Benutzer mit langsamen Verbindungen möglicherweise nicht wünschenswert. Große Bilder und Videos sollten immer noch natives Lazy Loading verwenden, um den Bandbreitenverbrauch zu reduzieren, aber immer zusammen mit der oben erwähnten CSS-Eigenschaft „aspect-ratio“. Sie können auch „Content-Sichtbarkeit“ und Lazy Loading zusammen verwenden, wiederum unter der Bedingung, dass Sie „Seitenverhältnis“ für Bilder und andere Medieninhalte verwenden.

WebP, WebM und AVIF

Wenn Sie viele Core Web Vitals-Optimierungen durchgeführt haben, ist eines der wenigen Probleme, die ein PageSpeed/Lighthouse-Bericht gegen Ende hervorheben könnte, die Verwendung moderner Bildformate wie WebP.

Welche neuen Bildformate gibt es?

WebP ist ein von Google für das Web entwickeltes Bildformat, das PNG-, GIF- und JPEG-Bilder ersetzen soll. Es wurde entwickelt, um eine bessere Komprimierung als ältere Formate und daher kleinere Dateigrößen zu haben. Da es Transparenz unterstützt, kann es verwendet werden, um sowohl PNG-Dateitypen als auch JPEG zu ersetzen, während es eine kleinere Dateigröße als beide im Allgemeinen hat, selbst wenn Transparenz vorhanden ist.   

WebM ist das Video-Äquivalent von WebP, ursprünglich von einer Arbeitsgruppe entwickelt und dann von Google übernommen. Wie bei WebP bietet es eine bessere Komprimierung für das Web und kleine Dateigrößen.

AVIF/AV1 ist ein weiteres neues Bildformat, das von der Alliance for Open Media entwickelt wurde und von dem manche behaupten, es sei besser als WebP . AVIF hat bereits gezeigt, dass es eine bessere Komprimierungstechnologie hat, die kleinere Dateien als WebP mit dem gleichen Grad an Komprimierung/Verlust erstellt, aber ab sofort unterstützt nur der Chrome-Webbrowser diese standardmäßig, ohne dass andere Einstellungen angepasst werden müssen.

Alle drei Medienformate leiden jedoch unter schlechter Entwicklerakzeptanz und Browserunterstützung. Natürlich unterstützt Google seit einiger Zeit die eigenen WebP- und WebM-Formate in Chrome. Aber andere Anbieter haben erst kürzlich Unterstützung eingeführt. Ab sofort unterstützen alle neuesten Versionen von Webbrowsern WebP mit der Einschränkung, dass Safari auf MacOS nur WebP auf Big Sur oder höher unterstützt.

Auch Webdesigner und -entwickler zögern, das neue Format zu übernehmen. Sie warten darauf, dass ihre Kunden/Chefs verstehen, worum es bei den Formaten geht. Gerade jetzt sorgen die Bildformate für Reibung. Haben Sie jemals ein Firmenlogo von Google Bilder heruntergeladen, nur um festzustellen, dass es „ .webp “ ist und in Ihrer Präsentation oder Ihrem Bildeditor nicht richtig funktioniert?

Unternehmen wie Cloudflare helfen beim Übergang, indem sie Bilder im Auftrag ihrer Kunden automatisch in AVIF oder WebP konvertieren, wenn der Browser des Benutzers das Format unterstützt. Wenn Sie jedoch CloudFlare nicht verwenden und/oder direkte Kontrolle über den Webserver haben, unterstützen Apache und Nginx beide Erkennungsmethoden für die Browserunterstützung, die verwendet werden können, um WebP (falls die Datei vorhanden ist) dynamisch bereitzustellen, selbst wenn der Browser a anfordert JPEG oder PNG.

Das schmutzige kleine Geheimnis, das Ihnen PageSpeed-Berichte jedoch nicht verraten, ist, dass ein gut optimiertes JPEG- oder PNG-Bild manchmal genauso schnell und klein sein kann wie sein WebP-Pendant. 

Cloudflare weiß das und konvertiert daher keine gut optimierten und zu 100 % kompatiblen JPEG- und PNG-Dateien. Dies führt zu endloser Verwirrung bei Benutzern, die die WebP-Konvertierung aktivieren und dennoch Fehler in ihrem PageSpeed-Bericht erhalten.

Daher werden wir erneut von Google mit vorgehaltener Waffe bedroht. Konvertieren Sie alle Ihre Medien in die Formate WebP, WebM und AVIF, verlieren aber Besucher auf älteren Browsern? Oder die Warnung von Google ignorieren und hoffen, dass sie Ihrem PageSpeed- und eventuell SEO-Ranking nicht schadet?

Wenn Sie ein begeistertes Tech-Team haben und diese PageSpeed-Warnung grün färben möchten, können Sie selbst alternative Bilder im WebP-Format erstellen und dann die WebP-Unterstützung direkt über den Webserver erkennen, wie zuvor erwähnt.

Alternative Bilder (srcset)

Wie in unserem Artikel „ Core Web Vitals for Ecommerce “ empfohlen , ist „ srcset “ ein sehr nützliches HTML-Attribut, das Sie Ihren <img>-Tags hinzufügen können. Es gibt Browsern die Möglichkeit, das beste Bild für ihre Auflösung/ihren Darstellungsbereich herunterzuladen. Dadurch wird das Problem angegangen, dass große Bilder auf Seiten nur Zeit- und Bandbreitenverschwendung für mobile Benutzer sind, deren Bildschirme die Größe der Hand des Benutzers haben. So könnten mobile Benutzer stattdessen eine stark komprimierte Version eines Bildes mit 600 x 400 Pixeln herunterladen, die im Attribut „srcset“ angegeben ist. Auf diese Weise können Sie Ihren Desktop-Benutzern immer noch das hochauflösende Bild in seiner ganzen Pracht auf ihren schicken 4K-Monitoren zeigen. Sofern nicht alle Ihre Bilder bereits winzig sind und eine niedrige Auflösung haben, sollten Sie dies definitiv für Benutzer, Suchmaschinen und Core Web Vitals implementieren.

Bild-Tag-Optimierung – Best Practice

Sie dachten wahrscheinlich, dass es in diesem Artikel nur darum geht, „alt“-Attribute auf Bilder zu kleben, die mit all Ihren Schlüsselwörtern vollgestopft sind. Es wurde in der Vergangenheit von Tausenden anderer SEO-Artikel behandelt, aber es hat keinen Sinn, in die Zukunft zu blicken, wenn wir nicht zuerst auf unsere Vergangenheit zurückblicken. Hier ist also eine kurze Bestätigung, dass sich (hoffentlich) nichts in Ihrer Meinung über die Optimierung von Bild-Tags geändert hat:

Das „alt“-Attribut

Dieses Attribut sollte in jedem <img>-Tag auf Ihrer Website enthalten sein. Seine Aufgabe ist es, das Bild zu beschreiben, für Screenreader (von Blinden verwendet), Suchmaschinen und auch, wenn das Bild aus irgendeinem Grund nicht geladen werden kann, z. B. wenn Ihr CDN eine Ausfallzeit hat.

Der Inhalt des „alt“-Attributs sollte ein kurzer Satz sein, der das Bild beschreibt. Keine Keyword-Liste und nicht einfach der Suchbegriff, für den eine Seite ranken soll. Denken Sie daran, dass Google jetzt über die Technologie verfügt, um zu erraten, was auf Bildern zu sehen ist. Daher ist es wahrscheinlich nicht die klügste Idee, ein Telefonsymbol als „besten Klempner in London“ zu bezeichnen. Alt-Attribute haben einen sehr geringen Einfluss auf das On-Page-Ranking, insbesondere bei der Bildsuche, daher schadet es nicht, Ihr primäres Keyword einzubeziehen, wenn es für den Bildinhalt relevant ist.

Das Attribut „Titel“.

Die meisten Leute lassen dies weg oder duplizieren einfach den Inhalt des „alt“-Attributs. Der große Unterschied besteht darin, dass der Inhalt des „Titels“ angezeigt wird, wenn Sie mit der Maus über das Bild fahren, und nicht, wenn das Bild nicht angezeigt oder geladen werden kann. Dies kann nützlich sein, um Hero-Bilder weiter zu beschreiben, aber manchmal hässlich, wenn das Bild nur auf der Seite ist, um die Ästhetik zu verbessern, z. B. „Blau-zu-Grün-Verlauf“.

Der URL-Slug/Dateiname

Wahrscheinlich ein geringfügiges On-Page-Ranking-Signal, aber keines, um Zeit mit der Korrektur zu verbringen. Einen beschreibenden Dateinamen zu haben (z. B. wrangler-black-denim-jeans-001.jpg vs. SKU-100321324.jpg ) ist nur gesunder Menschenverstand und besser für die Benutzerfreundlichkeit, wenn überhaupt. Auch hier macht es keinen Sinn, einen Bilddateinamen mit Keywords zu füllen, da Google es durchschaut und es sowieso nicht hilft. Aber eine logische, beschreibende Dateibenennung hilft wahrscheinlich beim Ranking der Bildsuche und der Indexierung durch Google (zu wissen, was auf dem Bild zu sehen ist).

Wenn Sie eine neue Site starten oder die Plattform ändern, bauen Sie auf jeden Fall logische Dateibenennungen ein und fördern Sie diese (sowie die Forderung nach einem Alt-Attribut). Aber machen Sie sich nicht die Mühe, jedes Bild auf einer bestehenden Site umzubenennen, da der Nutzen minimal sein wird.

Optimierung der Bildsuche

Die Google-Bildsuche kann eine sehr nützliche und profitable Traffic-Quelle sein, wenn Sie auf bestimmte Sektoren abzielen. Mode-Websites erhalten in der Regel eine beträchtliche Menge an wertvollem Traffic von der Bildsuche, da es sich um ein sehr visuelles Kauferlebnis handelt. Bestattungsunternehmen, Rechtsanwälte und Buchhalter weit weniger.

Es gibt kein Geheimrezept für ein gutes Ranking in der Bildersuche. Tatsächlich hängt es hauptsächlich damit zusammen, wie maßgeblich und relevant die primäre Seite ist, auf der das Bild gehostet wird. Sie können jedoch die hochrangigen Websuchseiten in Google Bilder übertreffen, wenn sie die oben gegebenen Best-Practice-Tipps nicht befolgt haben. Die wichtigsten Faktoren sind:

  1. Ist der Inhalt rund um das Bild relevant?
  2. Ist der Alt-Text relevant und nicht mit Keywords gefüllt?
  3. Bestätigen die Links, die auf die Seite verweisen, auf der das Bild gehostet wird, dass die Seite und das Bild für das angegebene Keyword sehr relevant und wichtig sind?

Es hilft natürlich, wenn maßgebliche Websites von Drittanbietern direkt auf Ihre Bilder verlinken, aber es ist selten, dass dies natürliche Fälle findet, abgesehen von viralen Memes und Pannen. Die meisten Websites, die auf Ihre Bilder verlinken, sind wahrscheinlich Scraper-Sites, Affiliates und Vergleichsmaschinen mit sehr geringem SEO-Wert, den Sie an Sie weitergeben können.

Um diesen Artikel zusammenzufassen:

  • Verwenden Sie die neuesten Techniken, die Ihnen zur Verfügung stehen, damit Bilder so schnell wie möglich auf allen Geräten und Internetverbindungen geladen werden.
  • Stellen Sie sicher, dass der Browser die Bildabmessungen kennt, bevor das Bild geladen wird.
  • Befolgen Sie Best Practices, indem Sie gegebenenfalls „alt“-Attribute, beschreibende Dateinamen und „title“-Attribute implementieren.
  • Wenn Leute Ihr Produkt oder Ihre Dienstleistung teilweise aufgrund ihres Aussehens kaufen, nehmen Sie die Bildsuche ernst und optimieren Sie Ihre Bilder entsprechend.