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