Inhalte

Bilder werden verzerrt dargestellt

Üblicher Schweregrad: niedrig · Aufwand: minimal

Woran du es erkennst

Mehrere <img>-Elemente weichen im gerenderten Seitenverhältnis um mehr als 10% vom natürlichen Verhältnis ab (object-fit: fill) — Motive wirken gestaucht oder gestreckt.

Warum es zählt

Verzerrte Produkt- oder Teamfotos sind einer der schnellsten Vertrauenskiller: Die Seite wirkt ungepflegt, und bei Produkten verfälscht die Darstellung wortwörtlich, was der Kunde bekommt.

So behebst du es

  1. Setze im CSS entweder Breite ODER Höhe (nicht beides) fix, damit das Seitenverhältnis erhalten bleibt — oder nutze height: auto.
  2. Wenn ein festes Bildformat nötig ist: object-fit: cover (beschnitten, aber unverzerrt) oder contain (Letterbox) statt fill.
  3. Prüfe CMS-/Shop-Templates, die Bilder in fixe Kacheln zwingen — dort entsteht die Verzerrung fast immer.
  4. Nutze moderne Formate mit srcset/sizes, damit das ausgelieferte Bild dem Layout-Raster nahekommt, statt es nachträglich zu verformen.

Zum Nachlesen