Тег <img>

Тег <img> (укр. – “зображення”) використовується для вбудовування зображень на веб-сторінку. Це рядковий самозакриваючий тег, який не має закриваючого тегу. Він підтримує різні формати зображень, серед яких:

  • JPEG (jpg) — формат із стисненням, що підходить для фотографій та зображень з великою кількістю кольорів. Не підтримує прозорість;
  • PNG — формат із підтримкою прозорості, добре підходить для зображень з текстом, логотипів або графіки;
  • GIF — використовується для анімацій та зображень із обмеженою палітрою кольорів. Підтримує прозорість;
  • SVG — векторний формат, який добре масштабується без втрати якості. Підходить для іконок та графічних елементів;
  • WebP — сучасний формат із високим рівнем стиснення, що підтримує як прозорість, так і анімацію, забезпечуючи менший розмір файлів порівняно з JPEG та PNG.

Кожен із цих форматів має свої переваги, і вибір залежить від потреб у якості, прозорості та розмірі файлу.

Атрибути

Специфічні атрибути

  • src — обов’язковий атрибут, який вказує шлях до файлу зображення (URL);
  • alt — обов’язковий атрибут для доступності, що задає текстовий опис зображення. Він використовується, коли зображення не може бути завантажене, або для користувачів, які використовують екранні рідери. Наприклад:
<img src="image.jpg" alt="Опис зображення">
  • width та height — ці атрибути дозволяють вказати розмір зображення в пікселях. Використання цих атрибутів допомагає браузеру зарезервувати місце під зображення до його завантаження, що покращує стабільність макету сторінки. Наприклад:
<img src="image.jpg" alt="Опис зображення" width="500" height="300">
  • srcset та sizes — атрибути, які використовуються для адаптивних зображень, що дозволяє браузеру завантажувати найбільш підходящий варіант зображення в залежності від розміру екрану користувача;
  • crossorigin та referrerpolicy — атрибути, які використовуються для керування безпекою та обробкою запитів з інших доменів (CORS).

Глобальні атрибути

Найпопулярніші глобальні атрибути, які використовуються на зображеннях:

  • id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
  • class — клас, який допомагає стилізувати або групувати елементи;
  • style — атрибут для інлайн-стилізації конкретного елементу;
  • title — атрибут, який використовується для додавання підказки, яка з’являється при наведенні курсору на елемент;
  • lang — визначає мову атрибутів alt або title;
  • dir — вказує напрямок тексту в атрибутах alt або title (наприклад, зліва направо або справа наліво).

Приклад використання

<img
  src="example.jpg"
  alt="Приклад зображення із описом для доступності"
  class="responsive-img"
  title="Наведіть для отримання додаткової інформації"
  lang="uk"
  dir="ltr"
  srcset="example-small.jpg 500w, example-large.jpg 1000w"
  sizes="(max-width: 600px) 100vw, 50vw"
/>

Додаткові моменти

  • Текст в атрибуті alt є важливим для доступності, оскільки допомагає людям з вадами зору зрозуміти зміст зображення;
  • Використовуйте атрибути width та height для кращої продуктивності сторінки, зокрема для уникнення зміщення елементів при завантаженні;
  • Якщо розмір оригіналього зображення не співпадає з його розмірами на веб-сторінці, то для збереження пропорцій зображення використовуйте CSS, а не атрибути width і height, щоб не спотворювати зображення.