Размер графического изображения

Время загрузки графических изображений является одной из основный проблем, которые нужно учитывать при создании и обработки Web-страниц.
Существует 2 способа решения этой проблемы: первый - добавления в тег IMGатрибута lowsrc, или второй - установка атрибутов ширины (width) и высоты (height) изображения.

Стандарт Изменена ширина Изменена высота

Атрибуты размера изображения width и height, которые измеряются в пикселях, предупреждают браузер до приема всего графического файла о том, какой будет размер загружаемого изображения. Со всеми учетами размеров, браузер сначало выделяет место, требуемое для изображения, готовит макет документа, показывает текст и только после этого загружает графику. Это значит что клиент может прочитать содержимое до того, как загрузится изображение.
Вот так выглядит тег добавления изображения с атрибутами изменения размера изображения:
<img scr="photo1.gif" width="170" Height="73">
Как создать рамку вокруг вокруг изображения.
Для картинок в браузере так же существуют рамки, ими можно управлять, их можно создать, отменить и изменить толщину, она, кстати, измеряется в пикселях.

Изображение без рамки

Изображение с рамкой

Рамки для картинок - это конечно же хорошо, однако не все хотят видеть эту черную полосу вокруг изображения. По этому еще есть функция поля вокруг изображения .
Как создать поле вокруг изображения.
Пустые поля над и под изображением создаются с помошью атрибута VSpaceв теге <img>. Поля слева и справа - атрибутом HSpace. Размеры полей так же как и размеры рамки задаются в пикселях.
Ниже 2 примера, без рамки и с рамкой:

В обычных условиях графика встраивается вплотную к тексту. Текст плотно обтекает картинку со всех сторон. Иногда это выглядит нелепо, или не красиво, по этому вокруг изображения делают пустые поля.

В обычных условиях графика встраивается вплотную к тексту. Текст плотно обтекает картинку со всех сторон. Иногда это выглядит нелепо, или не красиво, по этому вокруг изображения делают пустые поля.