responsive_images and bootstrap card-img-top

[Serge Victor]

Hi,

I noticed a crazy distortion of images when I use responsive_images and bootstrap card-img-top class together which makes images responsive. Images have proper width, but they are transformed to have original height.

Is there any solution to overcome that issue?

[Longinos]

Hi

What other filters have you enabled?

Maybe you have some like this:

<div class="card" style="width: 300;">

<div class="card" > <img src="..." class="card-img-top" alt="..." width="150" height="150" >

If you have enabled the resize_images filter, the image is resized to 150x150, but the container is 300 width, so the image maybe is distortioned.

In a request basis you can enable or disable some filters:

https://mysite.com/?PageSpeedFilters=-resize_images

so you can test whats happens when the filter become disabled.

Can you post some url to test?

[Serge Victor]

Hi, I am talking about responsive_images, not about resize_images.

For responsive_images, if I can read the manual properly, "In order to take advantage of this filter, the original image must explicitly specify height and width attributes":

https://www.modpagespeed.com/doc/filter-image-responsive

thanks,

Serge

[Serge Victor]

But yes, I am using resize_images in the same time, so maybe these two filters collide? If yes, is there a way to make them both working in the same time?

S.

[Longinos]

I don´t think is a collision between filters rather than maybe a missconception on how the whole thing works.

If you have a sized container (<div class="card" style="width: 300;">) and put a image ( <img src="..." class="card-img-top" alt="..." width="150" height="150" >) that don´t fit the container size then when the image is rendered, maybe is distortioned.

But I´m talking w/o seeing the page, so maybe I´m wrong.

If that´s the case, can you try alternatively these 2 options and see if some works:

1.- put the width of the image with the same size of the container, and the heigth according to maintain the ratio

2.- Let the image w/o width/heigth, the filter resize_image don´t work well but the image get other optimiztions and hopefully don´t look with distortion