Есть две основные причины для превращения изображения в ссылку: чтобы привлечь внимание пользователей и предоставить пользователям большую область для щелчка или касания.

1. Для привлечения внимания

Изображения привлекают больше внимания, чем текст. Вот почему новостные статьи предлагают изображения ключевых событий, почему магазины приложений используют скриншоты, а сайты электронной коммерции включают изображения продуктов вместе с описаниями.

Есть и данные, подтверждающие это: согласно исследованиям, сообщения в социальных сетях и сообщения в блогах с частыми изображениями вызывают большее вовлечение и репост, чем сообщения без изображений, и люди с большей вероятностью сохранят информацию, если они сочетаются с визуальными эффектами. По мере развития веб-дизайна изображения никуда не денутся.

Это не означает, что текст не имеет значения. хотя. Поисковые системы постоянно сканируют текстовый контент с учетом контекста на вашем веб-сайте, а изображения традиционно сложнее анализировать на предмет влияния на сайт, поэтому текстовые описания продуктов или услуг необходимы для эффективного SEO.

Однако для многих сайтов сочетание этих двух типов носителей дает наилучший результат. Самый известный пример — страница продукта, которая включает изображение того, что продается, а также четкое описание, включающее ключевые функции, конкретные компоненты и цены.

Источник изображения

2. Создание больших интерактивных областей

Здесь есть еще один распространенный вариант использования, который объединяет изображения и текст: описания категорий, которые включают несколько продуктов. В этом случае предлагаемая информация минимальна — посетители обычно видят описание товара вместе с его ценой и качественным изображением. Эта комбинация повторяется снова и снова на странице для других товаров в той же категории или в том же ценовом диапазоне.

Подобные ситуации являются наиболее убедительным аргументом в пользу превращения изображения в ссылку, поскольку это помогает упростить взаимодействие с клиентами. Рассмотрим страницу с несколькими продуктами, каждый из которых содержит текстовую ссылку под изображением. В большинстве случаев текст ссылки занимает значительно меньше места, чем изображение, а это означает, что пользователям нужно приложить больше усилий, чтобы перейти по ней.

Это особенно сложно для пользователей, заходящих на неоптимизированные веб-сайты с мобильных устройств. Если изображения и текст не масштабируются должным образом, пользователям будет сложно точно нажать на нужную ссылку.

Используя ссылки на изображения, владельцы сайтов гарантируют, что и изображения, и текстовые описания ведут к одному и тому же месту, что, в свою очередь, снижает вероятность «неправильных кликов», которые приводят к неожиданным страницам и отказу от сайта из-за разочарования пользователей.

Возьмем этот пример из Briogeo: в каждом списке продуктов есть большое изображение, которое также служит ссылкой на страницу продукта.

Источник изображения

Теперь, когда вы понимаете преимущества преобразования изображения в ссылку, возникает следующий очевидный вопрос: как?

Если вы визуал, посмотрите этот видеоурок:

Или следуйте нашему пошаговому руководству по связыванию изображения с помощью HTML ниже.

Шаг 1: Выберите изображение.

Сначала найдите изображение, на которое хотите сделать ссылку. Если это изображение продукта на вашем веб-сайте, скорее всего, у вас уже есть несколько изображений. Используйте тот, который лучше всего демонстрирует продукт.

Если у вас нет фотографии, вы можете сделать и загрузить фотографию высокого качества или использовать существующее веб-изображение. Однако, когда дело доходит до перепрофилирования изображений, уже размещенных в Интернете, не забудьте либо заплатить за права на изображение, либо использовать бесплатное стоковое изображение.

Ниже приведен пример изображения, демонстрирующего маховик HubSpot. Это можно превратить в ссылку на целевую страницу на веб-сайте HubSpot.

Источник изображения

Шаг 2: Оптимизируйте размер и масштаб.

Перед загрузкой фотографии на сервер веб-хостинга стоит оптимизировать ее размер и масштаб. Большие размеры файла изображения замедлят время загрузки и могут не масштабироваться должным образом. Начните с просмотра размера любых существующих изображений на вашем сайте, чтобы сообщить свои рекомендации по размеру изображения и при необходимости сжать изображение.

Например, в блоге HubSpot мы используем Squoosh, бесплатный инструмент сжатия от Google. После загрузки изображения вы можете настроить качество в зависимости от желаемого конечного размера файла и выбрать выходной формат. Как правило, формат JPEG лучше всего подходит для изображений с большим количеством деталей (например, фотографий), а формат PNG лучше подходит для значков, изображений текста и графики.

Источник изображения

Squoosh также позволяет напрямую сравнивать качество несжатого изображения с качеством сжатого изображения. Как видно из приведенного выше примера, наше сжатое фото может быть не таким четким, но это, вероятно, не будет заметно посетителям, если ссылка на изображение достаточно мала на экране.

В конечном счете, решать вам, насколько сильно вы хотите сжать изображение, но обычно вы избегаете значительной пикселизации, сохраняя качество выше 70%.

Шаг 3: Загрузите изображение и получите URL-адрес.

Далее вам нужно загрузить изображение на ваш веб-сервер. Это может быть сделано с помощью вашего конструктора веб-сайтов или системы управления контентом, такой как CMS Hub. Или это может быть бесплатный хостинг изображений, такой как ImgBB.

Независимо от того, как размещено ваше изображение, оно должно быть загружено в Интернет, чтобы вы могли создать URL-адрес его местоположения — место, где ваш HTML-код будет «искать» ваше изображение для его отображения.

Возьмем, к примеру, изображение маховика выше. Это было загружено на сервер HubSpot и встроено в целевую страницу. Допустим, вы хотите встроить его в качестве кликабельной ссылки во внешний пост в блоге. Таким образом, читатели, которые нажмут на изображение, будут перенаправлены на веб-сайт HubSpot. В этом случае вы можете перейти на эту целевую страницу, щелкнуть изображение правой кнопкой мыши и выбрать «Копировать адрес изображения».

Это адрес изображения или URL-адрес местоположения: https://www.hubspot.com/hs-fs/hubfs/HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png ?width=1360&name=HubSpot-English-Flywheel-27-Jul-2020-04-17-18-68-PM.png. Мы будем использовать его позже в нашем HTML.

Шаг 4: Укажите целевой URL.

Затем вам нужен целевой URL-адрес, который указывает, куда ваша ссылка будет отправлять пользователей, когда они нажимают на ваше изображение, например, на определенный продукт или страницу оформления заказа на вашем веб-сайте.

Как обсуждалось выше, давайте сделаем URL-адрес назначения «https://www.hubspot.com/flywheel».

Шаг 5: Создайте HTML-код.

Теперь пришло время создать HTML-код. Вот базовый шаблон:

Давайте разберем это:

• Теги и представляют собой ссылку.
• Элемент привязки () содержит атрибут href. Замените «ProductPageURL» на URL-адрес страницы, на которую вы хотите, чтобы люди перенаправлялись, когда они нажимают на изображение.
• Тег представляет изображение.
• Элемент изображения содержит исходный атрибут. Замените «ImageURL» на URL вашего изображения.
• Он также содержит атрибут alt. Замените текст-заполнитель фактическим текстом, описывающим изображение.

Важно заполнить альтернативный текст описания, который может быть прочитан программами чтения с экрана, используемыми слабовидящими пользователями, а также будет отображаться, если изображение не может быть загружено. Альтернативный текст изображения также может улучшить ваше SEO.

Шаг 6: При необходимости вставьте свой код.

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

Если вы правильно выполнили шаги, в результате должно получиться кликабельное изображение, которое перенаправляет пользователей на целевой URL.

Например, вот изображение маховика HubSpot, превращенное в ссылку в CodePen:

См. Pen Преобразование изображения в ссылку от HubSpot (@hubspot) на CodePen.

Примечание.  При нажатии на изображение в модуле CodePen появится сообщение об ошибке, поскольку в модуле не удается загрузить всю веб-страницу. Но если вы наведете курсор на изображение, вы увидите URL-адрес в левом нижнем углу экрана. Вы также можете щелкнуть изображение правой кнопкой мыши и выбрать Открыть ссылку в новой вкладке . Целевая страница HubSpot Flywheel успешно откроется в новой вкладке.

Люди обычно предпочитают путь наименьшего сопротивления. Вот почему нам нужен более быстрый Интернет, и поэтому алгоритмы контента предназначены для предоставления нам контента, который мы хотим, когда мы этого хотим.

Эти минимальные усилия также применимы к веб-сайтам: сайты, которые эстетически приятны, просты в навигации и понятны, имеют наилучшие шансы привлечь внимание посетителей и повысить вероятность конверсии продаж.

Между тем, для ссылок-как-изображений человеческая природа предлагает четыре передовых метода:

Будь проще

Ссылки и изображения должны быть логически связаны — изображение должно сообщать пользователям, куда приведет ссылка, прежде чем они нажмут.

Например, если ваше изображение представляет собой изображение определенного предмета одежды, но ссылка ведет пользователей в общую категорию, потенциальные клиенты могут быть разочарованы. Вместо этого рассмотрите возможность использования изображения, содержащего несколько предметов одежды, в качестве ссылки на страницу категории. Вот пример:

Источник изображения

Здесь правило для ссылок как изображений простое: что вы видите, то и получаете.

Предложите резервную ссылку

Классические текстовые гиперссылки сегодня выглядят несколько устаревшими из-за их ярко-синего цвета и подчеркивания.

Подвох? Несмотря на существенные улучшения в HTML и других языках разметки, которые делают возможными более тонкие ссылки, многие пользователи привыкли распознавать традиционный формат синих ссылок.

В результате стоит предложить знакомую текстовую резервную копию любой ссылки на изображение, которую пользователи сразу поймут.

Ограничьте свои ссылки

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

Например, в приведенном ниже сообщении блога изображение не связано, потому что заголовок связан со страницей, на которой изображено изображение:

Источник изображения

В этом случае цель является приоритетом. любое изображение в ссылку, задайте простой вопрос: Почему? Если нет веской причины, не вносите изменения.

Регулярно проверяйте

И последнее, но не менее важное: регулярно проверяйте свои ссылки, чтобы убедиться, что они по-прежнему актуальны. Например, если линейки продуктов или цены изменились, старые ссылки могут устареть и направлять пользователей на страницы, которые больше не актуальны, или возвращать ошибку 404.