Wählen Sie geeignete Bildabmessungen für Displays mit hoher Dichte

Eine Karte, die mit einer Breite von 800 CSS-Pixeln angezeigt wird, kann einen Bildkandidaten mit einer Breite von 1600 Bildpixeln als 2x-Beispiel verwenden. Wenn die Website responsives Bild-Markup bereitstellt, kann der Browser basierend auf Layout, Gerätedichte und anderen Bedingungen eine geeignete Quelle auswählen. Die 1600-Pixel-Datei bedeutet nicht, dass die Karte 1600 CSS-Pixel auf der Seite belegen sollte.

Messen Sie das tatsächliche Layout vor dem Export. Eine Artikelspalte, ein Banner in voller Breite und eine kleine Produktkarte benötigen selten die gleiche Quellgröße. Überprüfen Sie auch das Telefonlayout, wo das Bild möglicherweise eine andere Breite einnimmt oder einen anderen Zuschnitt verwendet. Wenn jede Datei doppelt so groß ist wie die Breite des größten Desktop-Ansichtsfensters, können Bytes verschwendet werden. Betrachten Sie Exporte mit höherer Dichte als Kandidaten für eine wirklich reaktionsfähige Implementierung und nicht als eine einzelne übergroße Datei, die jedes Gerät herunterladen muss.

Diese Seite beginnt mit einem WebP-Fit-Feld mit 1600 x 1600 Pixeln. Es handelt sich um eine illustrative Grenze. Ersetzen Sie sie daher durch Werte, die auf der von Ihnen gemessenen Anzeigegröße basieren. Durch „Einpassen“ bleiben die Proportionen erhalten und eine kleinere Quelle wird nicht vergrößert. Beispielsweise kann ein breites Original eine Breite von 1600 Pixeln erreichen, während ein Porträt stattdessen in die Höhe passt. Überprüfen Sie die tatsächlichen Ausgabeabmessungen.

Wenn eine Quelle nur 700 Pixel breit ist, werden beim Schreiben eines Exports mit 1600 Pixeln nicht die Details eines größeren Originals erstellt. Nutzen Sie eine bessere Quelle oder akzeptieren Sie einen kleineren Kandidaten. Vergleichen Sie die leichte Schärfung mit „Aus“, nachdem Sie die Größe geändert haben, und prüfen Sie feine Texturen in der beabsichtigten Anzeigegröße. Für transparente Grafiken verwenden Sie stattdessen PNG, da der aktuelle WebP-Export hier undurchsichtig ist. Behalten Sie das ursprüngliche Design oder Foto bei, damit Sie später andere Kandidaten erstellen können.

Der Konverter erzeugt eine Datei; Ihre Website muss es noch richtig auswählen und präsentieren. Geben Sie bei der Umsetzung geeignete Quellkandidaten, genaue Größenhinweise und reservierte Bildabmessungen an. Ein Telefon sollte nicht das größte Bild empfangen, nur weil es existiert. Überprüfen Sie das heruntergeladene Bild in den Browser-Entwicklertools, wenn Sie die endgültige Seite bewerten, da ein Content-Management-System es möglicherweise erneut umwandelt.

Sehen Sie sich die Seite mit normalen und hohen Bildschirmeinstellungen an und vergleichen Sie Details mit der Übertragungsgröße. Ein Bild mit höherer Auflösung ist nicht automatisch der beste Kompromiss für eine kleine dekorative Karte. Ebenso kann ein zu kleines Bild in einer großen Produktansicht schlecht aussehen. Testen Sie aussagekräftige Inhalte wie Gesichter und Beschriftungen, anstatt nur einen unscharfen Hintergrund zu beurteilen. Halten Sie die Ladepriorität entsprechend der Bildposition ein und messen Sie die tatsächliche Seite, bevor Sie eine Verbesserung der Geschwindigkeit oder der Core Web Vitals versprechen.

Angenommen, Ihre breiteste Karte hat 400 CSS-Pixel und eine Abbildung bleibt bei dieser Breite klar. Ein 800-Pixel-Kandidat ist ein möglicher 2x-Export, wenn die Quelle dies unterstützt. Überprüfen Sie die Karte auch bei schmaleren Layouts, da ein Bild, das sich über den gesamten Telefonbildschirm erstreckt, möglicherweise eine andere Anzeigebreite als die Desktop-Karte hat. Exportieren Sie für jeden benötigten Kandidaten das Original, anstatt den kleinsten zu vergrößern. Bestätigen Sie, welche Datei der Browser auf der tatsächlichen Seite auswählt. Diese abschließende Auswahlprüfung verbindet eine Berechnung der lokalen Abmessungen mit den Bytes, die Besucher tatsächlich für das Bild erhalten.