Please study the markup in these examples, and be sure to view them with JavaScript disabled, too.
Article Listing
Only the image illustrating the headline story is shown to all users. This decision has been made, perhaps purely because it is the lead article, or maybe because the image highlights the subject of the story.
Images for subsequent stories are considered to be decorative – nice-to-have – and are therefore conditionally loaded (readers must be viewing using browser with a viewport wider than 640px). Although these images may not be displayed in this list, the full article will include images relating to the story. This makes sense, after all, anyone viewing that article has likely expressed an interest in reading and enjoying its content.
Image Gallery (Slideshow)
As a gallery of photos, it’s essential full-size images can be viewed by any user, regardless of device. A high resolution version of each image (1440×960 pixels) is therefore linked from a small thumbnail (360×240 pixels).
When we enhance the design with JavaScript, we use these smaller thumbnails as image placeholders, that appear before larger resolution images are fully downloaded (and which are only downloaded when the viewport is wider than 640px).
Image Gallery (Carousel)
As a gallery of photos, it’s essential full-size images can be viewed by any user, regardless of device. A high resolution version of each image (1440×960 pixels) is linked to from a small thumbnail (360×240 pixels).
When we enhance the design with JavaScript, we retain the thumbnail images and include them in the carousel interface. We also use them as placeholder images, appearing before the large resolution images have been fully downloaded.
Big Picture
As a page of large immersive images, it’s essential these can be viewed by any user, regardless of device. High resolution versions of each image (990 pixels wide) are linked to from small thumbnail images (360 pixels wide).
When we enhance the design with JavaScript, we use the thumbnails as image placeholders, that appear before the large resolution images have been fully downloaded (and which are only downloaded when the viewport is wider than 640px).