- HTML код картинки
- Зачем нужна SEO оптимизация изображения для поисковиков?
- Параметр scr
- Атрибут alt
- Атрибут title
- Атрибут height и width
- Как убрать рамку вокруг картинки в IE
- Как расположить картинку по центру блока
- Как расположить картинку на одном уровне с текстом (по центру строки)
- Как расположить картинку справа от текста
- Как сделать чтобы картинка обтекала текст слева
- Очень важно и является продолжением темы: оптимизация размера файла изображения
- Помимо alt изображения важен окружающий картинку текст. Для создания подписи к картинке (Рис.1 Название фото) существует специальная HTML конструкция. С помощью CSS её можно сделать видимой сразу или после наведения на фото курсора мышки.
- Как сделать изображение по середине блока
HTML код картинки
Изображение на языке HTML имеет вид:
<img src="URL" />
Генератор HTML-кода изображения:
Зачем нужна SEO оптимизация изображения для поисковиков?
Поисковый робот не может понять что изображено на фотографии. Оптимизируя картинки (подробные рекомендации Гугла, Яндекса) мы даём сигнал поисковой системе, что наш рисунок нужно показывать по таким-то фразам [что такое ключевые слова].
С некоторых пор, у человека нет нужды переходить на сайт, так как и в Яндекс.Картинках, и в Google.Картинках фото представлены в полный рост, а не миниатюрами. Фактически это плагиат поисковыми гигантами изображений вебмастера. А значит были и случаи судебного разбирательства, когда Google выплачивал определённые суммы, и закрытие от индексации изображений в robots.txt или с помощью HTTP заголовока.
Кстати, фотоблогам или фотосайтам особо беспокоится не нужно. Яндекс создаёт серии картинок, которые показывают, что на сайте есть ещё фотографии, тем самым побуждая сделать переход на веб-ресурс, где эти изображения размещены.
Интернет-магазины также в плюсе. Поисковики могут осуществлять поиск по изображению, а не только ключевым словам. То есть введя в поле искомое фото туфель, можно найти в каком интернет-магазине они продаются.
Параметр scr
src - адрес файла рисунка. Наиболее популярны форматы JPEG, PNG и GIF.
Желательно, чтобы URL (пример, http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif):
- был осмысленным,
- написан латинскими буквами, если домен вида shpargalkablog.ru; или кириллическими при шпаргалкаблог.рф,
- строчными символами,
- в качестве разделителя слов использовалось тире, а не пробелы.
Атрибут alt
alt - альтернативный текст фотографии, видимый в браузере, если не отобразится изображение. В данном тексте желательно использовать ключевые слова, но не все подряд, а именно те, которые относятся к картинке. Длину делать желательно не более 16 слов в Google [эксперимент Devaka] или 280 символов для Яндекса [эксперимент Devaka].
Советую ко всем рисункам прописывать этот параметр, поскольку в Спецификации HTML он обозначен как "необходимый".
<img src="адрес" alt="текст" />Пример:
Атрибут title
title применяется, если нужно показать всплывающую подсказку при наведении курсора мыши на фотографию. В отличии от alt, title не уделяется столь большого значения для тега <img/>, а, следовательно, его использование не обязательно [см. более подробные исследования].
<img src="адрес" alt="текст" title="текст1" />Пример (наведите на смайла курсор мышки):
Атрибут width×height
Для ускорения загрузки страницы, желательно указывать:
- width - ширина изображения,
- height - высота изображения.
Они должны совпадать с реальными размерами файла. Иначе говоря, если меняете размер фото, то нужно менять и размер файла картинки [тут эта мысль раскрыта более доходчиво].
<img src="адрес" alt="текст" width="значение" height="значение" />
Для резиновых сайтов предложено несколько техник. Я ограничилась пока таким незамысловатым кодом (он далёк от идеала):
@media (max-width: 59em) { img {max-width: 100%; height: auto;} }
То есть пока максимальная ширина экрана не достигла 59em нужно использовать данные, прописанные в теге img. При ширине экрана меньше 59em рисунок становится резиновым.
Как убрать рамку вокруг картинки в IE
По умолчанию рамка вокруг изображения в Internet Explorer отображается в случае, когда фото является ссылкой. Чтобы её убрать, нужно прописать стиль CSS:
<style> a img { border: none; } </style>
Как расположить картинку по центру блока
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="display: block; margin: 0 auto;"/>
Как расположить картинку на одном уровне с текстом (по центру строки)
То есть не так . Свойственно для маленьких смайликов.
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!"/>
А так , что выглядит более эстетично.
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="vertical-align: middle;"/>
Как расположить картинку справа от текста
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="float: right; margin: 0 5px;"/> Остальное содержание.
Как сделать чтобы картинка обтекала текст слева
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="float: left; margin: 0 5px;"/> Остальное содержание.
10 комментариев:
В блоге www.onbags.ru картинки сделаны как ссылки, при нажатии на которые (к примеру прав. кл. мыши) вокруг картинки с некоторым отступом от ее края появляется рамка фокуса (пунктирная тонкая такая), так вот если отключить все margin в стилях, то внизу картинки отступ все равно остается. Помогите разобраться, уже все перепробовали... (Использую FireFox 35). Спасибо! Максим.
.PopularPosts img {
padding-top: 0;
}
.PopularPosts img {
padding-right: 0;
}
Я делаю через вкладку HTML и меняю код как мне будет удобно (см выше)