Изображения HTML
Пару слов о форматах
- 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="в другой" />
если изображение не отображается (выводится вот такой значок и/или указанный альтернативный текст), то причина, скорее всего, в следующем:
- По указанному адресу файла с таким именем не существует
- Ошибка при написании пути или имени файла
- Недопустимые символы в адресе или названии файла (кириллица, пробелы и т.п.)
Размеры
Когда картинки на сайте имеют разные размеры - это смотрится не красиво. Задать стандартные размеры для всех изображений на страницах сайта в одном месте и забыть.
Злоупотреблять избыточным оформлением не стоит. Рисунки – это элемент общего стиля страницы и сами по себе являются оформлением.
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; }
Таким образом, установив/изменив стили в одном месте, мы меняем оформление изображений с заданными классами на всем сайте.