Webbilder: Wählen Sie das Format, die Größe und das Laden

Web-Zugänglichkeit und Leistung · 6 Min. Lesezeit

Treffen Sie bei der Optimierung von Webbildern drei verschiedene Entscheidungen: das richtige Format für den Inhalt, die für die Anzeige erforderlichen Abmessungen und den Ladezeitpunkt. Ein Produktfoto, ein Logo und ein Bild unten auf der Seite stellen nicht die gleichen Anforderungen. Behalten Sie die Originale, vergleichen Sie die Exporte mit ihrer tatsächlichen Nutzungsgröße und überprüfen Sie die tatsächlich vom Browser heruntergeladene Datei.

Das Wichtigste

• Format, Abmessungen und Gewicht sind drei unterschiedliche Merkmale.
• Bereiten Sie Bilder entsprechend ihrer Verwendung vor, nicht nach einer einheitlichen Größe.
• Das Bild, das den Hauptinhalt darstellt, wird beim Laden nicht verzögert.
• Eine hellere Datei muss noch visuell und auf der Seite überprüft werden.

Wählen Sie das Format entsprechend dem Inhalt

Die Leitfaden zum MDN-Format unterscheidet ihre Verwendung. WebP und AVIF ermöglichen eine für Webbilder geeignete Komprimierung, einschließlich der Unterstützung von Transparenz. JPEG bleibt eine Option für die Fotografie. PNG verwendet verlustfreie Komprimierung; SVG beschreibt Vektorformen, die für Logos, Symbole oder Diagramme geeignet sind.

Fotos und Produktdetails

Vergleichen Sie die Exporte WebP, AVIF oder JPEG mit akzeptabler visueller Qualität. Untersuchen Sie schwierige Bereiche: Textur, Kanten, Kleingedrucktes, Farbverläufe und Produktfarbe. Die Qualitätseinstellung ist zwischen Formaten oder Tools nicht direkt vergleichbar. Die Auswahl muss auf dem exportierten Bild beruhen, nicht nur auf einem Wert in der Software.

Logos, Diagramme und Transparenz

Wählen Sie für ein Logo, für das Sie eine Vektorquelle haben, einen geeigneten SVG-Export. Durch das Umbenennen eines Fotos in SVG wird daraus keine Vektorzeichnung. Vergleichen Sie für eine Rasteraufnahme oder eine aus Pixeln bestehende Grafik, bei der es auf Präzision ankommt, verlustfreie Exporte. Transparenz allein erzwingt PNG nicht: WebP und AVIF können sie auch beibehalten.

Wenn Sie mehrere Formate anbieten, muss die Komponente eine Fallback-Lösung bereitstellen, die mit den Zielbrowsern kompatibel ist. Überprüfen Sie auch die Unterstützung Ihres Content-Management-Tools und der Bildverarbeitung.

Maße an Standort anpassen

Die Abmessungen entsprechen den Pixeln des Bildes; das Gewicht entspricht den Angaben in der Datei. Ein komprimiertes Bild bleibt möglicherweise übergroß. Umgekehrt können einem kleinen Bild in einem Zoom-Produkt Details fehlen. Unterscheiden Sie zunächst zwischen Raster-Miniaturansicht, Hauptansicht und vergrößerter Ansicht und notieren Sie sich dann deren Anzeigegrößen.

Der Browser kann mit srcset aus mehreren Varianten wählen. Das Größenattribut beschreibt den erwarteten Anzeigeraum, wenn Varianten durch ihre Breite angegeben werden. Bei dieser Wahl spielt auch die Dichte des Bildschirms eine Rolle. Die MDN-Leitfaden für adaptive Bilder erläutert diese Auswahl. Diese Attribute erstellen die Dateien nicht: Ihr System muss die entsprechenden Varianten produzieren und bereitstellen.

Auflösung und Zuschneiden nicht verwechseln

Mehrere Auflösungen können dieselbe Komposition zeigen. Ein mobiler Zuschnitt verändert den sichtbaren Inhalt. Das Bildelement ermöglicht es, verschiedene Kompositionen vorzuschlagen. Stellen Sie bei einem Geschäft sicher, dass durch das Zuschneiden keine nützlichen Informationen über das Produkt verloren gehen. Behalten Sie eine separate Detailansicht bei, wenn der Besucher ein Material oder eine Baugruppe untersuchen muss.

Bilder zum richtigen Zeitpunkt laden

Lazy Loading, mit loading="lazy"lässt den Browser warten, bis sich ein Bild dem sichtbaren Bereich nähert. Es eignet sich für unkritische Bilder weiter unten auf der Seite. Die img-Element-MDN-Referenz beschreibt diesen Vorgang: Die Auslösung hängt vom Browser ab, nicht von einer universellen Distanz, die erzwingen soll.

Wenden Sie Lazy Loading jedoch nicht auf das Bild an, das als Element LCP identifiziert wird. Die web.dev-Optimierungsleitfaden für LCP warnt, dass dies seine Anfrage unnötig verzögert. Eine hohe Priorität über fetchpriority kann für das Hauptbild in Betracht gezogen werden, aber durch die Verteilung auf alle Bilder entfällt der Sinn der Priorisierung.

Stellen Sie außerdem Breite und Höhe mit den eigentlichen Abmessungen und einem einheitlichen Verhältnis bereit. Laut MDN ermöglichen diese Attribute dem Browser, vor dem Herunterladen Speicherplatz zu reservieren. Das Layout kann jederzeit die angezeigte Größe anpassen. Überprüfen Sie vor allem, ob das reservierte Verhältnis mit dem tatsächlich präsentierten Bild übereinstimmt.

Anschauliches Beispiel: ein überall verwendetes Foto

In diesem fiktiven Beispiel verwendet ein Beleuchtungsgeschäft dasselbe Original für das Raster, das Produktblatt und den Zoom. Die Korrektur beginnt mit der Trennung der Verwendungen: an das Raster angepasste Varianten, lesbares Hauptbild und Detailversion zur Vergrößerung.

Das Team vergleicht die Formate hinsichtlich der Konturen und Textur der Leuchte. Es hält das Hauptbild beim Laden verfügbar, verschiebt zusätzliche Bilder außerhalb des Bildschirms und reserviert ihren Platz. Die Prüfung betrifft dann die tatsächlich angeforderten Dateien auf Telefon und Computer. Es wird kein Zielgewicht oder Geschwindigkeitszuwachs angenommen.

Betriebscheckliste

• Originale außerhalb der für die aktuelle Anzeige vorgesehenen Exporte aufbewahren.
• Inventarisieren Sie jeden Standort, seine Größe und seinen Detailbedarf.
• Vergleichen Sie Format, Gewicht und visuelle Qualität der Exporte.
• Erzeugen Sie die erforderlichen Varianten und überprüfen Sie Quellcode und Größen.
• Zuschneiden und Fallbacks steuern.
• Reservieren Sie Platz und wählen Sie die Beladung entsprechend der Position aus.
• Überprüfen Sie die heruntergeladene Datei, zoomen und scrollen Sie dann.

Einschränkungen und häufige Fehler

Das Konvertieren des gesamten Katalogs ohne Prüfmuster kann zu einer Verschlechterung der Produktdetails führen. Eine weitere Komprimierung behebt keinen zu spät ausgelösten Ladevorgang. Eine Erweiterung, die Dateien optimiert, beweist nicht, dass der Browser die richtige Variante empfängt. Schließlich sollte wichtiger Text nicht nur in einem Bild vorhanden sein: Halten Sie wichtige Informationen im Inhalt der Seite zugänglich.

Häufige Fragen

Sollten wir alle Bilder in AVIF konvertieren?

Nein. Vergleichen Sie die Exporte, erforderliche Kompatibilität und Bedienung Ihres Tools. Das Format ersetzt keine geeigneten Abmessungen oder eine gut gewählte Beladung.

Welches Maximalgewicht soll gelten?

Es gibt keinen einzigen relevanten Wert für ein Symbol, ein Hauptfoto und einen Detailzoom. Legen Sie Ihre Kriterien nach Standort fest und testen Sie dann die Seite und die Lesbarkeit.

Wird Alternativtext verwendet, um ein Bild zu beschleunigen?

Nein. Das Alt-Attribut bietet eine Textalternative, insbesondere für die Barrierefreiheit, wie von MDN angegeben. Beschreiben Sie die nützlichen Informationen im Kontext der Seite; Füllen Sie dieses Attribut nicht mit Schlüsselwörtern. Für ein rein dekoratives Bild, das keine Informationen vermittelt, verwenden Sie eine leere Alternative. alt=""anstelle einer unnötigen Beschreibung.

Nächster Schritt

Wählen Sie ein Produktblatt und ein Raster. Beachten Sie für ihre Bilder den Speicherort, die angezeigten Abmessungen, die heruntergeladene Datei und die Lademethode. Anschließend validieren Sie einen Export und seine Integration, bevor Sie die Methode auf den Rest des Katalogs anwenden.

Quellen und Ressourcen

• MDN: Leitfaden zum Bildformat.
• MDN: Adaptive Bilder.
• MDN: img-Element und Attribute.
• web.dev: LCP optimieren.