Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Їх можна легко додати до HTML-документа за допомогою тега <img>.

• src: обов'язковий атрибут. Значенням є шлях до розташування зображення. Шлях може бути абсолютним або відносним;
• alt: обов'язковий атрибут. Містить альтернативний текст, який відображається, якщо зображення не може бути завантажене;
• width та height: визначають розмір зображення у пікселях. Без цих атрибутів зображення відображатиметься у своєму оригінальному розмірі.

Атрибут alt

Опис зображення має бути інформативним і змістовним. Він допомагає описати зображення для людей із вадами зору або тих, хто не може його побачити. У такому разі браузер зчитує атрибут alt, і користувач може зрозуміти, чому на сайті розміщено це зображення.

Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.

Неправильне значення для атрибута alt буде:

Гарне значення для атрибута alt буде:

Альтернативний текст "Чоловік на коні" є занадто загальним і не містить контексту. Він надає базовий опис, але не передає корисних деталей про сцену або призначення зображення.

Атрибут src

Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.

Абсолютний шлях

Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:

Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.

Будь ласка, ознайомтеся з наступним реальним прикладом у кодовому пісочниці нижче:

Примітка

Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, яка позначена трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.

Відносний шлях

Вказує розташування файлу зображення відносно поточного документа. Наприклад:

Це означає, що файл image.jpg знаходиться в директорії images.

Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images, яка містить файл sun.png.

Примітка

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