Зображення Спеціального Призначення

Зображення, на які можна натиснути

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

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

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

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

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

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

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

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

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

Примітка

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