Разница в производительности между элементами тега img и div с фоновыми изображениями?

Question

Существуют ли различия в производительности или поведении загрузки / кэширования при отображении изображений в тегах img и div с фоновыми изображениями?

Мой пример:

У меня есть сайт со многими перекрывающимися изображениями, некоторые из которых мне нужно будет динамически загружать с помощью JavaScript. Одна проблема заключается в том, что мне нужно привязать изображения справа от элемента, чтобы я мог сделать хороший эффект вытеснения вправо. Из-за этого я использовал div с фоновым изображением, расположенным справа. Не могу понять, как это сделать с img, но так как для меня работают div, я не знал, будет ли это иметь значение ...

Answer 1

AFAIK, браузеры кэшируют изображения одинаково, независимо от того, находятся ли они в DIV или IMG. В любом случае, я думаю, что это один из тех случаев, когда конкретная производительность определяется как деталь реализации, внутренняя для каждого механизма рендеринга (и, возможно, браузеров, построенных вокруг них). Таким образом, это не зависит от нас как дизайнеров / разработчиков и может меняться от браузера к браузеру и от версии к версии. Другими словами, я бы не стал тратить на это много времени.

Answer 2

Основным отличием производительности является использование фоновых изображений, позволяющих использовать CSS-спрайты. Наличие одного изображения, содержащего большое количество изображений на вашей странице, означает, что пользователь должен сделать только один запрос вместо одного для каждого изображения.

Answer 3

Я думаю, что используя атрибут background-image в div, макет страницы загружается первым, а изображение, присутствующее в div, загружается позже после загрузки dom. таким образом, используя background-image, HTML-макет загружается быстрее в веб-браузере.

Answer 4

Другое отличие заключается в адаптивных макетах. Если у вас есть элемент, который отображается только при определенной ширине экрана (то есть не на мобильных телефонах), он все равно будет загружать изображение, если оно указано в html (например, с использованием display: none), но большинство всех браузеров теперь будут НЕ загружайте изображение, если оно является фоновым изображением, заданным в неиспользуемых правилах CSS для медиазапроса. Многие ранние адаптивные макеты подверглись критике, поскольку они по-прежнему использовали ту же пропускную способность, что и полноразмерные сайты.

Это также полезно для таких проектов, потому что вы можете легко указать разные изображения для разных размеров экрана. «Retina» дисплеи на планшетах и ​​даже ноутбуках теперь не будут выглядеть лучше без графики с 2x разрешением. Так что ... даже если вы не делаете таких вещей сейчас, это, вероятно, хорошая практика, потому что вам может понадобиться это в ближайшее время!

Answer 5

Технические различия да, в первую очередь вы можете установить ширину / высоту тега IMG, и он растянет изображение, что может быть полезно в некоторых ситуациях.

Главное, что вы должны сохранитьИмеется в виду контекст изображения в HTML-документе.Если изображение является содержимым, скажем, изображение в галерее, я бы использовал тег IMG.Если это просто часть интерфейса, я мог бы вместо этого использовать div.

Answer 6

Единственное отличие, которое я могу себе представить, это:

Вы не можете масштабировать изображения в качестве фона, хотя вы можете использовать теги img. Это откроет сценарий, в котором фоновые изображения загружаются быстрее, потому что он заставляет вас иметь правильный собственный размер, а не загружать все изображение и масштабировать его. Тем не менее, обратное утверждение может быть верным: учитывая то, что вы не слишком заботитесь о качестве изображения, вы можете добавлять на страницу меньшие изображения и масштабировать их.

Я бы придерживался того, что вычистил (и более последовательно - IE / FF / Chrome / Safari / etc).

Answer 7

Существует огромная разница на самом деле.Div BG производительность лучше.но вы можете установить ширину тега img, высоту.

Какой из них использовать, зависит от того, в какой ситуации вы находитесь.