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

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

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

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

• View the Code
• Open the Live Page

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

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

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

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

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

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

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