Как сделать в html на картинку еще картинку

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):

  1. был осмысленным,
  2. написан латинскими буквами, если домен вида shpargalkablog.ru; или кириллическими при шпаргалкаблог.рф,
  3. строчными символами,
  4. в качестве разделителя слов использовалось тире, а не пробелы.
Для реализации вышесказанного, сначала изображение сохраняем на компьютер, присваиваем нужное название, а затем добавляем на блог/сайт.

Атрибут alt

alt - альтернативный текст фотографии, видимый в браузере, если не отобразится изображение. В данном тексте желательно использовать ключевые слова, но не все подряд, а именно те, которые относятся к картинке. Длину делать желательно не более 16 слов в Google [эксперимент Devaka] или 280 символов для Яндекса [эксперимент Devaka].

Советую ко всем рисункам прописывать этот параметр, поскольку в Спецификации HTML он обозначен как "необходимый".

<img src="адрес" alt="текст" /> Пример: Смайлик большой палец вверх

Атрибут title

title применяется, если нужно показать всплывающую подсказку при наведении курсора мыши на фотографию. В отличии от alt, title не уделяется столь большого значения для тега <img/>, а, следовательно, его использование не обязательно [см. более подробные исследования].

<img src="адрес" alt="текст" title="текст1" /> Пример (наведите на смайла курсор мышки): Смайлик большой палец вверх

Атрибут width×height

Для ускорения загрузки страницы, желательно указывать:

  1. width - ширина изображения,
  2. 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;"/> Остальное содержание.


Закрыть ... [X]

Как наложить одну картинку на другую средствами html? - Форум об Цитата рика граймса

Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку Как сделать в html на картинку еще картинку