Bei der Bereitstellung von Bildern in Desktop-Größe für Mobilgeräte können 2- bis 4-mal mehr Daten verbraucht werden als erforderlich. Befolgen Sie die Richtlinien auf dieser Seite, um die Nutzererfahrung zu verbessern, indem Sie unterschiedliche Bildgrößen an verschiedene Geräte liefern.
Responsive Bilder und Core Web Vitals
Wenn Sie responsive Bilder bereitstellen, werden die Displayfunktionen auf Ihrer Seite bewertet des Geräts des Nutzers und eine Auswahl aus einer Reihe von Bildkandidaten, die basierend auf diesen Kriterien optimal für die Anzeige ist. So werden Daten für Ihre Nutzenden gespeichert, hauptsächlich dadurch, dass sie kleinere Bilder an Geräte mit kleineren Bildschirmen liefern.
Ein schnelleres Laden von Bildern kann sich auch auf die Largest Contentful Paint (LCP): Wenn zum Beispiel die Das LCP-Element ist ein Bild, das und kann entsprechend die Ladedauer der Ressourcen verkürzen.
Eine kürzere Ladezeit von Ressourcen verkürzt die Ladezeit für ein LCP-Bild und verbessert den LCP-Wert einer Seite. Ein niedrigerer LCP bedeutet, dass Ihre Website schneller geladen wird, vor allem, weil die wichtigsten Inhalte (das LCP-Element) schneller geladen werden. Durch die Bereitstellung responsiver Bilder lassen sich auch Bandbreitenkonflikte für andere auf der Seite. Dadurch lässt sich die Ladegeschwindigkeit der Seite verbessern.
Bildgröße anpassen
Zwei der beliebtesten Tools zur Größenanpassung von Bildern sind das sharp-npm-Paket. und das ImageMagick-Befehlszeilentool.
Das Paket „schärfe“ ist eine gute Wahl für die automatische Größenanpassung von Bildern (z. B. Generieren von Miniaturansichten in verschiedenen Größen für alle Videos auf Ihrer Website). Es ist schnell und lässt sich gut in Build-Scripts und -Tools einbinden. ImageMagick ist mehr ist bequem für die einmalige Änderung der Bildgröße, da das Bild vollständig über den Befehl ausgeführt wird. Zeile.
scharf
Um scharf als Node-Skript zu verwenden, speichern Sie diesen Code als separates Skript in Ihrem und führen Sie es aus, um Ihre Images zu konvertieren:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Um die Größe eines Bildes auf 33% seiner Originalgröße zu ändern, führen Sie den folgenden Befehl in Ihrem Terminal:
convert -resize 33% flower.jpg flower-small.jpg
Wenn Sie die Größe eines Bildes so ändern möchten, dass es in einen Bereich von 300 x 200 Pixel passt, führen Sie den folgenden Befehl:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Wie viele Image-Versionen sollten Sie erstellen?
Es gibt nicht nur eine einzige „richtige“ Antwort auf diese Frage. Es ist jedoch üblich, 3 bis 5 verschiedene Größen eines Bildes liefern. Die Bereitstellung von mehr Bildgrößen ist für benötigt allerdings mehr Speicherplatz auf Ihren Servern und etwas mehr HTML-Code.
Sonstige Optionen
Bilddienste wie Thumbor (Open Source) und Cloudinary sind ebenfalls einen Besuch wert. Beide sind einfache Möglichkeiten zum Erstellen responsiver Bilder, die auch Bilder enthalten bei Bedarf anpassen. Installieren Sie Thumbor auf Ihrem Server, um Thumbor einzurichten. Cloudinary kümmert sich um die Details für Sie und erfordert keine Servereinrichtung.
Mehrere Image-Versionen bereitstellen
Wenn Sie mehrere Image-Versionen angeben, wählt der Browser die beste Version aus. verwenden:
| Vorher | Nachher |
|---|---|
| <img src="blume-große.jpg"> | <img src="große-blumen.jpg" srcset="flower-small.jpg 480w, Blume-groß.jpg 1080w" size="50vw"> |
Das <img>-Tag
src,
srcset,
und sizes
alle Attribute interagieren,
um dieses Endergebnis zu erreichen.
Das „src“-Attribut Attribut
Das Attribut "src" sorgt dafür, dass dieser Code für Browser funktioniert, die keine
srcset und sizes unterstützen
Attribute. Diese Browser laden standardmäßig die Ressource, die im
Attribut „src“.
Das „srcset“ Attribut
Das Attribut srcset ist eine durch Kommas getrennte Liste von Bilddateinamen und ihren
Beschreibungen für die Breite oder Dichte.
In diesem Beispiel wird
Breitenbeschreibungen
Diese teilen dem Browser mit, wie breit ein Bild ist, damit er das Bild nicht herunterladen muss
um es herauszufinden. 480w ist ein Breitendeskriptor, der dem Browser mitteilt,
flower-small.jpg ist 480 Pixel breit. 1080w ist ein Breitendeskriptor, der dem
mit einer Breite von 1080 Pixeln von flower-large.jpg.
Zusätzlicher Schritt: Sie müssen nichts über Dichtedeskriptoren wissen, um verschiedene Bildgrößen bereitzustellen. Wenn Sie jedoch wissen möchten, wie Dichtedeskriptoren funktionieren, lesen Sie Lösung: Code-Lab für einen Wechsel Kompaktheitsbeschreibungen werden verwendet, um verschiedene Bilder basierend auf dem Pixeldichte:
Das Feld „Größen“ Attribut
Das Größenattribut teilt dem Browser mit, wie breit das Bild bei der angezeigt, obwohl dies keinen Einfluss auf die Anzeigegröße des Bildes hat. CSS dafür.
Der Browser verwendet diese Informationen zusammen mit dem, was er über die Gerät (einschließlich der Abmessungen und der Pixeldichte), um zu bestimmen, welches Bild laden.
Wenn ein Browser "sizes" nicht erkennt des Attributs verwendet wird,
das mit „src“ angegebene Bild wird geladen . (sizes und srcset)
wurden zeitgleich eingeführt, daher unterstützt jeder Browser entweder beide
oder keines von beidem.
Zusätzlicher Schritt: Wenn Sie es lieber elegant gestalten möchten, können Sie für mehrere Anzeigenflächengrößen. So können auch Websites mit unterschiedlichen Layouts für Darstellungsbereiche. Codebeispiel für mehrere Anzeigenflächen um zu erfahren, wie das geht.
(Noch mehr) Extra Credit
Zusätzlich zu den bereits aufgeführten zusätzlichen Informationen (Bilder sind komplex!), können Sie dieselben Konzepte Art Direction. Art Direction ist das Verfahren, komplett anders aussehende Bilder bereitzustellen. (anstelle verschiedener Versionen desselben Bildes) für verschiedene Darstellungsbereiche. Ich findest du im Art Direction Code Lab weitere Informationen.
Bestätigen
Mit Lighthouse können Sie nach der Implementierung responsiver Bilder keine Bilder verpasst. Lighthouse-Leistungsüberprüfung durchführen (Lighthouse > Optionen > Leistung) und suchen Sie nach den Ergebnissen der Prüfung der richtigen Größe von Images: In diesen Ergebnissen sehen Sie die Bilder, die Sie noch benötigen. die Größe anpassen.