0

Im create Google Vitals friendly site and for now I have 0.01 CLS score with following code:

{% set image_size = image | image_size %}
{% set image_800 = image | imagine_filter('width_800') %}
{% set image_1200 = image | imagine_filter('width_1200') %}

<img loading="lazy" width="{{ image_size.width }}" height="{{ image_size.height }}"  src="{{ image_800 }}" srcset="{{ image_800 }} 800w, {{ image_1200 }} 1200w" class="d-inline-block img-thumbnail img-thumbnail-max" alt="{{ img.title }}">

but problem with images that height more that device screen (viewport) (for example image height 1200px and screen 800px).

Im write css class, that make image responsive by height and cannot be greater that 90% of screen height but this fix make CLS broken (more that 0.5 and greather).

.img-viewport-h90 {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 90vh;
}

Can someone help me, how can I make height responsive image that CLS friendly?

Dmitriy.Net
  • 1,476
  • 13
  • 24

0 Answers0