Вставка зображень

1.1 Елемент <img>

Мультимедіа в HTML грає важливу роль у покращенні візуального сприйняття веб-сторінок. Вставка зображень є одним із ключових аспектів мультимедіа в HTML. Найчастіше для цього використовується елемент <img>. Розглянемо його детальніше:

Елемент <img> призначений для вставки зображень на веб-сторінку. Це порожній елемент: у нього немає закриваючого тегу, і він містить тільки атрибути.

Синтаксис

    <img src="URL_зображення" alt="Опис" width="Ширина" height="Висота">
  

    
      <img src="images/photo.jpg" alt="Опис зображення" width="500" height="300">
    
  

Давайте розглянемо атрибути елемента <img> трохи детальніше

1.2 Атрибут src

Повна назва атрибута src — це source (джерело).

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

Приклади:

Абсолютний URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

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

    
      <img src="images/photo.jpg">
    
  

Абсолютний URL містить повну адресу до зображення, включаючи протокол (http або https), домен і шлях. Відносний шлях вказує місцезнаходження файлу відносно поточного документа, що зручно при роботі з локальними файлами.

1.3 Атрибут alt

Повна назва: alternative text (альтернативний текст)

Атрибут alt надає текстовий опис зображення. Цей текст відображається, якщо зображення не може бути завантажене, і використовується для покращення доступності, оскільки програми екранного читання використовують його для опису зображення користувачам із вадами зору.

Приклади:

    
      <img src="images/sunset.jpg" alt="Фотографія гарного заходу сонця">
    
  

Добре складений альтернативний текст допомагає користувачам зрозуміти зміст зображення, якщо воно недоступне, і сприяє покращенню SEO (пошукової оптимізації) сторінки.

1.4. Атрибут width

Атрибут width задає ширину зображення в пікселях. Якщо атрибут height не вказаний, зображення зберігає свої пропорції при зміні ширини.

Приклади:

    
      <img src="images/photo.jpg" width="500">
    
  

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

1.5 Атрибут height

Атрибут height задає висоту зображення в пікселях. Якщо атрибут width не вказаний, зображення зберігає свої пропорції при зміні висоти.

Приклади:

    
      <img src="images/photo.jpg" height="300">
    
  

Аналогічно атрибуту width, використання фіксованої висоти може бути корисним, але необхідно враховувати адаптивність.

Приклад використання атрибутів разом

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Фотографія гарного заходу сонця" width="500" height="300">
    
  

У цьому прикладі зображення буде завантажено з файлу images/sunset.jpg, відображатися з шириною 500 пікселів і висотою 300 пікселів, а у разі, якщо зображення не завантажиться, буде показаний текст "Фотографія гарного заходу сонця".