Должен ли я указать атрибуты высоты и ширины для моих IMG в HTML?

Question

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

Ex.

<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;" />

Answer 1

Согласно Google Page Speed ​​, вы всегда должны определять ширину и высоту в теге изображения. Но для проверки вы не можете использовать тег стиля.

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

Я бы предложил сделать это

<img src="..." height="20" width="50">

---

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

Если в содержащем документе не указаны размеры или указанные размеры не соответствуют размерам реальных изображений, браузер потребует перекомпоновки и перекраски после загрузки изображений. Чтобы предотвратить перекомпоновку, укажите ширину и высоту всех изображений либо в теге HTML, либо в CSS. - Подробнее

Учитывая это, вы можете выполнить измерения img в CSS, но для проверки вам придется сделать это в файле CSS, а не в строке.

Кстати, Google Page Speed ​​- это серия советов, направленных на ускорение рендеринга страницы.

Answer 2

Вы всегда должны указывать height и width изображения, чтобы помочь браузеру выложить страницу еще до загрузки изображения.

См. 13.7. Визуальное представление изображений, объектов и апплетов в спецификации HTML 4.01:

Атрибуты высоты и ширины дают пользовательские агенты представление о размере изображение или объект, чтобы они могли зарезервировать место для него и продолжить визуализация документа во время ожидания для данных изображения.

Они рекомендуются и не требуются но вы действительно должны указать их; -)

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

Нет ничего хуже, чем ждать загрузки страницы только потому, что эти 400x300 (!) Изображения в действительности больше похожи на 4000x3000 с 95% качеством.

Answer 3

Да, вы должны указать размеры, чтобы агенты пользователей заранее знали размер до полной загрузки изображения, чтобы макет не выглядел потенциально поврежденным, если он опирается на размеры загруженного изображения. Кроме того, если вы полагаетесь на свойство фильтра IE6 для вставки png, вам понадобятся эти размеры.

Answer 4

Этот ответ уже устарел, и я бы не стал давать те же рекомендации, что и в 2009 году для современных браузеров.

---

Не имеет значения, какой вы используете, но я бы порекомендовал использовать только один.

Я бы порекомендовал этот атрибут для решения css, поскольку он более совместим со старыми браузерами и людьми с отключенными стилями.

Answer 5

На самом деле вам не нужно их указывать. В соответствии с w3c specificatio n вы используете их только для переопределения значений по умолчанию, которые встроены в файл изображения и считываются браузером. При использовании исходное изображение будет масштабироваться до заданных размеров, поэтому их установка создает дополнительное исчисление для браузера.

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

<img src="profilepic.jpg" alt="image" />