Атрибути тегів HTML IMG

Використання тегу HTML IMG для зображень та об'єктів

Тег HTML IMG керує вставкою зображень та інших статичних графічних об'єктів у веб-сторінку. Цей загальний тег підтримує кілька обов'язкових та необов’язкових атрибутів, які додають багатства вашій здатності створювати захоплюючий веб-сайт, орієнтований на зображення.

Приклад повністю сформованого тегу HTML IMG виглядає так:


Необхідні атрибути тегів IMG

SRC.

Єдиний атрибут, який потрібно отримати для відображення зображення на веб-сторінці - це атрибут SRC. Цей атрибут ідентифікує ім'я та місцезнаходження файла зображення, який повинен відображатися.

ALT.

Для запису дійсних XHTML та HTML4 також необхідний атрибут ALT. Цей атрибут використовується для надання невізуальним браузерам тексту, який описує зображення. Браузери відображають альтернативний текст різними способами. Деякі відображають його як спливаюче вікно, коли ви кладете мишу на зображення, інші відображають його у властивостях при натисканні правою кнопкою миші на зображення, а деякі взагалі не відображають його.

Використовуйте текст alt, щоб надати додаткові відомості про зображення, невідповідні або важливі для тексту веб-сторінки. Але пам’ятайте, що у читачах екранів та інших веб-переглядачах лише текст читатиметься в рядку з рештою тексту на сторінці. Щоб уникнути плутанини, використовуйте описовий текст alt, який пише (наприклад) "Про веб-дизайн та HTML", а не лише "логотип".

У HTML5 атрибут ALT не завжди потрібен, оскільки ви можете використовувати підпис, щоб додати до нього більше опису. Ви також можете використовувати цей атрибут, щоб вказати ідентифікатор, який містить повний опис:

АРІЯ-ОПИСАНО

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

Рекомендовані атрибути IMG

ШІРНА і ВИСОКА Ви повинні звикнути завжди використовувати атрибути WIDTH і HEIGHT. І ви завжди повинні використовувати реальний розмір і не змінювати розмір своїх зображень за допомогою браузера.

Ці атрибути прискорюють візуалізацію сторінки, оскільки браузер може виділити простір для зображення, а потім продовжувати завантажувати решту вмісту, а не чекати завантаження всього зображення.

Інші корисні атрибути IMG

TITLETАтрибут - це глобальний атрибут, який можна застосувати до будь-якого елемента HTML. Крім того, атрибут TITLE дозволяє додавати додаткову інформацію про зображення.

Більшість браузерів підтримує атрибут TITLE, але вони роблять це по-різному. Деякі відображають текст як спливаюче вікно, а інші відображають його на інформаційних екранах, коли користувач правою кнопкою миші натискає на зображення. Ви можете використовувати атрибут TITLE для написання додаткової інформації про зображення, але не розраховуйте на те, що ця інформація є ні прихованою, ні видимою. Ви, звичайно, не повинні використовувати це для приховування ключових слів для пошукових систем. Зараз ця практика карається більшості пошукових систем.

USEMAP і ISMAP Ці два атрибути встановлюють карти зображень на стороні клієнта () та сервера (ISMAP) для ваших зображень. LONGDESCАтрибут LONGDESC підтримує URL-адреси для більш тривалого опису зображення. Ця функція робить ваші зображення більш доступними.

Застарілі та застарілі атрибути IMG

Зараз декілька атрибутів застаріли в HTML5 або застаріли в HTML4. Для кращого HTML, ви повинні знайти інші рішення замість цих атрибутів.

БОРДА Атрибут визначає ширину в пікселях будь-якої межі навколо зображення. Вона застаріла на користь CSS в HTML4 і застаріла в HTML5. ALIGN Цей атрибут дозволяє розмістити зображення всередині тексту та навести текст навколо нього. Ви можете вирівняти зображення праворуч або ліворуч. Він застарілий на користь float CSS-властивості у HTML4 та застарілий у HTML5. HSPACE і VSPACET Атрибути HSPACE і VSPACE додають простір білого кольору горизонтально (HSPACE) і вертикально (VSPACE). Білий пробіл буде додано в обидві сторони графіки (вгорі і внизу або вліво і вправо), тому якщо вам потрібен пробіл лише на одній стороні, слід використовувати CSS. Ці атрибути застаріли в HTML4 на користь властивості маржі CSS, і вони застаріли в HTML5. LOWSRC Атрибут LOWSRC надає альтернативне зображення, коли джерело зображення настільки велике, що воно завантажується надзвичайно повільно. Наприклад, у вас може бути зображення розміром 500 Кб, яке ви хочете відобразити на своїй веб-сторінці, але завантаження в 500 КБ потребує тривалого часу. Таким чином, ви створюєте набагато меншу копію зображення, можливо, чорно-білу або просто надзвичайно оптимізовану, і поміщаєте це в LOWSRCattribute. Менше зображення завантажуватиметься та відображатиметься спочатку, а потім, коли з’явиться більше зображення, воно замінить малопоточне.

Атрибут LOWSRC додано до Netscape Navigator 2.0 до тегу IMG. Він був частиною рівня DOM 1, але потім був видалений з рівня DOM 2. Підтримка браузера була схематичною для цього атрибуту, хоча багато сайтів стверджують, що його підтримують усі сучасні браузери. Він не застарілий у HTML4 або застарілий у HTML5, оскільки він ніколи не був офіційною частиною жодної специфікації.

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