<img /> против фонового изображения (css) в производительности

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

Основной проблемой, которую я могу обнаружить с помощью изображений, является проблема reflow/repaint, когда изображение не имеет правильных размеров и поэтому масштабируется (я должен иметь дело с этим, я знаю о наилучшей практике).

С учетом этого утверждения (изображения будут масштабированы). Что должно быть лучше, элемент изображения или divs с этими изображениями в качестве фона для производительности?

Я сделал это jsFiddles, что в моем инструменте памяти браузера Chrome, показывают, что опция фонового изображения использует меньше памяти.

<img/>: http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div>
div {
    background:url(...);
    background-size:100% 100%;
}

Рекомендации:

  1. Разница в производительности между элементами тегов img и divs с фоновыми изображениями?
  2. Когда использовать IMG против CSS-фона?
  3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
  4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Ответ 1

Лично я бы забыл о производительности в этом примере и сосредоточиться на том, что изображение:

1) Изображение = контент

2) Фоновое изображение = дизайн

Как я обычно думаю об этом, хочу ли я, чтобы изображение отображалось на всех размерах экрана, на всех устройствах, когда CSS был включен или выключен? Я хочу, чтобы изображение было "проиндексировано" Google и Facebook. Если ответ "да" всем или любым из этих вопросов, тогда обычно изображение является "содержимым", и вы должны использовать тег IMG.

Если вы хотите, чтобы другое изображение отображалось на разных размерах экрана (или вообще не отображалось на некоторых устройствах), или если вы счастливы, что изображение не отображается на распечатке, или вы счастливы, что изображение не появляются, если CSS отключен, тогда обычно изображение является "дизайном", и вы должны использовать фоновое изображение.