En vous baladant sur votre site internet, notamment depuis votre mobile, vous constatez que les images sont complètement déformée ? C’est normal, ou pas d’ailleurs. En tout cas, WordPress lors de sa dernière mise à jour a implémenté un nouveau morceau de code CSS qui impacte directement les images. Que fait donc ce code et pourquoi a-t-il été implémenté ? Décortiquons tout ça.
L’apparition récente de cette simple ligne
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 3000px 1500px;
}
Vient chambouler l’aspect de beaucoup d’images. Cette nouvelle propriété s’applique sur toutes les images du site, dont l’attribut HTML « sizes » a été renseigné en « auto ». Pour rappel, on combine souvent une taille auto avec une taille fixe pour conserver le ratio de l’image. C’est très utile lorsque l’on travaille sur un design de liste, avec des images de taille différentes dont on veut conserver le ratio et ainsi ne pas couper ou « cropper » l’image.
Mais pourquoi cette propriété vient-elle déformer les images ? Simplement car elle surpasse la propriété « auto » de l’image. Donc si vous avez une largeur fixe de 100% et une hauteur « auto », alors avec cette propriété, vous aurez une largeur fixe de 100% et une hauteur de 1500px.
Pourquoi cette propriété a été implémenté, surtout avec un impact aussi fort ? Il s’agit d’une nouvelle ligne qui vient combinaison d’une autre propriété « content-visibility ». Ces deux nouvelles instructions ont des intentions d’optimisation de performances, notamment sur la gestion du contenu masqué. Par masqué, on entend hors de la zone visible de l’écran. Vous trouverez une petite explication ici. WordPress étant aux aguets sur l’ergonomie et les performances de son éditeur de texte Gutemberg, cette propriété rentre donc dans son scope d’ultra performance. Malheureusement, son implémentation est encore précaire et a beaucoup d’impact, notamment sur des design customs !
Que faire aujourd’hui ? Pour notre part, nous avons décidé de supprimer cette propriété directement, car aucune autre propriété CSS ne vient complémenter ce code afin de restaurer l’aspect de l’image. Donc tant que cette propriété ne respecte pas les ratios d’images, nous pouvons nous en passer ! La méthode pour s’en passer est d’ailleurs très simple et fournie directement par l’équipe WordPress.
Donc votre fichier functions.php, il suffit d’implémenter le code suivant :
add_filter(
'wp_content_img_tag',
static function ( $image ) {
return str_replace( ' sizes="auto, ', ' sizes="', $image );
}
);
add_filter(
'wp_get_attachment_image_attributes',
static function ( $attr ) {
if ( isset( $attr['sizes'] ) ) {
$attr['sizes'] = preg_replace( '/^auto, /', '', $attr['sizes'] );
}
return $attr;
}
);Et le tour est joué !
Si malgré tout, vos images sont toujours déformées, ou l’aspect de votre site ne vous convient pas, contactez-nous 😉
