Как правильно использовать тег Picture?

Question

[Дмитрий Дев]

Как правильно использовать адаптивный тег picture, чтобы воспринимался нормально, валидаторы не ругались и google pagespeed не урезал картинки до мизера?

я использую так

<picture>
<source srcset="/img/mainpage_mainimg_3_576w.jpg 576w, /img/mainpage_mainimg_3.jpg 1920w" />
<img class="carousel-item__img d-block" src="/img/mainpage_mainimg_3.jpg" sizes="100vw" alt="Первый слайд">
</picture>

Answer 1

[yakupov112]

https://webdesign.tutsplus.com/ru/tutorials/quick-...

Answer 2

[Максим]

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Comments

[Дмитрий Дев]

Но при этом один вариант изображения google'ом сжимается до нельзя и потом только ругается на это, что сайт не оптимизирован. Как этого избежать?

Answer 3

[Дмитрий Дев]

А как чтобы google pagespeed не ужимал ее до мизера?

Изменение размера и сжатие изображения по адресу https://sea-trevel.ru/img/apolon_mainimg_992w.jpg уменьшит его на 302,4 КБ (96 %).
Изменение размера и сжатие изображения по адресу https://sea-trevel.ru/img/fidelio_mainimg_992w.jpg уменьшит его на 247,7 КБ (96 %).
Изменение размера и сжатие изображения по адресу https://sea-trevel.ru/img/alemannia_img_1_992w.jpg уменьшит его на 245,9 КБ (96 %).
Изменение размера и сжатие изображения по адресу https://sea-trevel.ru/img/bellejour_img_3_992w.jpg уменьшит его на 238,9 КБ (95 %).