Как сделать кликабельную картинку html

Для того чтобы сделать картинку кликабельной в HTML, нужно использовать тег <a> и вложить в него тег <img>. В атрибуте href указать ссылку, на которую будет переход при клике на картинку. Пример:

<a href="http://example.com">
  <img src="image.jpg" alt="Картинка" />
</a>

Также можно добавить атрибут target="_blank", чтобы ссылка открывалась в новой вкладке браузера:

<a href="http://example.com" target="_blank">
  <img src="image.jpg" alt="Картинка" />
</a>

Оберните картинку в ссылку: тег <img> внутри тега <a>:

<a href="https://ru.hexlet.io">
  <img src="logo.png" alt="Хекслет">
</a>

Клик по картинке откроет адрес из href.

Открыть ссылку в новой вкладке

<a href="https://ru.hexlet.io" target="_blank" rel="noopener">
  <img src="logo.png" alt="Хекслет">
</a>

rel="noopener" не даёт открытой странице управлять вашей вкладкой.

Маленькая картинка открывает большую

Так делают галереи: превью ведёт на полноразмерное фото.

<a href="img/gallery/1.jpg">
  <img src="img/gallery/small/1.jpg" alt="Гостиная в светлых тонах" width="200">
</a>

Картинка с хостинга изображений

Сервисы вроде ImgBB дают готовый код. В нём два адреса: href ведёт на страницу картинки, src — на сам файл:

<a href="https://ibb.co/xxxxxxx">
  <img src="https://i.ibb.co/xxxxxxx/photo.jpg" alt="Описание фото">
</a>

Если картинка не показывается, проверьте src: прямая ссылка на файл заканчивается на .jpg или .png.

Оформление

Чтобы под картинкой-ссылкой не было лишнего отступа и она не выходила за пределы блока:

a img {
  display: block;
  max-width: 100%;
  height: auto;
}

a:hover img {
  opacity: 0.85;
}

Курсор-рука появляется над ссылкой сам, задавать cursor: pointer не нужно.

Картинка, сквозь которую можно кликать

Если картинка лежит поверх кнопки или ссылки и перехватывает клик, отключите ей события мыши:

.overlay-image {
  pointer-events: none;
}

Клик пройдёт к элементу под картинкой.

Ссылка на разные части одной картинки

Для схем и карт есть тег <map>: он задаёт кликабельные области внутри картинки.

<img src="plan.png" alt="План офиса" usemap="#plan">
<map name="plan">
  <area shape="rect" coords="0,0,200,150" href="/kitchen" alt="Кухня">
  <area shape="circle" coords="300,100,50" href="/meeting" alt="Переговорная">
</map>

Координаты задают в пикселях исходной картинки. На адаптивных сайтах кликабельные области чаще делают в SVG со ссылками внутри.

Ссылки и картинки разбирают в бесплатном курсе «Основы веб-разработки» и на курсе «Профессиональная верстка».