У будь-якому дизайні сайту використовуються картинки. Але мало хто замислюється над питанням а коли саме при верстці макету варто застосовувати html тег img, а коли css властивість background-image? Чи є між ними взагалі відмінність? Насправді є і досить істотне. Про це і піде мова в даній статті.
Головна відмінність img і background-image
Коли ми згадуємо основне призначення html і css воно для нас стає очевидним, але чомусь поки над цим не замислюєшся помітити його стає не так вже й просто.
У чому переваги даного підходу?
Нюанси з практики
- При друку сторінки сайту теги img друкуються, а background-и немає.
- Все, що бажано до індексації пошуковими системами виводимо картинками, все що хочемо скрить- фонами.
- Браузери розроблені для людей з обмеженими можливостями читають альти картинок, тому якщо зображення несе важливий сенс, воно обов'язково повинно бути оформлено html тегом.
- Деякі старі браузери не підтримують властивість background-size і для створення масштабується фону в них використовується тег, а не властивість фону.
- Img з анімацією менше навантажує браузери.
- Для заміни тексту зображенням краще використовувати background-image (наприклад, якщо потрібно вивести заголовки красивими картинками).
- Використовуючи властивість фону ми можемо вивести на сторінці тільки частина зображення.
- Випливає з попереднього пункту фішка- background-image дає можливість використовувати метод спрайтів (за рахунок того, що всі іконки завантажуються з 1 картинки зменшується кількість звернень до сервера при завантаженні сторінки, що позитивно позначається на швидкості) для прискорення завантаження сайту.
- Картинку заховану в фон сайту складніше викачати. Хоча як на мене для захисту своїх унікальних зображень краще використовувати свої підписи на них, це хоч змусить плагіатщіков повозитися з приведенням її у порядок або ж використовувати інші способи захисту унікального контенту від копіювання.
Підбиваючи підсумки
Нічого складного в розмежуванні методів виведення зображень немає. З практикою все стає на свої місця і навіть інтуїтивно зрозуміло, головне пам'ятати, що все пов'язане з оформленням сайту повинне існувати в css, а все пов'язане з його структурою та змістовим наповненням в html.
Оцінок: 5 (середня 5 з 5)