с возможностью перехода по дополнительной ссылке для просмотра полноразмерного изображения.
<a href=«место размещения оригинала»> <img src=«место размещения превью»> </a>
2.Ниже картинки с помощью тега «p» вставляют её описание.
<img src=«адрес изображения» alt=«альтернативная подпись изображения» />
<p> Подробное описание картинки </p>
Если сайт поддерживает html5 можно использовать теги «figure» и «figcaption».
<figure> <img src=«адрес изображения» alt=«альтернативная подпись изображения» />
<figcaption> Подробное описание картинки </figcaption> </figure>
В целях оптимизации используются атрибуты тега «img».
3. Атрибут «alt»
«alt» – отвечает за вывод описания изображения текстом на экран, когда браузер пользователя не может открыть картинку. Выглядит так:
<img src=«место расположения картинки» alt=«Описание картинки»>
Текст, являющийся описанием картинки, помещённый внутрь атрибута «alt» так же влияет на оптимизацию изображений, помещённых на страницы.
Нужно обходиться 50—60 символами, большие тексты плохо воспринимаются поисковыми роботами.
4.Атрибут «title»
Текст помещённый в title выводится как подсказка в момент наведения курсора мыши на картинку. Обычно в нем помещают дополнительные данные об изображении.
При установке изображения в её атрибутах обязательно надо прописать Titl – Заголовок и Alt – «альтернативный текст» или если картинка одна, то попросту ключевые фразы, соответствующие контенту страницы.
5.«url» фотографии
Здесь нужно проставить адрес страницы, на которой находится картинка.
Человеко- понятный «url» несёт в себе информацию для пользователей, а также поисковых систем
Если у вас несколько картинок, то прописывайте в данных атрибутах очень краткое описание того, что изображено на каждой картинке.
Внимание! Часто допускается атрибуты title и alt делать одинаковыми до 10 слов.
Название файла должно быть кратким и описывать содержимое картинки.
Эти параметры позволяют дать поисковым системам понять, о чём говорит то или иное изображение и попасть изображениям в поиск по картинкам по определённым запросам, которые мы и пропишем в данных атрибутах.
Объем текста для Alt должен составлять 3—10 слов, для Title допустимо более развёрнутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.
Для уже загруженных картинок редактирование атрибута Alt доступно по щелчку кнопки мыши по изображению (иконка «Изменить» с изображением карандаша). В этом же окне («Параметры изображения») можно обнаружить и доступную для изменения строку Title, для этого необходимо развернуть пункт меню «Дополнительные настройки».
Оптимизация размера и веса изображения
Внимание! Некоторые плагины, которые мы установили, имеют функцию оптимизации изображений.
