Интернет-браузеры поддерживают два основных формата изображений - GIF и JPEG. Тип файлов GIF (Graphical Interchange Format) стал первым типом файлов, поддерживаемых сетью. Файлы в более позднем формате JPEG (Joint Photographic Experts Group) за счет специальной техники компрессии изображений занимают меньше места, чем файлы GIF, поэтому быстрее загружаются. Сохраняют цвета и детали лучше, чем GIF.
Итак, запостим картинку и займемся ее кодом:


Изображения можно помещать в любом месте Web-страницы, в текст, таблицы, заголовки с помощью элемента IMG (image), состоящего из одного тега и атрибута src="имя файла". Это обязательный атрибут.
Код нашей картинки выглядит так:
<img src="http://www.liveinternet.ru/images/attach/1/4030/4030050_girl.jpg">
Поскольку картинка размещена там же, где и дневник, на Ли.ру, можно прописывать не весь адрес, а только его часть:
<img src="/images/attach/1/4030/4030050_girl.jpg">
Это называется локальная ссылка

Рамка вокруг рисунка задается атрибутом border в теге IMG. Толщина рамки задается значением атрибута в пикселях от 1.
<img src="/images/attach/1/4030/4030050_girl.jpg" border="0">

Загрузка изображений занимает много времени. Возможен режим просмотра документов, когда браузер не выводит изображение. Альтернативный текст на месте рисунка - это краткое описание того, что представлено на рисунке. Прочитав этот текст, можно загрузить изображение, если оно представляет интерес. Для этого используем атрибут alt:
<img src="/images/attach/1/4030/4030050_girl.jpg" alt="Девочка">

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически , в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка.
Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width позволяют отвести точно определенное место под изображение и сделать обтекание текстом этого места. Атрибуты height и width меняют не время загрузки изображения , а только его вид (размер) на экране. Браузер, зная сколько места займет изображение, сначала выводит текст, а потом изображение. Кстати, в лирушном коде картинки эти атрибуты прописываются автоматически, но вы можете пропорционально изменить их в процессе редактирования.
<img src="/images/attach/1/4030/4030050_girl.jpg" width="120" height="123">

Справа и слева от рисунка можно создать пустое пространство с помощью атрибута hspace элемента IMG, сверху и снизу - с помощью атрибута vspace элемента IMG. Размеры задаются в пикселях. Это важно, чтобы картинка не "слипалась" с текстом.
<img src="/images/attach/1/4030/4030050_girl.jpg" hspace="5" vspace="5">

Теперь выберем выравнивание картинки относительно страницы (справа, слева или по центру):
<img src="/images/attach/1/4030/4030050_girl.jpg" align="right|left|center">
Выравнивание по левому краю задается по умолчанию.

Картинка может быть ссылкой. Для этого ее код впишем в адрес:
<a href="URL ссылки"><img src="/images/attach/1/4030/4030050_girl.jpg"></a>
Именно таким образом можно превратить простую картинку в кнопку))

Итак, посмотрим, что у нас получится, если мы пропишем все необходимые атрибуты для этой картинки и разместим ее в тексте:
<img src="/images/attach/1/4030/4030050_girl.jpg" border="0" align="right" hspace="5" vspace="5" width="120" height="123" alt="Девочка">

Пример текста с картинками-ссылками смотрим здесь.