6. Зображення в HTML

Зображення в HTML. Спочатку Web був тільки текстом, що було досить одноманітно. Але на наше щастя, це було ненадовго. Зараз ми можемо вставляти зображення, а також інші види різного контенту в вебсторінки. Є ще й інші типи мультимедіа, але логічніше почати з <img> елемента. Його використовують для вставки простого зображення на вебресурс. Ця стаття дасть вам розуміння, як використовувати елемент, починаючи з базових знань, додавати примітки, використовуючи для цього <figure>, і розглянемо, як це належать до фонових зображень CSS.

Розміщення: зображення в HTML на сторінці

Що б розмістити зображення на сторінці, потрібно використовувати тег <img>. Цей елемент порожній, тому що не містить тексту і закриває тег. Він вимагає хоча б один атрибут для використання – src (вимовляється ес-ар-сі, іноді говорять його повну назва, source). Атрибут src містить шлях до зображення, яке вам необхідно вставити на сторінку, і може бути відносним або абсолютним URL, точно так же, як значення атрибута href для елемента <a>.

Наприклад, якщо ваше зображення називається dinosaur.jpg, і воно знаходиться в тій же директорії що і ваша HTML сторінка, ви можете вбудувати це зображення як:
< img src=”dinosaur.jpg”>

Якщо зображення було в піддиректорії images, що знаходиться всередині тієї ж директорії, що і HTML сторінка (що рекомендує Google для індексації та цілей SEO), тоді ви можете вбудувати його так:
< img src=”images/dinosaur.jpg”> 

І так далі.

Примітка: Пошукові системи, такі як Google, зчитують назви зображень для оптимізації пошукового запиту. Тому називайте ваші зображення смисловими іменами: dinosaur.jpg краще, ніж img835.png.

Ви можете вмонтувати зображення використовуючи абсолютний URL, наприклад:
< img src=”https: //www.example.com/images/dinosaur.jpg”>

Але це не має сенсу, тому, що він просто змушує браузер робити більше роботи, запитуючи кожного разу IP-адресу від DNS-сервера. Ви майже завжди будете тримати свої зображення для сайту на тому ж сервері, що і ваш HTML.

Увага: Більшість зображень захищені. Не ставте зображення на вашому сайті поки:

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

Порушення авторських прав є незаконним. Крім того, ніколи не вказуйте у своєму атрибуті src посилання на зображення, розміщене на чужому сайті. Це називається “хотлінкінг” (з англ. “Hotlinking” – “гаряче посилання”). Запам’ятайте, крадіжка пропускної здатності чужого сайту незаконна. Це також уповільнює вашу сторінку і не дозволяє вам контролювати, чи буде зображення видалено або замінено чимось невідповідним.

Наш код вище дасть нам наступний результат:

Примітка: Такі елементи як <img> і <video> іноді називаються заміщаються елементами. Позаяк зміст елемента і розмір, визначає зовнішній ресурс (як зображення або відео файл), а не зміст самого елемента.

Альтернативний текст

Далі розглянемо атрибут – alt. Його значенням повинне бути текстовий опис зображення для використання в ситуаціях, коли зображення не може бути переглянуто / відображено або його показ займає багато часу через повільне підключення до Інтернету. Щоб продемонструвати використання атрибута alt на практиці, внесемо зміни в код з попереднього прикладу:

<img src=”images/dinosaur.jpg” alt = “Голова і тулуб скелета динозавра;
у нього велика голова з довгими гострими зубами “>

Найпростіший спосіб побачити атрибут alt в дії – це зробити навмисну ​​помилку в імені файлу. Наприклад, якби ми написали ім’я зображення як dinosooooor.jpg, браузер не зміг би його відобразити, і на екрані з’явився б текст з  alt атрибуту:

Отже, в яких випадках текст з атрибута alt може бути нам корисний? Наведемо кілька прикладів:

• Користувачі з порушенням зору використовують пристрій читання з екрана, яке може читати вголос опис елементів вебсторінки. Наявність тексту в атрибуті alt для опису зображення може, дійсно, бути корисно для більшості користувачів.
• У разі, якщо була допущена помилка в назві файлу або шляху до нього (як було описано вище).
• Ваш браузер не підтримує формат даного зображення. Деякі браузери, такі як Lynx, відображають місце зображення – текст з атрибута alt.
• Якщо ви хочете додати навігацію, що б знайти ваше зображення за допомогою пошукових систем. Наприклад, пошукові системи можуть шукати збіги пошукових запитів з текстом атрибуту alt.
• У випадках коли, користувачі відключили відображення зображень на сторінці. Найчастіше так роблять користувачі мобільних телефонів, а також в країнах з маленькою пропускною спроможністю інтернет-каналів і з високою вартістю інтернет-трафіку.

Що ж писати в атрибут alt?

В першу чергу, це залежить від того, навіщо зображення взагалі знаходиться на сторінці. Іншими словами, що ви втратите, якщо ваше зображення не з’явиться:

• Оформлення. Ви повинні використовувати нові зображення CSS для декоративних зображень, але якщо ви повинні використовувати HTML, додайте порожній alt = “”. Якщо зображення служить просто візуальним доповненням і не є частиною вмісту, додайте порожній alt = “”. Наприклад, програма читання з екрана читає тільки інформацію, що є важливою для користувача.
• Важливий контент. Якщо ваше зображення містить важливу інформацію, передайте ту ж інформацію через короткий alt. Або навіть краще, в головному тексті, який всі побачать. Не використовуйте alt, якщо можете обійтися без нього. Наскільки незручно було б для користувача, якби параграфи були написані двічі в головному контенті? Якщо зображення адекватно описано в основному тексті, можете просто використовувати alt = “”.
• Посилання. Якщо ви ставите зображення для того, щоб зробити з нього посилання, ви все ще повинні використовувати чіткі формулювання опису посилань. У такому випадку, ви зможете використовувати елемент <a> або атрибут alt. Намагайтеся вибрати оптимальний варіант для користувачів.
• Текст. Не пишіть текст в зображеннях. Якщо вашому заголовку знадобиться тінь, то краще використовуйте для цього CSS замість додавання тексту в зображення. Але, якщо справді цього не уникнути, то вам слід доповнити текст в атрибуті alt.
  

  Ширина і висота

Щоб вказати ширину і висоту вашого зображення, необхідно використовувати атрибути width і height. Ширину і висоту вашого зображення можете налаштувати різними способами. Наприклад, на Mac можна використовувати Cmd + I, щоб отримати інформацію по зображенню. Повторюючи приклад вище, ми можемо зробити так:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

Зазвичай це не призводить до великої різниці в відображенні. Але якщо зображення не буде показано, наприклад, коли користувач щойно перейшов на сторінку, а воно ще не встигло завантажитися, ви вкажіть браузеру залишити місце для відтворення зображення:

Це хороший варіант, в результаті сторінка завантажиться швидше і більш гладко.

Однак, ви не повинні змінювати розміри ваших зображень використовуючи HTML атрибути. Якщо ви встановите розмір зображення занадто великим, то зображення буде виглядати зернистим, розмитим або занадто маленьким, і витратите трафік для завантаження зображення. Кінцеве зображення може також виглядати спотвореним, якщо ви не збережете правильне співвідношення сторін. Рекомендується використовувати графічний редактор для підгонки зображення до потрібного розміру, перш ніж вставити його на ваш вебресурс.

Примітка: Якщо вам дійсно потрібно змінити розмір зображення, ви повинні використовувати замість цього CSS.

Зображення в HTML: заголовок

Як і для посилань, ви також можете додати атрибут title для зображень, щоб при необхідності надати додаткову інформацію. У нашому прикладі ми могли б зробити це так:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

Це дає нам підказку при наведенні курсору миші, так само як і та в посиланнях:

Перевірити знання, на тему зображення в HTML, ви можете пройшовши тест зверху. Якщо хочете дізнатися більше про створення сайтів запрошуємо на курс програмування HTML \ CSS. Ми знаходимося на м. Академмістечко, м. Житомирська, також у нас є онлайн формат навчання.