Зміст курсу
Ultimate HTML
Ultimate HTML
Робота з Клікабельними Зображеннями, Підписами та Оптимізацією
Клікабельні зображення
Клікабельні зображення — це зображення на веб-сторінці, на які можна натискати, зазвичай для переходу на іншу веб-сторінку або виконання інших дій. Зазвичай цей підхід використовується в інтернет-магазинах. Користувачі звикають натискати на зображення, щоб отримати картку з повним описом товару та ціною.
Щоб зробити зображення клікабельним, можна обгорнути тег <img>
у тег <a>
. Наприклад:
У цьому прикладі тег <a>
визначає URL-адресу для переходу в атрибуті href
, а тег <img/>
визначає зображення для відображення. Коли користувач натискає на зображення, браузер переходить за URL-адресою, вказаною в атрибуті href
.
Підпис до зображення
Ви можете використовувати елементи HTML figure
та figcaption
, щоб додати підпис до зображення на веб-сторінці. Ось приклад:
index.html
figure
: елемент містить якfigcaption
, так іimg
елементи;figcaption
: визначає текст підпису, який видно користувачам;img
: визначає зображення для відображення.
Оптимізація зображень
Це важливо для веб-сторінок, оскільки великі файли зображень можуть сповільнювати час завантаження сторінки та робити сайт менш зручним для користувачів. Дотримуючись наступних порад, можна покращити загальну продуктивність і доступність вебсайту.
- Змінюйте розмір зображень до відповідного розміру. Змінюйте розмір зображень до того, в якому вони будуть відображатися на сторінці, замість завантаження великих зображень і зміни їх розміру за допомогою HTML або CSS;
- Використовуйте відповідні формати файлів. Зазвичай JPEG використовують для фотографій, PNG — для графіки та зображень із прозорістю. Уникайте великих BMP або TIFF файлів;
- Стискайте зображення. Існує багато онлайн-інструментів, які дозволяють стискати зображення без втрати якості. Використовуйте їх перед завантаженням зображень на сайт.
Примітка
Ви можете скористатися наступними джерелами для стиснення зображень: Оптимізація растрової графіки, Оптимізація векторної графіки. У чому між ними різниця? - Розгляньте це у наступному розділі.
Дякуємо за ваш відгук!