Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить елемент <img> в HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<img>`** - це HTML-елемент, який використовується для вставки зображення на веб-сторінку; він не має закривного тега і підключає картинку за посиланням з інтернету або з файлів сайту. **Ключове:** обов'язкові атрибути - `src` (шлях до зображення) і `alt` (альтернативний текст на випадок, якщо зображення не завантажиться).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<img>` використовується для **вставки зображення** на веб-сторінку. Він не має закривного тега і підключає картинку за посиланням з інтернету або з файлів сайту. --- ### 1. Найпростіший приклад ```html <img src="cat.jpg" alt="Кіт на підвіконні"> ``` Що тут відбувається: - `src` - шлях до файлу зображення (від англ. source, «джерело»); - `alt` - альтернативний текст, який показується, якщо картинка не завантажилася (або читається екранним диктором). Браузер завантажить і покаже файл `cat.jpg` прямо на сторінці. --- ### 2. Основні атрибути `<img>` | Атрибут | Призначення | Приклад | |---|---|---| | `src` | Шлях до зображення (обов'язковий) | `src="images/photo.png"` | | `alt` | Текст-опис, якщо зображення не відображається | `alt="Фото профілю"` | | `width` | Ширина зображення (у пікселях або %) | `width="200"` | | `height` | Висота зображення | `height="150"` | | `title` | Спливаюча підказка при наведенні | `title="Клацніть для збільшення"` | | `loading` | Оптимізація завантаження (`lazy`, `eager`) | `loading="lazy"` | --- ### 3. Шляхи до зображення #### Відносний шлях (якщо файл у папці проєкту): ```html <img src="img/pic.jpg" alt="Фото"> ``` #### Абсолютний шлях (якщо картинка з іншого сайту): ```html <img src="https://example.com/image.jpg" alt="Фото"> ``` --- ### 4. Приклад з розмірами та описом ```html <img src="mountains.jpg" alt="Гори на світанку" width="400" height="250"> ``` Зображення буде відображатися із зазначеними розмірами (400×250 пікселів). --- ### 5. Атрибут `alt`: навіщо він важливий - відображається, якщо картинка не завантажилася; - використовується пошуковими системами (SEO); - допомагає людям з порушеннями зору (екранні диктори читають `alt`). Приклад: ```html <img src="avatar.png" alt="Фотографія користувача"> ``` Якщо файл не знайдено, браузер покаже: ```javascript Фотографія користувача ``` --- ### 6. Атрибут `loading="lazy"` Сучасні браузери можуть **відкладати завантаження зображень**, які ще не видно на екрані: ```html <img src="big-photo.jpg" alt="Пейзаж" loading="lazy"> ``` Це пришвидшує завантаження сторінки. --- ### 7. Приклад із зовнішнім посиланням ```html <a href="https://example.com"> <img src="logo.png" alt="Логотип компанії"> </a> ``` Зображення стає **клікабельним посиланням**. --- ### Підсумок: | Властивість | Опис | |---|---| | Тег | `<img>` (непарний) | | Призначення | Вставка зображення | | Обов'язкові атрибути | `src`, `alt` | | Часто використовувані | `width`, `height`, `title`, `loading` | | Особливості | Не містить тексту, не має закривного тега | --- **Простими словами:** `<img>` - це **«вікно» для картинки** на сайті. `src` каже, *де лежить зображення*, а `alt` - *що там має бути, якщо воно не завантажиться*.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.