Разница между HTML-тегом img и фоновым изображением CSS
Разница между HTML-тегом img и фоновым изображением CSSАвтор: Милинд Ахуджа | 27 ноября 2017 г.
HTML5
В этом блоге я собираюсь показать вам разницу между HTML-тегом img и фоновым изображением CSS, чтобы вам было проще решить, что и когда использовать.
1. CONTENT :
Используйте тег , если он связан с контентом, а не просто используется как элемент дизайна, в то время как фоновое изображение не имеет ничего общего с контентом и является чисто дизайном элемент.
2. ДОСТУПНОСТЬ:
Если есть требование индексации поисковой системой. Google не индексирует фоновые изображения автоматически.
Например, вы можете добавить замещающий текст и атрибут заголовка, которые будут распознаваться программами чтения с экрана. Это также важно для индексации поисковыми системами.
Так что, если вы хотите, чтобы всем был нужен доступ к изображению, и чтобы оно индексировалось поисковой системой, используйте тег
Кроме того, встроенные изображения можно использовать для использования таких инструментов, как заполнение изображения и отложенная загрузка, чтобы еще больше повысить производительность.
3. ПРОИЗВОДИТЕЛЬНОСТЬ :
Количество фоновых изображений большого размера в css требует больше времени для разбора изображений, что приводит к медленной загрузке всей страницы, в то время как с HTML img тег, запросы выполняются по мере анализа HTML. Хотя для нескольких небольших изображений для эстетических улучшений, таких как социальные значки, если вам нужно улучшить время загрузки, вы можете использовать изображения спрайтов CSS в качестве фонового изображения.
4. ПЕЧАТЬ :
Используйте HTML-тег , если вы хотите, чтобы изображения включались по умолчанию, когда пользователи печатают страницу, и если вы не хотите, чтобы изображения включались в печать, вы можете перейти к свойству фонового изображения CSS.
ЗАКЛЮЧЕНИЕ :
HTML-теги следует использовать, когда они являются важной частью контента. Решение о выборе между ними зависит от вопроса, помогает ли изображение людям лучше понять содержание.
СПАСИБО
Об авторе
Milind Ahuja
Milind — талантливый ведущий разработчик внешнего интерфейса и знает HTML, CSS, JavaScript, AngularJS, версии Angular 2+ и фотошоп. Его хобби — изучение новых компьютерных технологий, фитнес и интерес к различным языкам.
Запрос предложений
Файлы cookie важны для правильного функционирования сайта. Чтобы улучшить ваш опыт, мы используем файлы cookie, чтобы запоминать данные для входа и обеспечивать безопасный вход в систему, собирать статистику для оптимизации функциональности сайта и предоставлять контент, соответствующий вашим интересам.
Нажмите «Принять и продолжить», чтобы принять файлы cookie и перейти непосредственно на сайт, или нажмите «Просмотреть настройки файлов cookie», чтобы просмотреть подробные описания типов файлов cookie и выбрать, принимать ли определенные файлы cookie во время пребывания на сайте.