Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 321

Such rulesets typically change the width of certain elements, change the floating to ensure that the desired
elements will appear below each other, or disable elements (e.g., social media icons are not displayed when browsing
the site on a mobile) or features (e.g., background image is disabled when browsing the site on a mobile). By creating
similar rulesets for different de facto standard screen resolution ranges, web designers can cover pretty much any kind
of device while providing an ideal user experience.
Older browsers such as Internet Explorer 8 and earlier do not support CSS3 Media Queries. To address this, it is
popular to use a JavaScript fallback mechanism like css3-mediaqueries.js [4] or Respond.js [5].
Responsive Images
One of the approaches to use optimized images for mobile browsing is applying the srcset attribute of HTML5 [6],
which can switch between different versions of the same image depending on the resolution and can be used on the
img and picture elements (Listing 9-5).
Listing 9-5. Displaying Different Image File Versions Depending on Resolution
<img src="ferrari-400.jpg" alt="The Ferrari"
sizes="(min-width: 600px) 60vw, 100vw"
srcset="ferrari-200.jpg 200w,
ferrari-400.jpg 400w,
ferrari-800.jpg 800w,
ferrari-1200.jpg 1200w">
The photo width will be 60% of the actual viewport width for browser windows that are at least 600 pixels wide.
On smaller resolutions or browser windows, the photo width will correspond to the full viewport width. The browser
applies the image with the resolution closest to the viewport width from the set of images optimized with a width of
200px, 400px, 800px, and 1200px, respectively, while considering not only the image width, but also the pixel density
of the screen.
If the image is not huge and you want to use the same image file for mobile and desktop, the maximum width
should be set to 100% (Listing 9-6).
Listing 9-6. A Responsive Image Implementation
img {
max-width: 100%;
}
If the container around the image becomes narrower than the width of the image, then the image will scale down
to match the width of its container. The 100% max-width also ensures that the image does not scale larger than its
native size, which would significantly reduce the image quality (pixelated image).
There are many problems associated with responsive images, such as performance problems due to multiple
image versions downloaded unnecessarily through browser preloading, bandwidth problems if only one huge image
is used, and the Art Direction Problem, when the main object of the image is relatively small compared to the entire
image, and becomes way too small when resizing the image for mobile browsing (e.g., a face becomes tiny while
irrelevant background details are preserved).
Two popular JavaScript approaches are Picturefill and HiSRC. Picturefill is a responsive image polyfill for the
HTML5 picture element that requires some special markup, namely div elements to represent the image variations,
differentiated by data-media attributes that act like CSS3 Media Queries [7]. HiSRC is a jQuery plugin that enables
you to create low-, medium-, and high-resolution versions of images, and the script will show the appropriate image
version based on Retina-readiness and network speed [8].
A server-side approach is Adaptive Images, which uses a PHP script to intercept any image request and will resize
it on the fly as needed to specified breakpoint sizes and serve the image on your pages automatically [9].