Responsive Bilder

Silktide lädt Ihre Seiten in einem echten Browser und vergleicht die tatsächlichen Abmessungen jedes Bildes mit der Größe, in der es angezeigt wird. Bilder, die deutlich größer sind, als sie auf dem Bildschirm erscheinen, werden gemeldet – zusammen mit den durch die zusätzliche Auflösung verschwendeten Daten.

Warum das wichtig ist

Ein häufiges Muster: Ein 4000‑Pixel‑Foto wird hochgeladen, die Seite zeigt es aber nur 400 Pixel breit an. Besucher laden die Datei in voller Auflösung – möglicherweise Megabytes –, obwohl eine deutlich kleinere Datei identisch aussehen würde. Am schlimmsten ist die Verschwendung auf Smartphones, die die kleinsten Bildschirme und oft die langsamsten, teuersten Verbindungen haben. Schnellere Seiten halten mehr Besucher und wirken sich über auf das Suchranking aus.

So beheben Sie das Problem

Stellen Sie jedes Bild in mehreren Größen bereit und lassen Sie den Browser die passende Variante für das jeweilige Gerät auswählen:

<!-- Der Browser lädt nur die benötigte Größe -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Blumenstand auf dem Markt">

Automatisieren Sie die Größenanpassung. Die meisten erzeugen beim Hochladen mehrere Größen, und können Bilder bei der Auslieferung skalieren – beides verhindert, dass das Problem erneut auftritt.
Als Minimum sollten Sie einmalig verwendete Bilder vor dem Hochladen ungefähr auf die Anzeigengröße verkleinern.

So testet Silktide dies

Die Seite in einem echten Browser laden und die Größe aufzeichnen, in der jedes Bild angezeigt wird – unter Berücksichtigung der schärferen Bildschirme moderner Geräte.
Diese Größe mit den Abmessungen der tatsächlich heruntergeladenen Bilddatei vergleichen.
Bilder melden, bei denen der Überschuss ins Gewicht fällt, inklusive der Byte‑Ersparnis, die ein passend dimensioniertes Bild bringen würde – größte Einsparungen zuerst.

Fehlerbehebung

Worin unterscheidet sich das von den anderen Bildprüfungen?

Bei dieser Prüfung geht es um die Abmessungen: Es wird ein physisch größeres Bild ausgeliefert, als die Seite anzeigt. Bildkomprimierung und Bildoptimierung behandeln das Verkleinern der Datei bei gleichen Abmessungen, und Moderne Bildformate behandelt die Konvertierung nach WebP oder AVIF. Dasselbe Bild kann in mehreren Prüfungen auftauchen – die Maßnahmen ergänzen sich.

Das Bild wirkt scharf wegen hochauflösender Bildschirme

Moderne Bildschirme benötigen tatsächlich mehr Pixel, als die reine Anzeigengröße vermuten lässt, und die Messung berücksichtigt das. Bilder werden nur gemeldet, wenn sie über das hinausgehen, was selbst ein hochauflösender Bildschirm nutzen kann.