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

Если я знаю высоту и ширину изображения, которое я собираюсь отобразить с помощью тега изображения, я должен включить атрибуты высоты и ширины или просто поместить информацию в 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;" />
66 голосов | спросил Josh Gibson 8 AM00000050000001031 2009, 05:21:10

5 ответов


0

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

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

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

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

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

  

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

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

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

ответил Tyler Carter 8 AM00000050000001431 2009, 05:23:14
0

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

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

  

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

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

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

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

ответил Sinan Ünür 8 AM00000050000002631 2009, 05:28:26
0

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

ответил meder omuraliev 8 AM00000050000005031 2009, 05:27:50
0

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


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

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

ответил MitMaro 8 AM00000050000003531 2009, 05:31:35
0

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

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

<img src="profilepic.jpg" alt="image" />
ответил Elzo Valugi 8 AM00000050000002831 2009, 05:38:28

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132