I attempted to optimize the images on the page using Page Speed Insights. Currently, there are 3 images that need to be optimized, but Google is providing some odd results. The images change their appearance after optimization, even when setting image width and height attributes and styles... When I remove flex from the parent block, Google delivers normal images. What could be causing this issue?
For example, in a flex block, there is a paragraph and an image:
<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: