While browsing your website, especially from your mobile, you notice that the images are completely distorted? Is this normal, or not. In any case, WordPress implemented a new piece of CSS code during its last update that directly impacts the images. So what does this code do and why was it implemented? Let’s talk about this.
The recent appearance of this simple line
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 3000px 1500px;
}
This changes the appearance of many images. This new property applies to all images on the site, whose HTML attribute “sizes” has been set to “auto”. As a reminder, we often combine an auto size with a fixed size to maintain the image ratio. This is very useful when working on a list design, with images of different sizes whose ratio we want to maintain and thus not cut or “crop” the image.
But why does this property distort images? Simply because it overrides the image’s “auto” property. So if you have a fixed width of 100% and an “auto” height, then with this property, you will have a fixed width of 100% and a height of 1500px.
Why was this property implemented, especially with such a strong impact? This is a new line that comes from the combination of another property “content-visibility”. These two new instructions have performance optimization intentions, particularly on the management of hidden content. By hidden, we mean outside the visible area of the screen. You will find a short explanation here. WordPress being on the lookout for the ergonomics and performance of its Gutenberg text editor, this property therefore falls within its ultra performance scope. Unfortunately, its implementation is still precarious and has a lot of impact, particularly on custom designs!
What to do today? For our part, we decided to remove this property directly, because no other CSS property complements this code to restore the appearance of the image. So as long as this property does not respect the image ratios, we can do without it! The method to do without it is also very simple and provided directly by the WordPress team.
So your functions.php file, just implement the following code:
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;
}
);And that’s it!
If despite everything, your images are still distorted, or the appearance of your site does not suit you, contact us 😉
