Робота з клікабельними зображеннями, підписами та оптимізацією

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

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

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

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

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

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

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

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

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

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