Коли використовувати фоновий образ IMG проти CSS?

У яких ситуаціях доцільніше використовувати IMGтег HTML для відображення зображення, на відміну від CSS background-image, і навпаки?

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

Правильне використання IMG

1. Використовуйте, IMGякщо ви плануєте, щоб люди друкували вашу сторінку, і ви хочете, щоб зображення було включене за замовчуванням. - JayTee
2. Використовуйте IMG(з altтекстом), коли зображення має важливе смислове значення, наприклад, значок попередження . Це гарантує можливість передачі значення зображення в усіх користувальницьких агентах, включаючи зчитувачі екрану.

Прагматичне використання IMG

1. Використовуйте IMGатрибут plus alt, якщо зображення є частиною вмісту, таким як логотип або діаграма або особа (реальна особа, а не люди з фотографії) - санхотефат
2. Використовуйте, IMGякщо ви покладаєтесь на масштабування браузера, щоб візуалізувати зображення пропорційно розміру тексту.
3. Використовувати IMG для декількох зображень накладання в IE6 .
4. Використовуйте IMGклавішу a z-index, щоб розтягнути фонове зображення, щоб заповнити все його вікно.
   Зауважте, що це вже не вірно з розміром фону CSS3; див. № 6 нижче.
5. Використання imgзамість background-imageможе значно покращити продуктивність анімації на тлі.

Коли використовувати фонове зображення CSS

1. Використовуйте фонові зображення CSS, якщо зображення не є частиною вмісту . - санхотефат
2. Використовуйте фонові зображення CSS, виконуючи заміну тексту, наприклад. пункти / заголовки. - санхотефат
3. Використовуйте, background-imageякщо ви плануєте, щоб люди друкували вашу сторінку, і ви не хочете, щоб зображення було включене за замовчуванням. - JayTee
4. Використовуйте, background-imageякщо вам потрібно покращити час завантаження, як у спрайтах CSS .
5. Використовуйте, background-imageякщо вам потрібна видимість лише частини зображення, як у спрайтах CSS.
6. Використовуйте background-imageз background-size:coverтим щоб розтягнути фонове зображення , щоб заповнити всі його вікно.

Для мене це чорно-біле рішення. Якщо зображення є частиною вмісту, таким як логотип або діаграма або особа (реальна особа, а не люди з фотографій), то використовуйте <img />атрибут тега плюс alt. Для всього іншого є фонові зображення CSS.

Інший час використовувати фонові зображення CSS - це коли ви робите заміну тексту, наприклад. пункти / заголовки.

Я здивований, що про це ще ніхто не згадував: переходи CSS .

Ви можете переключити divфонове зображення на перший план:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Це економить будь JavaScript або JQuery анімації вицвітає <img/>«S src.

Більше інформації про переходи на MDN .

Наведені вище відповіді розглядають лише аспект дизайну. Я перелічую його в аспектах SEO.

Коли використовувати <img />

1. Коли Ваше зображення потрібно проіндексувати пошуковою системою
2. Якщо він має відношення до змісту, не до дизайну.
3. Якщо ваше зображення не надто мало (не знакових зображень).
4. Зображення, де можна додавати altта titleатрибутувати.
5. Зображення з веб-сторінки, яку ви хочете надрукувати за допомогою css-носія для друку

Коли використовувати CSS background-image

1. Зображення, чисто використані для проектування.
2. Немає стосунків із вмістом.
3. Невеликі зображення, які ми можемо грати з CSS3.
4. Повторювані зображення (у піктограмі автора блогу піктограма дати повторюватиметься для кожної статті тощо).

Оскільки я буду використовувати їх, виходячи з цих причин. Це хороші практики оптимізації зображень пошукових систем.

Браузери не завжди налаштовані для друку фонових зображень за замовчуванням; якщо ви маєте намір друкувати вашу сторінку :)

Якщо у вас є CSS у зовнішньому файлі, то часто зручно відображати зображення, яке часто використовується на сайті (наприклад, зображення заголовка) як фонове зображення, оскільки тоді ви маєте можливість змінити зображення згодом.

Наприклад, скажімо, у вас є такий HTML:

<div id="headerImage"></div>

... і CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Через кілька днів ви змінюєте розташування зображення. Все, що вам потрібно зробити - оновити CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

В іншому випадку вам доведеться оновити srcатрибут відповідного <img>тегу у кожному HTML-файлі (якщо припустити, що ви не використовуєте серверну мову сценарію або CMS для автоматизації процесу).

Також фонові зображення корисні, якщо ви не хочете, щоб користувач міг зберегти зображення (хоча мені цього ніколи не потрібно було робити).

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

Деякі відповіді тут ускладнюють сценарій. Це мертва проста ситуація.

Просто відповідайте на це питання кожного разу, коли ви хочете розмістити зображення:

Це частина змісту чи частина дизайну?

Якщо ви не можете відповісти на це, ви, мабуть, не знаєте, що ви робите чи що хочете робити!

Крім того, НЕ розглядайте поряд з двома методиками, лише тому, що ви хочете бути "дружніми до друку" чи ні. Також НЕ ховайте вміст з точки зору SEO за допомогою CSS. Якщо ви виявите, що керуєте своїм вмістом у файлах CSS, ви застрелилися в ногу. Це лише тривіальне рішення того, що є змістом чи ні. Будь-який інший аспект слід ігнорувати.

Я б додав ще два аргументи:

• Тег img добре, якщо вам потрібно змінити розмір зображення. Наприклад, якщо вихідне зображення становить 100 пікселів на 100 пікселів, і ви хочете, щоб воно було 80 пікселів на 80 пікселів, ви можете встановити ширину CSS та висоту тегу img. Я не знаю жодного хорошого способу зробити це за допомогою фонового зображення. РЕДАКТУВАННЯ: Тепер це також можна зробити з фоновим зображенням, використовуючи background-sizeатрибут CSS3.

• Використання фонового зображення добре, коли вам потрібно динамічно переключатися між спрайтами . Наприклад, якщо у вас є зображення кнопки, і ви хочете, щоб окреме зображення відображалося, коли курсор наводить на елемент, ви можете використовувати фонове зображення, що містить як нормальний, так і курсор, і динамічно змінювати позицію фону.

Ще одна користь від використання тегу <IMG> пов'язана з SEO - тобто ви можете надати додаткову інформацію про зображення в атрибуті ALT тегу зображення, тоді як немає можливості надати таку інформацію при вказівці зображення через CSS і в цьому У випадку пошукових систем може індексуватися лише ім'я файлу зображення. Атрибут ALT безумовно дає перевагу тегу <IMG> SEO SEO перед CSS-підходом. Тому, на мій погляд, краще вказати зображення, які ви хочете добре класифікувати в результатах пошуку зображень (наприклад, пошук зображень Google) за допомогою тегу <IMG>.

Передній план = img

Фон = CSS фон.

Використовуйте фонові зображення лише в разі необхідності, наприклад, контейнери із зображеннями, які плитки.

Однією з головних PROS за допомогою IMAGES є те, що це краще для SEO .

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

Великою проблемою <img />є накладки. Що робити, якщо я хочу внутрішню тінь CSS на своєму зображенні ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? У цьому випадку, оскільки <img />не може бути дочірніх елементів, потрібно використовувати позиціонування та додати порожні елементи, що прирівнюється до марної розмітки.

На закінчення, це досить ситуативно.

Кілька інших сценаріїв, де background-imageслід використовувати:

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

Використовуйте CSS-фонове зображення у випадку декількох скінів або версій дизайну. Javascript можна використовувати для динамічної зміни класу елемента, що змусить його надати інше зображення. З тегом IMG це може бути складніше.

Ось технічний розгляд: чи буде генеруватися зображення динамічно? Згенерувати <img>тег у HTML, як правило, набагато простіше, ніж намагатися динамічно редагувати властивість CSS.

А як щодо розміру зображення? Якщо я використовую тег img, браузер масштабує зображення. Якщо я використовую css фон, браузер просто вирізає шматок із більшого зображення.

Що стосується анімації зображень за допомогою CSS TranslateX / Y (правильний спосіб анімувати html) - якщо ви робите запис хронової шкали Chrome на фонових зображеннях CSS, які анімовані, а також теги IMG, що анімуються, ви побачите, що час фарби різко скорочується для CSS фонові зображення.

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

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

img - це тег HTML з причини, тому його слід використовувати. Для посилання або для ілюстрації речей люди, наприклад: у статтях.

Крім того, якщо зображення має сенс або повинен бути інтерактивними IMG краще , ніж CSS фон . Для всіх інших ситуацій, я думаю, можна використовувати css фон .

Хоча, це тема, яку потрібно обговорювати знову і знову.

Студентка з Парижу, Франція

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

Використання фонового зображення (наскільки я знаю у більшості браузерів) відключить можливість збереження зображення безпосередньо.

Невеликий ввід, у мене виникли проблеми з чуйними зображеннями, що сповільнюють візуалізацію на iphone до хвилини, навіть із невеликими зображеннями:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Але при переході на використання фонових зображень проблема усунулася, це є життєздатним лише у випадку націлення на нові браузери.

IMGзавантажте спочатку, тому що srcзнаходиться у самому html-файлі, тоді як у випадку background-imageджерела згадується у таблиці стилів, тому зображення завантажується після завантаження таблиці стилів, затримуючи завантаження веб-сторінки.

HTML призначений для вмісту, а CSS - для дизайну. Чи потрібне зображення і чи потрібно його підбирати читачам екрану? Якщо відповідь "так", тоді покладіть зображення в HTML. Якщо це виключно для стилізації, то ви можете використовувати властивість background-image у CSS для введення зображення. Як вже багато людей тут уже згадували, ви можете використовувати псевдоелемент на зображенні, якщо вам подобається.

Також зауважте, що більшість павуків пошукової системи не індексують фонові зображення CSS, тому фонові зображення будуть ігноровані, і ви не зможете отримати трафік від пошукових систем (жодна користь для SEO).

Якщо всі зображення, визначені тегами, індексуються (якщо виключено вручну) і можуть залучати трафік від пошукових систем, якщо їх атрибути та назви alt та назви файлів оптимізовані належним чином (wrt деяке ключове слово).

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

Я використовую зображення замість фонового зображення, коли хочу зробити їх на 100% розтяжними, що підтримується в більшості браузерів.

Якщо ви хочете додати зображення лише до спеціального вмісту на сторінці або лише для однієї сторінки, вам слід використовувати тег IMG, а якщо ви хочете розмістити зображення на кількох сторінках, тоді вам слід використовувати фонове зображення CSS.

Ще одне фонове зображення PRO: Фонове зображення для <ul>/<ol> списків.

Використовуйте фонові зображення, якщо вони є частиною загального дизайну і повторюються на кількох сторінках. Переважно у фоновій формі спрайту для оптимізації.

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

** Єдине повторне зображення, яке я вкладаю в <img>тег, - це логотип сайту / компанії. Оскільки люди, як правило, натискають на нього, щоб перейти на головну сторінку, таким чином ви загортаєте її <a>тегом.