By Aaron Gustafson CHAPTER 7Well, studies have shown that some images — relevant images with
story appeal^7 — can actually engage readers, so we shouldn’t throw them out
entirely. Instead, we should scrutinize each image’s content to determine
whether it actually adds anything to teaser. Once we’ve separated the useful
from the useless, we can concentrate on addressing the issues above.
If readability is our chief concern, we might be tempted to link to the
images in the traditional way and hide them with CSS when the browser is
less than twice the thumbnail width. The problem with that strategy is that
the browser will still download the images even though they are not being
displayed. That’s not very respectful of our customer’s time and money.
A better strategy to use is called lazy loading.
You may be familiar with lazy loading as a concept from the JavaScript
world, where additional code is loaded into a Web page as needed. But
there’s no reason to reserve that technique for JavaScript. We can lazy-load
anything that is ancillary to the core purpose of the page: images, HTML,
CSS, etc. In fact, this is exactly what many news sites (e.g. the Guardian,
the Boston Globe, and the BBC) have begun to do. When it comes to lazy
loading images, my current preference is to take an empty paragraph and
assign it a data-* attribute pointing to the image I may want to load if the
conditions seem right:
I use some simple CSS to hide this paragraph by default:
[data-image-src] {
display: none;
}
Then I use JavaScript to test a few conditions and decide what to do. A UI
construction flow for this approach looks like the figure below: