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

Although the picture looks smaller on a smaller screen, the underlying
image file isn’t. The browser still downloads the full-size picture, as
the same URL is shared across all displays. A 512x512 image includes
more than 10 times the pixels that a 160x160 image does, meaning the
small screen we mentioned does not leverage 90% of the data it received.
See Figure 3-3.
We’ll refer to this behavior as “Download and Shrink,” as it’s descriptive
of the browser’s actions. One calculation by Tim Kadlec indicates that
the big screen images are 4 times heavier than necessary on a small
screen, and other studies show similar numbers. Remember that image
bytes average over 60% of a the page’s weight, implying that nearly
half of the page’s bytes may be unncessary.
Figure 3-3. Fluid image on Engadget shown using 35 times fewer pixels
on small screen, but the same 55 KB file is always used
The performance impact of shrinking doesn’t end with the excessive
network. Once it reaches the client, a larger image means decoding
more data, which may take 15-20 times longer than decoding a properly
sized image. After decoding, a bigger image requires the allocation
of more memory to store it and subsequently more data passing to the
GPU, at times through a slow memory-GPU connection (bus). Lastly,
12 | Chapter 3: Image Over-Downloading