Предупреждение о скорости страницы - Используйте явные ширину и высоту для элементов изображения

#css #image #tailwind-css #pagespeed #web-performance

Вопрос:

Я хочу установить отзывчивое изображение на своей веб-странице с помощью css tailwind. Я предоставил достаточно классов, чтобы заставить его работать на разных размерах экрана. Теперь я получаю следующую ошибку в скорости страницы.

Как я могу устранить предупреждение?

Ответ №1:

Попробуйте использовать соотношение сторон попутного ветра. Это прекрасно работает

Ответ №2:

Вы можете устранить это предупреждение, добавив width и height к своим изображениям следующим образом:

 <img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />

В основном добавление width и height непосредственно в html img -тег предотвращает изменение макета, даже если img он еще не загружен. Это особенно важно, когда img он лениво загружен. Более подробная информация здесь

1. CLS произойдет, даже если я укажу фиксированную высоту и ширину, и я хочу, чтобы мое изображение было отзывчивым, поэтому добавлены классы. Это не ответ на мой вопрос.

Ответ №3:

Простое добавление атрибутов и классов высоты и ширины не сработает, вам также придется обрезать изображения до их точного размера. Например, если вы установили высоту и ширину 100 пикселей, высота и ширина изображения также должны быть 100 пикселей.

Ответ №4:

Фон

Это предупреждение существует для предотвращения смещения макета при загрузке изображений. В настоящее время на изображениях есть классы w-5/6 mx-auto . Этого достаточно, чтобы сделать изображения отзывчивыми, но до загрузки изображений браузер не знает, какой высоты изображение. Следовательно, при загрузке изображения произойдет сдвиг макета.

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

С известными размерами

Если вы знаете высоту изображения, я бы рекомендовал следовать ответу Мэлин.

 <img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />

Поскольку мы определили ширину дисплея w-5/6 , изображение будет отзывчивым. width='300' height='300' Затем свойства и используются для соотношения сторон.

Вот ссылка с игровой площадки Tailwind, чтобы показать вам, как она реагирует и удаляет изменение макета: https://play.tailwindcss.com/rjz9ylFNl5?size=482×720

С неизвестными размерами

Если вы не знаете ширину и высоту своих изображений и вам нужно, чтобы они были отзывчивыми, вам, по сути, нужно создать контейнер с фиксированным соотношением сторон. Я бы рекомендовал посмотреть плагин соотношения сторон.

 <div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
  <img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full'  />
</div>

Опять же, ссылка на демо-версию игровой площадки Tailwind: https://play.tailwindcss.com/2zmPJixbrO?size=584×720