Нужно ли указывать размеры изображений при верстке HTML

Нужно ли указывать размеры изображений при верстке HTML

Нужно ли указывать размеры изображений при верстке HTML

Я начинал верстать HTML еще во времена Netscape 3.X. С самого начала я считал, что указывать размеры изображений нужно.

Страница на которой есть изображения с неуказанными размерами может «прыгать» в процессе загрузки.

Но сейчас стали появляться первые аргументы против, да  и вообще верстка в целом уже не та. Не нужно использовать «растяжек», размеры блоков и ячеек таблиц заранее известны, браузеры перестают показывать рамки загружаемых изображений и т.п.

Все это я к чему…недавно не указал размеры у несуществующей картинки, и вот что выдал мне FireFox:

  • В первой картинке указан размер — 10×10.
  • Во второй картинке ну указан размер.
  • В третей картинке указан размер — 100×100

FireFox 2.0.0.7 — HTML.

firefox.gif

FireFox 2.0.0.7 — XHTML

firefox-xhtml.gif

Microsoft Internet Explorer 7.0.5730.11 — HTML и XHTML (одинаково)

msie.gif

Opera 9.23 — XHTML и HTML (одинаково)

opera.gif

Safari 3.0.3 — XHTML и HTML (одинаково)

safari.gif

Как видно из картинок — FireFox, в случае если размеры картинки не указаны, отображает вместо картинки текст . Этот текст можно выделить, скопировать. Ничего не напоминает о наличии тега <img> (если не считать черную рамку, которая здесь только для наглядности)

При работе c XHTML FireFox так введет себя всегда, не зависимо от того, указаны размеры изображений или нет.

Остальным браузерам все по барабану. Если размер изображения не указан, то MSIE и Opera подгоняют рамку под «Альт», Safari действует подобный образом, но «Альт» вообще не отображает.

Вывод: если картинка маленькая и ее размеры указаны, то в FireFox «Альт» не отобразится, если размеры не указаны, то вместо картинки вы увидите простой текст.

Код используемый в примерах:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> 
<head> 
<title>Hello</title> 
<style type="text/css"> 
img {border: solid 1px black;} 
</style> 
</head> 
<body> 
<img src="notfound.gif" mce_src="notfound.gif" width="10" height="10" alt="Hello" /> 
<hr /> 
<img src="notfound.gif" mce_src="notfound.gif" alt="Hello" title="Hello" /> 
<hr /> 
<img src="notfound.gif" mce_src="notfound.gif" width="100" height="100" alt="Hello" /> 
</body> 
</html>

Комментарии