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