При использовании srcset для адаптивных изображений код выглядит примерно так:
<img
src="dog.jpg" alt="a dog"
srcset="dog-800.jpg 800w"
sizes="(min-width:1000px) 800px, 80vw">
Итак, теперь, когда я запускаю маяк для этой страницы, он говорит, что у изображения не указаны ширина и высота, что вызовет CLS.
Ок, понятно, теперь нужно указать ширину и высоту... Теперь код выглядит примерно так:
<img
src="dog.jpg" alt="a dog"
width="800px" height="440px"
srcset="dog-800.jpg 800w"
sizes="(min-width:1000px) 800px, 80vw">
Но теперь, после указания ширины и высоты этого изображения, srcset не работает (указанные ширина и высота перезаписывают мои правила srcset).
Итак, мой вопрос заключается в том, как указать ширину и высоту этого изображения, одновременно сохраняя его отзывчивым с помощью srcset?
Спасибо за помощь.
Для справки, я хочу сделать что-то вроде этого: Перейдите на эту страницу: https://web.dev/debug-web-vitals-in-the-field/ Затем проверьте изображение на этой странице. Посмотрите, как они указали ширину и высоту и использовали srcset одновременно с тегами img.
