responsive-and-fast-implementing-high-performance-responsive-design

CSS Responsive Images
I previously described how browsers consistently download hidden
images, but in fact, that description is only correct for foreground
images placed in a page using an tag. Background images, on
the other hand, go through a different process altogether.
Background images are added to a page using the backgroundimage
CSS property, which puts an image behind a DOM element.
The DOM element does not have to contain other content, and so an
empty element with a background image achieves a similar effect to
an tag.
Browsers process background images differently than they do
tags. While building the DOM, which contains the different elements
on a page, the browser applies CSS styles to the DOM elements to
construct a structure called the render tree. The render tree holds the
objects that will actually get painted on the screen, which means some
DOM elements are not included in it (such as the page title, any script
tag, or HTML comments). While building the render tree, when a
node is determined to include a background image, the browser will
download and render it.
For content elements on the page, the render tree usually resembles
the DOM, but the two are not exactly the same. For example, a hov
er style on a DOM element may be represented as a child node in the
render tree alone. On the flip side, when a node is marked as dis
play:none, it is removed from the render tree (along with its children),
and thus background images on its child nodes will not be seen or
downloaded.
Furthermore, since background images are set using a style, they can
be set within a Media Query condition. Using Media Queries, we can
set different background images for different displays, and address the
“Download and Shrink” problem as well.
Responsive Background Image Pitfalls
At first glance, using CSS as a vehicle for Responsive Images looks
promising. However, a closer inspection reveals many reasons not to
do so.
One such reason is that responsive background images are still prone
to excessive downloads. For instance, the background image of a hid‐
14 | Chapter 3: Image Over-Downloading