Img-отзывчив с атрибутами ширины и высоты

Question

Я проверял скорость своего сайта на GTMetrix.com. На вкладке «Скорость страницы» было рекомендовано указать размеры изображений для изображений.

Я использую сайт Bootstrap.

Изображения на моем сайте в настоящее время имеют следующую HTML

<img class="img-responsive" src="the-path"> 

Их рекомендация в GTMetrix, который гласит, что эти изображения отсутствуют ширину и/или атрибуты высоты.

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

Можете ли вы указать, должны ли размеры ширины и высоты быть включены на каждый img на веб-сайте Bootstrap, даже если используется класс, отвечающий требованиям img.

Answer 1

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

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

Answer 2

пытаются использовать http://www.w3schools.com/cssref/pr_dim_height.asp

с использованием свойств, как: изменение пикс ВХ (вертикальная высота) или HH (горизонтальная высота) ... например:

высота: 80vh; ширина: 40hh;

размер 1 vh или hh зависит от размера screnn