Search code examples
cssflexboxpagespeedgoogle-pagespeed

flexbox and google pagespeed insights image optimization have conflicts?

I tried to optimized images on page https://terma-pl.com.ua/polotentsesushiteli-v-vannuyu using page speed insights, currently there are 3 images that mast be optimized. but google provides some strange images. They change their form after optimization, even if i set image width and height atributes and styles... If i remove flex from parent block, google provides normal images, what issue is this?

Fo example in flex block i have a p and img:

<div class="flexBlock">
<p>...</p>
<img src="/images/001Polotencesysh/colori-ral.jpg" width="250" height="250" 
style="width: 250px; height:250px; flex-basis: 250px;">
</div>

.flexBlock {
display: flex;
align-items: center;
}

The image before and after compression:

before compression

after compression

Solution

  • An initial setting on flex items is flex-shrink: 1. This means that items are permitted to shrink.

    To disable this feature, add flex-shrink: 0 to your inline style.