Flexbox for Responsive Web Design: How to build websites that work on any browser and any device by Harvey Berman

Author:Harvey Berman [Berman, Harvey]
Language: eng
Format: azw3, pdf
Published: 2016-07-16T16:00:00+00:00

Art Direction Performance

You might think that we could get around this problem by employing an “art direction” strategy.

Instead of making the image flexible, you’d think we could use media queries to display a big image on big screens and a small image on small screens. That way, the browser on a smart phone would never need to download a big image. It could download the small image, which would be much faster. Unfortunately, this strategy does not work in modern browsers.

The problem is that modern browsers pre-load images. That is, modern browsers retrieve images in the background, before they act on CSS code. Consider the code that we used earlier to implement an art direction strategy:

HTML

<img class="small-image" src=“small-photo.jpg" />

<img class="big-image" src=“big-photo.jpg" />

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.