Клікабельні зображення

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

Щоб зробити зображення клікабельним, можна обгорнути тег <img> у тег <a>. Наприклад:

У цьому прикладі тег <a> визначає URL-адресу для переходу в атрибуті href, а тег <img/> визначає зображення для відображення. Коли користувач натискає на зображення, браузер переходить за URL-адресою, вказаною в атрибуті href.

Підпис до зображення

Ви можете використовувати елементи HTML figure та figcaption, щоб додати підпис до зображення на веб-сторінці. Ось приклад:

• figure: елемент містить як figcaption, так і img елементи;
• figcaption: визначає текст підпису, який видно користувачам;
• img: визначає зображення для відображення.

Оптимізація зображень

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

• Змінюйте розмір зображень до відповідного розміру. Змінюйте розмір зображень до того, в якому вони будуть відображатися на сторінці, замість завантаження великих зображень і зміни їх розміру за допомогою HTML або CSS;
• Використовуйте відповідні формати файлів. Зазвичай JPEG використовують для фотографій, PNG — для графіки та зображень із прозорістю. Уникайте великих BMP або TIFF файлів;
• Стискайте зображення. Існує багато онлайн-інструментів, які дозволяють стискати зображення без втрати якості. Використовуйте їх перед завантаженням зображень на сайт.

Примітка

Ви можете скористатися наступними джерелами для стиснення зображень: Оптимізація растрової графіки, Оптимізація векторної графіки. У чому між ними різниця? - Розгляньте це у наступному розділі.