Общая информация

Пару слов о форматах

• GIF - Graphics Interchange Format (формат обмена графикой)
  - малый объем файла
  - сжатие без потерь!
  - легко анимируется
  - ограниченная палитра 256 цветов
  - 1 слой прозрачности
• JPEG - Joint Photographic Experts Group (организация по стандартизации)
  - много цветов
  - достаточно тяжелые файлы
  - при сжатии потери
• PNG - Portable NetWork Graphics (переносимая сетевая графика)
  - много цветов
  - мало потерь при сжатии
  - более 65тыс. слоев прозрачности!

Синтаксис, основные атрибуты

<img src="picture.phg" alt="Тестовое изображение" title="Картинка" />

• img - Тег изображения. Закрывающий тег отсутствует, вместо него обязательный перед закрывающей скобкой пробел+слеш
• alt - обязательный атрибут. Альтернативный текст, который будет выведен вместо изображения, если вывод последнего невозможен или отключен. Индексируется поисковыми роботами! При отсутствии - ошибка валидации.
• title - не обязательный атрибут. Отображается как подсказка при наведении курсора на изображение.
• src - обязательный атрибут. Указывает относительный или абсолютный путь к файлу изображения.

Подробнее об атрибуте SRC.

Абсолютный адрес - с указанием протокола и интернет-ресурса

<img src="http://www.site.com/images/picture.png" alt="Изображение" title="Внешний источник" />

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

Относительные адреса - внутри сайта. Допустим, изображение на странице, которая выводится в файле index.html

<!-- Изображение в той же папке, что и index.html -->
<img src="picture.png" alt="в той же папку" />
 
<!-- Изображение в папке www/images, index.html в папке www -->
<img src="images/picture.png" alt="в другой" />
 
<!-- Изображение в папке www/images/banners, index.html в папке www/tmpl -->
<img src="../images/banners/picture.png" alt="в другой" />

если изображение не отображается (выводится вот такой значок и/или указанный альтернативный текст), то причина, скорее всего, в следующем:

• По указанному адресу файла с таким именем не существует
• Ошибка при написании пути или имени файла
• Недопустимые символы в адресе или названии файла (кириллица, пробелы и т.п.)