WordPress 6.7 Ajoutésizes="auto"
Chargement tardif des images. Cette caractéristiqueRécemment ajouté à la spécification HTMLIl permet au navigateur d'utiliser la largeur de l'image lors de la sélection de la source dans la liste.srcset
car les images chargées en différé ne sont chargées qu'une fois la mise en page connue.
contextes
les propriétés des images réactives.srcset
Oui, c'est le cas.WordPress 4.4tailles
Ajouté en. Je cite les notes du développeur de l'époque :
Pour aider le navigateur à sélectionner la meilleure image dans la liste des ensembles de sources, nous fournissons également une fonction
tailles
est équivalent à la propriété par défaut de(max-width : {{image-width}}px) 100vw, {{image-width}}px
. Bien que ce paramètre par défaut fonctionne pour la plupart des sites, le thème devrait êtretailles
A utiliser selon les besoinswp_calculate_image_sizes
Filtre (machine)Personnalisez les propriétés par défaut.
tailles
Il est important de définir des valeurs par défaut lors de la sélection du fichier à extraire.srcset
car il indique au navigateur la disposition attendue de l'image avant que le navigateur ne connaisse la disposition de l'image. S'il n'y a pas de valeur, le navigateur utilisera l'option par défaut100vw
et supposent que l'image occupera toute la largeur de la fenêtre de visualisation, ce qui se traduit par un grand nombre d'octets gaspillés. Les valeurs par défaut fournies par WordPress depuis des années garantissent que la mise en page d'une image est régie par son formatlargeur
contraintes d'attributs. Cette solution est utile, mais reste incorrecte dans de nombreux cas, car la mise en page de l'image peut être limitée par la largeur du contenu ou de tout bloc dans lequel elle est imbriquée.
Tout en encourageant le thèmetailles
utiliserwp_calculate_image_sizes
Les filtres permettent d'obtenir des valeurs de propriété plus précises, mais il est difficile de le faire. Les navigateurs sont désormais en mesure d'appliquer automatiquement la mise en page rendue à la propriététailles
Chargement retardé des images quitailles
La valeur sera 100% correcte, réduisant ainsi le nombre d'octets gaspillés.
Détails de la mise en œuvre
Spécification HTMLadmissibleRetard dans le chargement des imagesune omissiontailles
, explicitement fixé àsizes="auto"
ou définirtailles
est une chaîne qui commence par"auto", "auto", "auto", "auto", "auto", "auto".
suivi d'une liste de tailles de sources valides. Pour l'utiliser commeNavigateurs qui supportent déjà cette fonctionnalitéEn tant qu'amélioration progressive de la mise en œuvre, WordPress ajoutera toutes les balises d'image générées au cours de la période aux propriétés de l'image de contenu. Les navigateurs qui ne prennent pas en charge les nouvelles valeurs reviendront ainsi à la liste précédente.autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes
Si l'image contient , WordPress n'ajoutera que l'élémentautomobile
à la valeur. Dans le cas contraire, les navigateurs supportés ne valideront pas la valeur et appliqueront la valeur par défaut, ce qui entraînera la sélection d'images plus grandes que la taille souhaitée dans la propriété. Toutes les implémentations personnalisées qui modifient la valeur de chargement de l'image après que WordPress a généré le balisage doivent utiliser la nouvelle fonctionnalité pour corriger la propriété.tailles
loading="lazy"
sizes=auto
tailles
100vw
srcset
wp_img_tag_add_auto_sizes()
tailles
nouvelle fonctionnalité
wp_img_tag_add_auto_sizes
- Pour HTMLimg
String add auto-size.wp_sizes_attribute_includes_valid_auto
- Vérifiez si la fonction automatique existe déjà sur l'image afin de vous assurer que vous ne l'ajoutez pas plusieurs fois.