Использование следующего кода для обслуживания адаптивных и оптимизированных изображений.
<picture>
<source type="image/webp"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.webp 200w,
https://www.example.com/img3/santa-cam-2020,w_354.webp 354w,
https://www.example.com/img3/santa-cam-2020,w_475.webp 475w,
https://www.example.com/img3/santa-cam-2020,w_581.webp 581w,
https://www.example.com/img3/santa-cam-2020,w_793.webp 793w"
>
<source type="image/jpg"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.jpg 200w,
https://www.example.com/img3/santa-cam-2020,w_354.jpg 354w,
https://www.example.com/img3/santa-cam-2020,w_475.jpg 475w,
https://www.example.com/img3/santa-cam-2020,w_581.jpg 581w,
https://www.example.com/img3/santa-cam-2020,w_793.jpg 793w"
>
<img src="https://www.example.com/img3/santa-cam-2020,w_793.jpg" alt="" >
</picture>
Код работает; основан на следующих ресурсах; и кажется бесспорным (?): Mozilla: адаптивные изображения web.dev: показ адаптивных изображений
GPSI (мобильный тест) / Lighthouse говорят, что код не обслуживает изображения надлежащего размера. Смотрите скриншот.
++++++++++++
Маяк / Скриншот GPSI: 
++++++++++++
Я играл с sizes = (изначально предоставленными Cloudinary, когда он предоставил файлы img), но безрезультатно.
Я удалил строки srcset (начиная с самой большой ширины файла, 793w). Мобильное предупреждение GPSI исчезает, если удалены последние 2 строки.
Также удален раздел .webp (jic ;-)
Я могу подтвердить, что изображения подходящего размера загружаются с разным разрешением экрана. Я тестировал это с помощью Chrome DevTools. Однако сначала необходимо полностью очистить кеш браузера.
У меня такая же проблема с изображениями правильного размера при запуске Lighthouse в режиме инкогнито.
Что мне не хватает или есть проблема с GPSI / Lighthouse?
