Изображения HTML

22 мая 2013

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

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

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

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

29 марта 2014

Размеры

Когда картинки на сайте имеют разные размеры - это смотрится не красиво. Задать стандартные размеры для всех изображений на страницах сайта в одном месте и забыть.

25 сентября 2014

Злоупотреблять избыточным оформлением не стоит. Рисунки – это элемент общего стиля страницы и сами по себе являются оформлением.

03 апреля 2014

Html-код контейнера с изображением и подписью

<div class="pull-left item-image">
   <img src="pic.jpg" alt="test" /> 
   <span class="caption">Образец рисунка</span>
</div>

Оптимизируем код css

.item-image {
   border: 1px solid #eaeaea; /* если не нужно - отключить */
   box-shadow: 2px 2px 8px #eaeaea; /* параметры теней */
   -webkit-box-shadow: 2px 2px 8px #eaeaea;
   -moz-box-shadow: 2px 2px 8px #eaeaea;
   height:auto;
   margin: 0 auto 2px;
   padding: 3px; /* если не нужно - отключить */
   text-align: center; /* выравнивание подписи */
   width: 80%; /* задаем ширину для рисунка по центру */
}
.item-image img {
   width:100%;
}
[class*="pull"].item-image{
   max-width: 30%; /* ограничение по ширине в узких колонках */
   width: 220px; /* переопределяем размер для рисунков слева и справа */
}
.pull-left.item-image {
   margin-right: 8px;
   float: left;
}
.pull-right.item-image {
   margin-left: 6px;
   float: right;
}
.pull-none.item-image {
  float: none;
}
span.caption {
   display: block;
   line-height: 1.1em;
   padding: 8px;
}

Таким образом, установив/изменив стили в одном месте, мы меняем оформление изображений с заданными классами на всем сайте.