Verwenden Sie srcset, um automatisch die richtige Bildgröße auszuwählen.
Laut HTTP-Archiv enthält eine Eine typische mobile Webseite wiegt über 2, 6 MB und mehr als zwei Drittel davon Gewichte sind Bilder. Das ist eine großartige Gelegenheit zur Optimierung!
<ph type="x-smartling-placeholder">
Zusammenfassung
- Speichern Sie keine Bilder, die größer sind als ihre Anzeigegröße.
- Speichern Sie mehrere Größen für jedes Bild und verwenden Sie
srcset, damit der Browser die kleinste Option auswählt. Der Wertwgibt dem Browser die Breite der einzelnen Versionen an:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Bilder mit der richtigen Größe speichern
Sie können Ihre Website schneller machen und weniger datenhungrig machen, indem Sie Bilder mit die mit der Anzeigegröße übereinstimmen. Mit anderen Worten: Achten Sie darauf, dass Bilder die richtigen wenn Sie sie speichern.
Sehen Sie sich die Bilder unten an.
Sie scheinen nahezu identisch zu sein, aber die Dateigröße von eins beträgt mehr als zehnmal größer als das andere ist.
Das erste Bild ist viel größer, weil es mit den Abmessungen die viel größer als das Display sind. Beide Bilder werden mit einem festen von 300 Pixeln. Es ist also sinnvoll, ein Bild zu verwenden, das auf derselben Größe.
Verwenden Sie für feste Breiten Bilder, die dieselben Abmessungen wie die Displaygröße.
Aber was ist, wenn die Anzeigegröße variiert?
In der heutigen Multiscreen-Welt werden Bilder nicht immer in einer einzigen festen Größe angezeigt.
Bildelemente können eine prozentuale Breite haben oder Teil responsiver Layouts sein bei denen die Größe der Bildanzeige an die Bildschirmgröße angepasst wird.
...und was ist mit pixelhungrigen Geräten wie Retina-Displays?
Browser bei der Auswahl der richtigen Bildgröße unterstützen
Wäre es nicht toll, jedes Bild in verschiedenen Größen verfügbar zu machen, Browser die beste Größe für das Gerät und die Anzeigegröße auswählen soll? Leider gibt es catch-22 für Anzeigenerweiterungen um das beste Bild zu finden. Der Browser sollte die kleinstmögliche Bild, aber die Breite eines Bildes kann nicht erkannt werden, ohne es zur Prüfung herunterzuladen.
Hier kommt srcset ins Spiel. Sie speichern Bilder in verschiedenen Größen,
dem Browser die Breite der einzelnen Versionen mitteilen:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Die w-Werte geben die Breite jedes Bildes in Pixeln an. Beispiel:
small.jpg 500w teilt dem Browser mit, dass small.jpg 500 Pixel hat
Pixel breit. So kann der Browser das kleinstmögliche Bild auswählen,
je nach Bildschirmtyp und Größe des Darstellungsbereichs anpassen,
laden Sie Bilder herunter, um ihre Größe zu überprüfen.
Das Bild unten zeigt srcset in Aktion. Wenn Sie einen Laptop oder
Desktop-Computer, ändere die Größe deines Browserfensters und öffne diese Seite erneut.
Überprüfen Sie dann im Netzwerkbereich der Browsertools, welches Bild verwendet wurde.
Du musst dies in einem Inkognitofenster oder einem privaten Fenster tun. Andernfalls wird das
ursprüngliche Bilddatei im Cache gespeichert.)
Wie kann ich mehrere Bildgrößen erstellen?
Für jedes Bild, das Sie verwenden möchten, müssen mehrere Größen verfügbar sein.
mit srcset.
Für einmalige Bilder wie Hero-Images können Sie manuell verschiedene Größen speichern. Wenn z. B. Produktfotos, müssen Sie sie automatisieren. Dafür gibt es zwei Ansätze.
Bildverarbeitung in den Build-Prozess einbinden
Im Rahmen Ihres Erstellungsprozesses können Sie Schritte hinzufügen, um Versionen Ihrer Bilder. Siehe "Imagemin zum Komprimieren von Bildern verwenden". um mehr zu erfahren.
Bilddienst verwenden
Die Bilderstellung und -bereitstellung kann mit einem kommerziellen Dienst wie Cloudinary oder ein Open-Source-Äquivalent wie Thumbor, den Sie selbst installieren und ausführen.
Sie laden Bilder mit hoher Auflösung hoch und der Bilddienst
erstellt und liefert je nach URL verschiedene Bildformate und -größen.
Parameter. Öffnen Sie beispielsweise dieses Beispielbild auf Cloudinary und versuchen Sie, den Wert w oder die Dateiendung in der URL-Leiste zu ändern.
Bilddienste bieten auch erweiterte Funktionen, z. B. die Möglichkeit, „intelligentes Zuschneiden“ für verschiedene Bildgrößen und stellen automatisch WebP-Bilder bereit in Browsern, die das Format unterstützen, anstelle von JPEGs, ohne die Datei zu ändern. .
Was passiert, wenn das Bild in verschiedenen Größen nicht richtig dargestellt wird?
In diesem Fall müssen Sie das Element <picture> für „ArtDirection“ verwenden:
ein anderes Bild oder einen Bildausschnitt in verschiedenen Größen. Weitere Informationen
sehen Sie sich das Codelab "ArtDirection" an.
Wie sieht es mit der Pixeldichte aus?
High-End-Geräte haben kleinere (dichtere) physische Pixel. Beispiel: High-End-Smartphones zwei- oder dreimal so viele Pixel in jeder Pixel als günstigeres Gerät.
Dies kann Auswirkungen auf die Größe haben, die Sie zum Speichern Ihrer Bilder benötigen. Wir wollen uns nicht Hier finden Sie weitere Informationen. Codelab Verwenden Sie density Descriptors.
Wie sieht es mit der Anzeigegröße des Bildes aus?
Sie können sizes verwenden, damit srcset noch besser funktioniert.
Andernfalls nutzt der Browser die volle Breite des Darstellungsbereichs bei der Auswahl eines
Bild von einem srcset. Das Attribut sizes teilt dem Browser die Breite mit,
Bildelement angezeigt, damit der Browser das kleinstmögliche Element
Bilddateien hochladen, bevor damit Layoutberechnungen durchgeführt werden können.
Im Beispiel unten teilt sizes="50vw" dem Browser mit, dass dieses Bild
Die Anzeige wird mit 50% der Breite des Darstellungsbereichs dargestellt.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Sie können dies hier in Aktion sehen: simpl.info/sizes und das Codelab Festlegen mehrerer Anzeigenflächenbreiten
Wie sieht es mit der Browserunterstützung aus?
srcset und sizes werden von über 90% der
Browser weltweit.
Wenn ein Browser srcset oder sizes nicht unterstützt, wird nur das Attribut src verwendet.
Dadurch sind srcset und sizes großartige schrittweise Verbesserungen!
Weitere Informationen
Sehen Sie sich den Abschnitt Bilder optimieren an. von web.dev für einen tieferen Einblick in die Bildoptimierung. Wenn Sie mehr erfahren möchten, sollten Sie das kostenlose "Responsive Google Bilder angeboten von Udacity.