Указание размеров изображения в HTML против CSS для загрузки страницы

Question

Я где-то давно узнал, что указание ширины и высоты для <img> элементов в HTML-документе ускоряет и улучшает процесс загрузки страницы, и в целом придерживался этой практики:

<img src="" width="100" height="100" />

Теперь я столкнулся с ситуацией, когда у меня очень большое количество изображений на одной странице, и я бы предпочел установить размеры с помощью CSS для более простого управления и менее повторяющегося HTML-кода:

.whatever img {width: 100px; height: 100px;}

Хотя это не очень серьезная проблема, мне интересно, будет ли объявление измерений в CSS иметь те же преимущества, что и объявление измерений в HTML, или это должно быть сделано непосредственно в HTML?

Любое понимание будет приветствоваться.

Спасибо

Answer 1

Полагаю, если таблица стилей будет доступна сразу, размеры изображения будут немедленно применены к макету, который и составляет весь смысл упражнения.

Это предположение поддерживается правилами скорости страниц Google . Кажется, что они подходят для указания изображений таким образом (выделение мое):

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

Когда браузер размещает страницу, он должен иметь возможность обтекать сменные элементы, такие как изображения. Он может начать отображать страницу даже до загрузки изображений, при условии, что он знает размеры, чтобы обернуть несменные элементы вокруг. Если в содержащем документе не указаны размеры или указанные размеры не соответствуют размерам реальных изображений, браузер потребует перекомпоновки и перекраски после загрузки изображений. Чтобы предотвратить перекомпоновку, укажите ширину и высоту всех изображений в теге HTML <img>, или в CSS .

.

Answer 2

Принципиальная разница между определением ширины и высоты в атрибуте (в отличие от CSS) заключается в том, что он становится данными , а не параметром представления. Просто представьте себе управление следующей таблицей стилей

img[src='/images/tree.jpeg'] {
    width: 100px;
    height: 100px;
}

Это без необходимости запутывает CSS с изображениями. Он также ограничивает адаптивную компоновку, т. Е. Вы больше не можете, чтобы еще не загруженные изображения занимали правильное пространство, когда выводится одно из их измерений (например, width: 100%).

Также рассмотрим правила CSS, такие как object-fit. Может возникнуть путаница в том, что тогда означают свойства стиля width и heigth.