Bilder beschreiben und verkleinern, damit sie den Text unterstützen
Beschreibung
Dieses Kriterium prüft die Bilder der Seite. Von den Inhaltsbildern (sichtbar, mindestens 50 × 50 px, nicht als dekorativ gekennzeichnet) müssen mindestens 90 % einen Alternativtext haben und 90 % ihre Abmessungen angeben. Mindestens 80 % der Rasterbilder müssen im Format WebP oder AVIF vorliegen (SVG-Dateien zählen nicht), und kein Bild darf größer als 500 KB sein.
iPand prüft, ob ein Alternativtext vorhanden ist, nicht, ob er zutrifft, und beurteilt nicht die visuelle Qualität der Bilder.
Warum es für KI-Assistenten zählt
Ein Crawler, der den Text der Seite liest, sieht von einem Bild nur seinen Alternativtext. Google nutzt ihn zusammen mit maschinellem Sehen und dem Inhalt der Seite, um das Thema eines Bildes zu verstehen, und empfiehlt, den Text mit hochwertigen Bildern zu ergänzen. Bilder machen außerdem oft den größten Teil des Seitengewichts aus.
- Ein genauer Alternativtext sagt, was das Bild zeigt: ein Produkt, einen Ort, eine Person.
- WebP und AVIF komprimieren deutlich besser als JPEG und PNG: Die Seite lädt schneller.
- Angegebene Abmessungen reservieren den Platz des Bildes und verhindern, dass sich die Seite beim Laden verschiebt.
So korrigieren Sie es
- 1 Beschreiben Sie jedes Bild in seinem Alternativtext Füllen Sie das Attribut alt jedes nützlichen Bildes mit einem kurzen Satz aus: „Blaues E-Lastenrad vor der Werkstatt“ statt „bild1“ oder einer Liste von Schlüsselwörtern. Lassen Sie bei einem rein dekorativen Bild das alt leer (alt=""): Es wird dann nicht gezählt.
- 2 Wandeln Sie die Bilder in WebP oder AVIF um Exportieren Sie Fotos und Illustrationen als WebP oder AVIF, aus Ihrem Bildbearbeitungsprogramm oder mit einer Erweiterung Ihres CMS. Wenn Sie ein JPEG als Ausweichlösung behalten möchten, bieten Sie beide in einem Element <picture> an: Der Browser lädt nur das erste Format, das er lesen kann.
- 3 Verkleinern Sie große Bilder Kein Bild darf größer als 500 KB sein. Skalieren Sie jedes Bild auf seine Anzeigegröße, komprimieren Sie es und bieten Sie mit srcset und sizes mehrere Größen an, damit Smartphones eine passende Version erhalten.
- 4 Geben Sie Breite und Höhe an Ergänzen Sie jedes Tag <img> um die Attribute width und height im Seitenverhältnis des Bildes, oder reservieren Sie seinen Platz mit der CSS-Eigenschaft aspect-ratio. Der Browser hält dann den Platz während des Ladens frei, auch wenn das Stylesheet die Größe danach anpasst.
Fazit
Beschriebene, leichte Bilder mit angegebenen Abmessungen helfen Suchmaschinen, die Seite zu verstehen, und machen sie schneller. iPand prüft diese vier Punkte bei jeder Analyse; ob Ihre Alternativtexte zutreffen, sollten Sie selbst prüfen.
