Ссылки на изображения. Как картинки появляются на сайтах.

Сегодня практически на любой странице в Интернете можно увидеть различные картинки. Давайте разберемся как собственная ссылка на изображение или фото может быть размещена на сайте.

Сервисы для хранения обычно предлагают:

Хостинги обеспечивают конфиденциальность информации. Пользователь сам решает, кому открыт доступ к фото, значит, они не всплывают в общем поиске картинок.

Вставить картинку на сайт с помощью ссылки через HTML можно, используя тег img и атрибут src. Код будет выглядеть:

<img src="адрес_картинки" />, где адрес_картинки - путь к файлу, т.е. url-адрес фото. С таким кодом вокруг изображения будет автоматически создаваться рамка толщиной в 1 пиксель, соответствуя цвету текстовых ссылок.

<img> отобразит на странице изображение, не ссылаясь на другие документы.

Вставить HTML ссылку на фото и сделать его кликабельным можно, заменив тег <img> на <a> с атрибутом href, подразумевающим переходную ссылку на страницу. Вид кода: <a href="адрес_страницы"><img src="адрес_картинки" /></a>. Здесь "адрес_страницы" - URL к документу, на который перейдет пользователь кликнув на фото. URL-адрес будет сгенерирован в виде ссылки на сервисе, где хранятся ваши фотографии. Т.е. она должна быть размещена в Интернете в облачном хранилище, а не на компьютере.

Если вы хотите открыть ссылку на фото с соседнем окне, добавьте к href атрибут target="_blank":

Ссылка на фото добавляется и через свойство CSS - background (background-image). К элементу div добавляем тег <a> и class. Обращаясь через класс к группе элементов, проще управлять стилистикой.

<div class="box-image">

<a href="адрес_страницы" class="link-image"></a>

</div>

Прописывая правила классу box-image и link-image вставляем фото через атрибут background-image:

background-image: url("адрес_картинки");

Добавление ссылки на фото - возможности HTML, даже при использовании инструментов CSS, мы добавляем теги html внутри div.

В соцсетях и мессенджерах часто встречаются кликабельные изображения-ссылки с небольшим описанием под ними, вместо пустого URL-адреса. Такой вывод фото получается при использовании разметки Open Graph. При использовании различных систем управления сайтами и установке плагинов, параметры для вывода Open Graph определяются автоматически или прописываются создателем. Когда точной настройки не было, вывод картинки может произойти без установки плагина или разметки и быть некорректным. Соцсеть берет любую картинку с сайта, тайтл и описание страницы. Такой вывод не всегда удачен и красив, поэтому лучше установить плагины, настраивающие разметку Open Graph. 

Для лендингов и одностраничников проще установить стандартные настройки отображения главной страницы. Добавьте теги:

<meta property="og:title" content="_заглавие_страницы_title_">

<meta property="og:site_name" content="_название_сайта_">

<meta property="og:url" content="_сссылка_на_лендинг_">

<meta property="og:description" content="_описание_description_">

<meta property="og:image" content="_cсылка_на_картинку_логотип_лендинга_">

Использование ссылки на фото с помощью разметки позволит более удачно продвигать сайт через социальные сети. Подробнее о создании лендингов на сервисе Хиполинк можно прочитать здесь.