CHAPTER 5 Robust, Responsible, Responsive Web Design
Thanks to QuickConcat, even if we’re loading a handful of scripts and
styles after the page is loaded, we’re only adding two requests: one for all of
our additional scripts, and one for our additional styles.Images and Video
The subject of media asset weight holds a special place in my heart. At
the time of writing, images make up roughly 64% of the average website’s
weight^15 , and it’s getting worse as more and more people plaster their sites
with monstrous high-resolution images to suit the newest high-density
displays. The average website’s image weight alone has increased by more
than 13% since January 1st of this year^16.
You likely know the basics of responsive images by heart: to make an
image flexible, we first remove the width and height attributes. By setting
a max-width of 100% in our CSS instead, we prevent this image from ever
overflowing its parent container. As our flexible container resizes, so does
the image.
Of course, this approach requires us to use assets that are at least
as large as the largest size at which they’ll be displayed: if an image is
intended for part of a layout that could be anywhere from 300px wide to
2000px wide, you’ll still need to serve an image with an inherent width of
at least 2000px. That’s a huge amount of wasted bandwidth and processing
power for a mobile device, with no perceivable benefit to the user.
This bandwidth cost is multiplied four-fold as we update our assets to
suit high-density displays. A Retina image isn’t just twice as big — it’s twice
as big in both dimensions: a true Retina image is four times larger. We
shouldn’t serve those to everyone indiscriminately when the vast majority
of users will see no benefit whatsoever, especially paired with the already
high bandwidth cost of images that need to be able to scale up to suit
desktop layouts as well as mobile layouts.15 http://smashed.by/interesting-stats
16 http://smashed.by/compare-stats