HTML. Вбудовування зображень. Що тестувати?

Без зображення нікуди!

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

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

Отже, для вставки графічного зображення в HTML використовується тег <img>. У цього тега є два обов'язкових атрибути:

• srс – дозволяє вказати шлях до файлу;
• alt – використовується як альтернативний текст замість зображення в тому випадку, якщо воно не завантажилось.

Синтаксис написання:

<Img src = "ім'я зображення.jpg" alt = "альтернативний текст">

Якщо зображення знаходиться не в кореневій папці проекту, а взяте з іншого веб-ресурсу, зображення з тега може бути посиланням і тег <img> обгорнутий в тег <a>. 

Синтаксис такий:

<a href="page.html"> <img src = "URL картинки" alt = "coming soon"> </a>

Альтернативний текст інформативних зображень повинен нести той же сенс, що і зображення.

Як тестувати?

Якщо зображення не відображається на веб-сторінці і немає ніякого альтернативного тексту, потрібно перевірити картинку за допомогою інструменту розробника. Необхідно відкрити DevTools (клавіша F12 для браузера Chrome), натиснути в інспекторі на іконку і вибрати потрібний елемент. В атрибуті може відображатися порожнє значення alt = "", яке означає, що дана картинка служить тільки прикрасою для сайту і не несе ніякої інформації для користувача.

Якщо на сайті присутнє подібне відображення картинки, сміливо можна заводити баг, оскільки найвірогідніша причина – неправильно прописаний шлях:

Атрибут align тега <img> є одним із способів вирівнювання зображень. Положення зображень може бути вирівняно щодо тексту або інших зображень на веб-сторінці. Є і мінус цього атрибута – він не підтримується в HTML5, краще використовувати CSS замість нього.

Наприклад, використовуючи атрибути margin, line-height та ін. в CSS, можна поекспериментувати з пікселями, якщо візуально, іконки не вирівняні між собою.

Розміри зображення

Без встановлених розмірів зображення відображається на сторінці в початковому форматі. Змінювати розміри зображення можна за допомогою атрибутів height і width в розмітці HTML і XHTML, або в каскадних таблицях стилів CSS. Якщо в процесі зміни розмірів буде поставлено тільки один з атрибутів, то другий буде автоматично підібраний для збереження пропорцій зображення.

Формати графічних файлів

Розглянемо, які формати існують і які з них для чого краще підходять:

• JPEG – підходить для фотографій;
• GIF – ідеальний для стиснення зображень;
• PNG – об'єднав в собі кращі якості GIF- і JPEG-форматів;
• APNG – заснований на форматі PNG, підтримує прозорість і зберігає анімацію;
• SVG – малюнок складається з певного набору геометричних фігур, описаних у форматі XML. Зображення в даному форматі можуть змінюватися в розмірі без втрати якості;
• BMP – оригінальне растрове зображення, шаблоном якого є прямокутна сітка пікселів;
• ICO – формат зберігання значків файлів в Microsoft Windows. Ознайомитися з зображеннями ікон можна за посиланням.

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

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