Блог

У меня есть адаптивное изображение следующим образом:

 <img 
  src="image.jpg1"
  srcset="
    image1.jpg 99w 40h,
    image2.jpg 198w 80h,
    image3.jpg 124w 50h,
    image4.jpg 248w 100h,
    image5.jpg 179w 72h,
    image6.jpg 358w 144h
  " 
  sizes="(min-width: 1280px) 179px, (min-width: 960px) 124px, 99px"
  class="image"
>
  

А затем оформлено так:

 .image {
  width: auto
  height: 40px;

  @media (min-width: 960px) {
    height: 50px;
  }

  @media (min-width: 1280px) {
    height: 72px;
  }
}
  

Имена изображений были сокращены, но все они динамически изменяются в соответствии с указанным размером, а их соотношение сторон используется для обеспечения правильной высоты и ширины.

Итак, на большом экране (> 1280 пикселей в ширину) я бы ожидал, что тег будет выбираться image5.jpg на стандартных экранах, image6.jpg на экранах сетчатки.

Тем не менее, меньшее из двух выбирается в браузере независимо, в то время как отчет маяка выбирает большее, но по-прежнему помечает это как проблему (несмотря на то, что изображение определенно имеет размеры 358 x 144):

 Displays images with inappropriate size

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

URL         Displayed size  Actual size  Expected size
image6.jpg  179 x 72        179 x 72     358 x 144
  

Я запустил это в режиме инкогнито, чтобы исключить проблему с кэшированием, и протестировал с разными изображениями с тем же результатом.

Я немного озадачен тем, почему выбрано неправильное изображение и как успокоить Lighthouse. У кого-нибудь есть какие-либо предложения?