Якщо ми лише вставляємо текст на наші веб-сторінки, вони будуть дуже простими та не дуже зрозумілими. Ось чому в HTML ми маємо можливість вставляти зображення.

таким чином

Зображення можуть бути репрезентативними елементами веб-сторінки або декоративними елементами. Хоча, якщо ми є декоративними елементами, ми повинні використовувати CSS, щоб вставити їх на нашу веб-сторінку.

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

Вставити зображення: елемент img

Для вставки зображення в HTML ми маємо елемент img, основним синтаксисом якого є:

Як бачимо, елемент img - це простий елемент, тому він не має закриваючого елемента і закінчується зворотною рискою рискою.

Основним атрибутом елемента img є src - вказує шлях до зображення, яке ми хочемо завантажити. Таким чином, якщо зображення знаходиться на тому ж шляху, що і наш веб-сайт, ми розмістимо:

Зображення може навіть знаходитись на іншому сервері. У цьому випадку URL-адреса, що містить зображення, повинна вказувати протокол та сервер, на якому розміщено зображення. Наприклад, ми можемо мати такий код:

Розміри зображення: ширина та висота

Якщо ми не вкажемо більше про елемент img, зображення, яке ми передали в його поле src, буде завантажено з початковим розміром.

Хоча ми маємо атрибути width для ширини зображення та висоти для висоти зображення. Таким чином, якщо ми хочемо, щоб наше зображення бачилось у 100x100 пікселів, ми можемо вставити такий код:

Розмір зображення можна вказати в пікселях або у відсотках. У випадку опускання одиниці використовується піксель.

З міркувань продуктивності при завантаженні полотен завжди добре вказувати їх значення ширини та висоти.

Текст зображення зображення: атрибут alt і longdesc

На зображенні ми можемо вказати його альтернативний або описовий текст. Для цього ми маємо атрибут alt.

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

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

Типи форматів зображень

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

Найбільш прийнятні формати зображень: