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

  • 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="в другой" />

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

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