Вольный перевод и компиляция своего и зарубежного опыта
Практически в любой статье/книге о создании и редактировании HTML упоминается
о том, что при размещении в документе графики, в рамках тэга IMG полезно
использовать параметры ширины и высоты (WIDTH и HEIGHT). Реже указано,
почему. И практически никогда не упоминается о тех возможностях управления
расположением элементов на странице, которые скрыты в этих скромных установках.
Параметры WIDTH и HEIGHT тэга IMG задают ширину и высоту данной картинки в пикселях, т.е. точках экрана. Таким образом, они позволяют браузеру зарезервировать для данной картинки необходимое место на странице.
В принципе, картинка будет видна и без них, и даже - в правильном размере (за редким исключением). Но в этом случае браузер сначала разместит текст, а потом, когда картинка начнет подгружаться, раздвинет и переформатирует его, освобождая нужное место. Часто это выглядит достаточно неаккуратно.
Стоит также упомянуть (а то я смотрю, вы потянулись проверять свой код), что умные HTML-редакторы автоматически вставляют нужные значения WIDTH и HEIGHT при импорте картинки. Правда, знаю об этом по слухам: сам не пробовал, не пользовался.
С другой стороны, не любая картинка так болезненно реагирует на масштабирование.
Представьте, что вам надо изобразить на странице красную черту. Можно создать изображение размером 400х2 точки и поместить его в IMG. Выглядеть оно будет следующим образом:
В коде это выглядит так:
<IMG SRC="line-red.gif" WIDTH=400 HEIGHT=2 BORDER=0>А можно создать файл состоящий из одного красного пикселя и задать ему нужную ширину и высоту:
Код абсолютно такой же:
<IMG SRC="pix--red.gif" WIDTH=400 HEIGHT=2 BORDER=0>Различие состоит лишь в том, что файл pix--red.gif представляет собой 1 пиксель (41 байт), а line-red.gif - настоящую полоску (65 байт).
Казалось бы, мы выиграли только 24 байта, ан не скажите... В данном случае полоса окозалась лишь немногим больше точки из за того, что умный GIF формат крайне эффективно работает с массивами одного цвета. Пользуясь подобным приемом для многоцветных изображений, можно добиться гораздо большей "выгоды".
Например:
(564 байта)
и
(90 байтов)
Но главное даже не в этом. Главное в том, что если вы используете на своей странице подобные полоски, бордюрчики, рамочки и даже цветные плашки отличающиеся не содержанием, а размером, вы вполне можете использовать только один файл-изображение, варьируя его WIDTH и HEIGHT. А это уже экономия на количестве соединений с сервером и довольно ощутимый выигрыш по времени. Понятно, что на следующей странице этот элемент уже не будет "вытягиваться из сетки", а будет взят браузером из "кэша".
В качестве примера могу привести свой собственный сайт novik.mdl.ru:
все белые полоски на всех страницах - суть один единственный файл/пиксель
"pixwhite.gif".
Что делать?
Начинать абзац с отступа! Причем
попиксельно контролируя его величину.
Достаточно лишь поставить в
начало каждого параграфа по ма-а-аленькой прозрачной точечке. У меня она
называется "zero-pix.gif". Это GIF файл из одного пикселя, которому задан
прозрачный "цвет". Можете скачать его прям отсюда (и сделать FILE > SAVE
AS), чтоб не тратить время на изготовление такой пустяковины.
Указывая в его IMG тэге "WIDTH=20
HEIGHT=1" я точно задаю величину отступа равную 20 точкам.
Немножко потрудившись, можно соорудить и подобный изыск:
Один-единственный
прозрачный пиксель
в начале
строчки
дает нам
столь давно искомое
средство
управления
пробелами
и отступами
в тексте
в рамках
HTML
И не говорите мне ни про какие каскады стильных листов, панимаешь!
Аналогичным приемом можно, например, устанавливать фиксированную (вернее
"не меньше, чем") высоту строки/ячейки в таблице.
Однако у меня, признаюсь, существуют сомнения на предмет универсальности этих параметров. И потом, так лениво делить величину нужного отступа на 2 (ведь добавляется он с обеих сторон картинки), а затем вычитать размер самой картинки.
