Блог

У меня есть <img> тег, и я использую «размеры» для расчета ширины для адаптивных изображений. Однако маяк сообщает CLS для изображений. После добавления «высоты» в разметку он продолжает сообщать о проблеме. Я также попытался добавить «ширину», но это перезаписывает значение «размеры», которое не предназначено. Я ищу решение/обходной путь, чтобы избежать CLS, сохраняя при этом «размеры», применяемые после загрузки изображения.

Вот это псевдо:

 <img src="mock.com/large.jpg" srcset="mock.com/xsmall.jpg 160w, mock.com/small.jpg 320w, mock.com/test.jpg 320w, mock.com/large.jpg 1600w" sizes="(min-width: 576px) 333px, (min-width: 992px) 444px, 250px" height="350px" width="200px" loading="lazy">
 

Я хочу, чтобы 200 пикселей рассматривались как заполнитель перед загрузкой и не перезаписывали значение фактического размера. Одним из решений может быть использование «изображения» вместо этого и явное задание ширины и высоты, но я думаю об исправлении текущего кода.