<img>

Тег <img> призначений для відображення зображення на Web-сторінці (формати зображень gif, jpeg, png та інші).

Візуальний приклад використання тегу img

Тег <img> має два обов'язкові атрибути атрибути:

  • src використовується для завантаження зображення, а саме вказує шлях до зображення від файлу HTML.
  • altзадає альтернативний текст для випадку, коли картинка не завантажилась або у клієнта є обмеження на обсяг завантаженн.

Зображення також можуть застосовуватися в якості карт-зображень, коли картинка містить активні області, що виступають в якості посилань. Така карта на вигляд нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбита на невидимі зони різної форми, де кожна з областей служить посиланням.

Порада:

По можливості вказуйте атрибути width і height - це дозволяє браузеру заздалегідь зарезервувати місце в макеті сторінки і браузер не буде сам остійно розраховувати розмір картинки, що позитивно позначається на швидкості завантаження сторінки. Вказавши ці атрибути, ви убезпечете свою сторінку від різких змін її макету (Коли зображення не завантажено місце в макеті для нього не зарезервоване, тому, що браузер не знає яку площу для нього потрібно зарезервувати, а як тільки зображення завантажене і браузер розрахував його розмір - зображення відразу з'являється на сторінці, зсовуючи всі елементи).

Порада:

Не змінюйте розмір картинки атрибутами width і height - це спотворює зображення і не впливає на його вагу, використовуйте для таких цілей спеціальні редактори чи змінюйте розмір картинки на стороні сервера.

Порада:

Щоб зробити картинку посиланням на інший документ, просто вставте тег <img> в тег <a>.

Синтакс

<img src="URL" alt="альтернативний текст">

Приклади


Приклад завантаження зображень за допомогою тега <img>

До попереднього тегу До наступного тегу