Если я знаю высоту и ширину изображения, которое я собираюсь отображать с тегом изображения, следует ли включать атрибуты высоты и ширины или просто помещать информацию в CSS? Или оба?
Исх.
<img src="profilepic.jpg" height="64" width="64" />
или
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
или
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
Согласно Google Page Speed , вы всегда должны определять ширину и высоту в теге изображения. Но, чтобы проверить, вы не можете использовать тег стиля.
Кроме того, вы всегда должны указывать ту же высоту и ширину, что и фактическое изображение, чтобы браузер не вносил никаких изменений в него, как изменение размера.
Я предлагаю сделать это
<img src="..." height="20" width="50">
Изменить: Кто-то предложил в комментариях, что было бы быстрее просто не добавлять какие-либо атрибуты. По словам Google (не то, что они являются концом всех знаний браузера):
Если в содержащем документе не указаны никакие измерения или если указанные размеры не совпадают с указанными размерами, то для загрузки изображений браузер потребует оплату и перерисовку. Чтобы предотвратить пересчет, укажите ширину и высоту всех изображений, либо в теге HTML, либо в CSS. - Подробнее
Учитывая, что вы можете делать измерения img в CSS, но для проверки вы должны сделать это в файле CSS, а не в строке.
BTW, Google Page Speed - это серия советов, направленных на ускорение отображения страницы.
Вы всегда должны указывать height и width изображения, если только для того, чтобы помочь браузеру выложить страницу еще до загрузки изображения.
См. 13.7 Визуальная презентация изображений, объектов и апплетов в спецификации HTML 4.01:
Атрибуты высоты и ширины дают пользовательские агенты представляют собой представление о размере изображения или объекта, чтобы они могли зарезервировать место для него и продолжить рендеринг документа во время ожидания для данных изображения.
Они рекомендуются и не требуются, но вы действительно должны их указать; -)
Кроме того, убедитесь, что указанные размеры фактически соответствуют размерам изображения.
Нет ничего хуже, чем ждать загрузки страницы только потому, что эти 400x300 (!) изображения в действительности больше похожи на 4000x3000 с качеством 95%.
Да, вы должны указать размеры, поэтому агенты пользователя заранее знают размер до того, как изображение полностью загрузится, поэтому макет не может потенциально выглядеть сломанным, если он зависит от размеров загруженного изображения. Кроме того, если вы полагаетесь на свойство фильтра IE6 для вставки png, вам понадобятся эти размеры.
Этот ответ теперь устарел, и я бы не сделал ту же рекомендацию, что и в 2009 году, с современными браузерами.
На самом деле не имеет значения, какой из них вы используете, но я бы рекомендовал использовать только один.
Я бы порекомендовал атрибут над решением css, поскольку он более совместим с более старыми браузерами, а люди со стилями отключены.
На самом деле вам не нужно указывать их. В соответствии с w3c specificatio n вы используете их только для переопределения значений по умолчанию, которые встроены в файл изображения и считываются браузером. При использовании масштабируется исходное изображение до заданных размеров, поэтому их размещение делает дополнительное исчисление для браузера.
Атрибуты высоты и ширины дают пользовательским агентам представление о размере изображения или объекта, чтобы они могли зарезервировать место для него и продолжить рендеринг документа во время ожидания данных изображения.
<img src="profilepic.jpg" alt="image" />