Wählen Sie ein Bild für die Aufgabe

Im Laden soll das Foto eine Produktbewertung ermöglichen; Der Leitfaden kann den Schritt erklären. Die allgemeine Abbildung ersetzt kein Foto des Steckers, der Abmessungen oder der für den Kauf wichtigen Details. Entscheiden Sie zunächst, was der Betrachter anhand des Bildes verstehen soll.

Google empfiehlt, Bilder in unterstütztem HTML, aussagekräftigem Kontext und beschreibendem Alternativtext bereitzustellen. Ein Bild, das ausschließlich als CSS-Hintergrund eingebettet ist, wird nicht wie ein Bild in einem img-Element behandelt.

Quelle: Google: bewährte Methoden für Bilder ↗

Bereiten Sie Varianten statt einer riesigen Datei vor

Passen Sie die Breite an die tatsächlichen Anzeigepositionen an. Der Browser kann die Variante nach Srcset und Größen auswählen. Überprüfen Sie das Format und die Komprimierung anhand eines Fotos mit feinen Details, nicht nur vor einem einfachen Hintergrund. Eine zu starke Komprimierung kann die Bewertung des Produkts erschweren.

Ein Beispiel für die Arbeit mit dem Material

Das 5000 Pixel breite Foto soll als Miniaturansicht und größere Vorschau dienen. Bereiten Sie separate Varianten für diese Verwendungszwecke vor, anstatt die vollständige Datei an jeden Benutzer zu senden. Halten Sie das Original aus dem öffentlichen Miniaturbildsatz fern.

Achten Sie auf Ort und Zeitpunkt des Ladevorgangs

Geben Sie Abmessungen oder korrekte Proportionen an, damit der Browser Platz reservieren kann. Bilder weit unterhalb des ersten Bildschirms können vom verzögerten Laden profitieren. Wenden Sie es nicht automatisch auf das wichtigste Foto an, das bei der Eingabe sichtbar ist – überprüfen Sie die Auswirkung auf LCP.

Bewerten Sie auch das Framing auf Ihrem Telefon. Eine technisch korrekte Datei kann dazu führen, dass eine wichtige Beschriftung oder ein Produktelement abgeschnitten wird. Die Betrachtung auf einem breiten Monitor ersetzt nicht die Beurteilung eines kleinen Bildschirms.

Eine alternative Beschreibung soll Bedeutung vermitteln

Beschreiben Sie wichtige Inhalte im Kontext der Seite. Fügen Sie keine Liste mit Positionierungsphrasen hinzu. Ein dekoratives Bild kann leeren Alternativtext enthalten; Ein wichtiger Graph benötigt eine verständliche Erklärung der Daten, die über die Bitmap selbst hinausgeht.

Überprüfen Sie nach der Bereitstellung, ob defekte Links vorhanden sind, ob Varianten geladen werden und ob sie bei langsameren Verbindungen angezeigt werden. Die Optimierung ist abgeschlossen, wenn das Bild noch seinen Zweck erfüllt, und nicht erst, wenn die Dateigröße kleiner ist.

FÜR DEN EINSATZ IN DER PRAXIS

Ihre Checkliste

  • Bestimmen Sie die Rolle des Fotos oder der Illustration.
  • Erstellen Sie Maßvarianten und prüfen Sie die Qualität.
  • Reservieren Sie Ihren Sitzplatz, kontrollieren Sie Ihr LCP-Image.
  • Passen Sie den Alternativtext an den Kontext an.

Quellen und Neuigkeiten

Dokumentation überprüft am 21. September 2026. Die Beispiele im Artikel dienen der Veranschaulichung – sie beschreiben keine Auditergebnisse oder Kundenimplementierung.

Mit Hilfe von KI entwickeltes Lehrmaterial basierend auf den angegebenen Quellen. Sie ersetzen nicht die individuelle Begutachtung der Website durch einen Spezialisten. Redaktionelle Regeln.