Redimensionnement automatique des images à chargement différé dans WordPress 6.7

WordPress 6.7 Ajoutésizes="auto"Retard dans le chargement 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.srcsetcar 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.srcsetOui, c'est le cas.WordPress 4.4taillesAjouté 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 fonctiontaillesest é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 êtretaillesUtiliser selon les besoinswp_calculate_image_sizes Filtre (machine)Personnaliser les propriétés par défaut.

taillesIl est important de définir des valeurs par défaut lors de la sélection du fichier à utiliser.srcsetcar 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éfaut100vwet 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 formatlargeurcontraintes d'attributs. Cette solution est utile, mais reste incorrecte dans de nombreux cas, car la disposition 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èmetaillesutiliserwp_calculate_image_sizesLes 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étaillesChargement retardé des images quitaillesLa valeur sera 100% correcte, réduisant ainsi le nombre d'octets gaspillés.

Détails de la mise en œuvre

Spécification HTMLAutoriser le chargement différé de l'omission d'une imagetaillesClairement définisizes="auto"ou définirtaillesest 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 prennent déjà en charge 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é.taillesloading="lazy"sizes=autotailles100vwsrcsetwp_img_tag_add_auto_sizes()tailles

nouvelle fonctionnalité

• wp_img_tag_add_auto_sizes- Pour HTML imgString 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.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.