WordPress 6.7 Hinzugefügtsizes="auto"Verzögertes Laden von Bildern. Diese FunktionKürzlich zur HTML-Spezifikation hinzugefügtSie ermöglicht es dem Browser, die Breite des Rendering-Layouts des Bildes zu verwenden, wenn er die Quelle aus der Liste auswähltsrcsetdenn verzögert geladene Bilder werden erst geladen, nachdem das Layout bekannt ist.

Kontexte

responsive Bildeigenschaften.srcsetJa, das ist sie.WordPress 4.4GrößenHinzugefügt. Ich zitiere die Entwicklernotizen aus dieser Zeit:

Um den Browser bei der Auswahl des besten Bildes aus der Liste der Quellensets zu unterstützen, bieten wir auch eineGrößenist gleichbedeutend mit der Standardeigenschaft von(max-width: {{image-width}}px) 100vw, {{image-width}}px. Obwohl diese Standardeinstellung für die meisten Websites sofort funktioniert, sollte das ThemaGrößenNach Bedarf verwendenwp_calculate_image_sizes (Maschinen-)FilterPassen Sie die Standardeigenschaften an.

GrößenEs ist wichtig, dass Sie bei der Auswahl der richtigen Datei Standardwerte festlegensrcset, da es dem Browser das erwartete Layout des Bildes mitteilt, bevor der Browser das Layout des Bildes kennt. Wenn kein Wert angegeben wird, verwendet der Browser die Standardeinstellung100vwWerte und gehen davon aus, dass das Bild die gesamte Breite des Viewports ausfüllt, was zu einer Menge vergeudeter Bytes führt. Die Standardwerte, die WordPress seit Jahren bereitstellt, sorgen dafür, dass das Layout eines Bildes durch seineBreiteAttribut-Beschränkungen. Dies ist zwar hilfreich, aber in vielen Fällen immer noch falsch, da das Layout des Bildes durch die Breite des Inhalts oder der Blöcke, in denen es verschachtelt ist, eingeschränkt sein kann. 

Während Sie das Thema fördernGrößenausnutzenwp_calculate_image_sizesFilter liefern genauere Eigenschaftswerte, aber es ist eine Herausforderung, dies zu tun. Browser sind jetzt in der Lage, das gerenderte Layout automatisch auf dieGrößenVerzögertes Laden von Bildern, dieGrößenDer Wert wird 100% korrigiert, wodurch die Anzahl der verschwendeten Bytes reduziert wird.

Details zur Implementierung

HTML-SpezifikationzulässigVerzögertes Laden von Bilderneine AuslassungGrößenEindeutig festgelegtsizes="auto"oder setzenGrößenist eine Zeichenkette, die mit"Auto".gefolgt von einer Liste der gültigen Quellgrößen. Wenn Sie dies als dieBrowser, die diese Funktion bereits unterstützenAls schrittweise Verbesserung der Implementierung fügt WordPress den Eigenschaften des Inhaltsbildes alle Bild-Tags hinzu, die in diesem Zeitraum erzeugt werden. Dies führt dazu, dass Browser, die die neuen Werte nicht unterstützen, auf die vorherige Liste zurückfallen.autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

Wenn das Bild enthält, fügt WordPress nur dieAutoauf den Wert anwenden. Andernfalls können unterstützte Browser den Wert nicht validieren und wenden den Standardwert an, was dazu führt, dass Bilder, die größer als die gewünschte Größe sind, aus der Eigenschaft ausgewählt werden. Alle benutzerdefinierten Implementierungen, die den Wert für das Laden von Bildern ändern, nachdem WordPress das Markup generiert hat, sollten die neue Funktion verwenden, um die Eigenschaft zu korrigieren.Größenloading="lazy"Größen=autoGrößen100vwsrcsetwp_img_tag_add_auto_sizes()Größen

neue Funktion

• wp_img_tag_add_auto_sizes- Für HTML imgZeichenfolge automatische Größe hinzufügen.
• wp_sizes_attribute_includes_valid_auto- Prüfen Sie, ob die automatische Funktion bereits auf dem Bild vorhanden ist, um sicherzustellen, dass Sie sie nicht mehrfach hinzufügen.