Где определить размеры изображения для самого быстрого рендеринга: в HTML или в CSS?
Я узнал, что это - лучшая практика для явного определения размеров изображения. Браузер тогда уже может расположение страница, все еще загружая сами изображения, таким образом, улучшая (воспринятое) время рендеринга страницы.
Действительно ли это верно? И если так, есть ли различие в определении размеров или в HTML или в CSS?
- HTML:
<img src="" width="200" height="100"> - Встроенный CSS:
<img src="" style="width: 200px; height: 100px"> - Внешний CSS:
#myImage { width: 200px; height: 200px; }
5 ответов
Согласно Google Page Speed, на самом деле не имеет значения, указываете ли вы размеры с помощью CSS или HTML, если ваш CSS нацелен на сам IMG-тег, а не на родительский элемент :
Когда браузер выкладывает страницу, он должен быть способен протекать вокруг заменяемых элементов, таких как изображения. Он может начать выводить страницу еще до того, как изображения будут загружены, при условии, что он знает размеры, чтобы обернуть вокруг невосстанавливаемых элементов. Если в содержащемся документе не указаны размеры, или если указанные размеры не совпадают с фактическими размерами изображений, браузеру понадобится перерисовка и перерисовка после загрузки изображений. Чтобы предотвратить перерисовку, укажите ширину и высоту всех изображений либо в HTML-теге, либо в CSS.
Однако, обратите внимание, что они советуют не изменять размер изображения, используя эти размеры, т.е. всегда использовать реальные размеры :
Не использовать спецификации ширины и высоты для масштабирования изображений на лету. Если файл изображения на самом деле имеет размеры 60 x 60 пикселей, не устанавливайте размеры 30 x 30 в HTML или CSS. Если изображение должно быть меньше, масштабируйте его в графическом редакторе и устанавливайте его размеры в соответствии (подробности см. в разделе Оптимизация изображений)
Я думаю, что CSS дает вам больше гибкости: вы можете специально настроить ширину или высоту, установив другой размер в auto. Но при установке обоих измерений, я не думаю, что есть разница.
Я обычно делаю это в CSS. Это, конечно, победа, когда есть несколько изображений с одинаковыми размерами (так что вы можете делать такие вещи, как .comment img.usergroup { width: 16px; height: 16px; }), и иметь одинаковые изображения, подлежащие масштабированию в различных таблицах стилей, таких как выбираемые пользователем темы.
Когда у вас есть полностью независимые изображения, которые используются на сайте только один раз, нет смысла абстрагироваться от их размера в CSS, так что HTML-версия, вероятно, была бы более подходящей там.
.Это не дает прямого ответа на ваш вопрос, но я бы не стал полагаться на размеры вашего изображения при верстке страницы. Вместо этого включите изображение в элемент на уровне блоков. Это избавляет и HTML, и CSS от необходимости хранить информацию, которая действительно не должна, так как изображение может меняться время от времени.
.Если вы поместили большое изображение в HTML-страницу без размеров, вы определенно должны заметить смещение макета страницы по мере загрузки изображения (по Интернет-соединению, если не локально).
Как и в других ответах, не имеет большого значения, делаете ли вы это в HTML или в CSS.
.