Responsive images, Part 2—Body Images

My selfie

James Turner,

Tags: CSS HTML

It᾿s been a while since my last post, thanks in part to life, and also to my attempts to get to grips with Drupal, the CMS on which Beautiful Web was previously built. I᾿ve had a few problems with Drupal, so I᾿ve changed to my own custom-built set of web pages. Anyhoo, here᾿s the next instalment of Beautiful Web, looking at the images in The Great Discontent and their responsive behaviour.

Images in the body area of TGD seem to come in two flavours: large and small. I᾿ll deal with each of these in turn below. Also, I᾿ll have a quick look at the nifty loader image that you see for a few seconds when an image appears on screen.

Skip to navigation

Large images

The first image type is full screen width at smaller sizes, but at 990px, it squashes to about two-thirds as the caption below it is forced to the right.

At 320px, the image of Liz Danzico and her dog spans the browser width, and the caption is below.
Figure 1: At a small screen size, here 320px, the large image type spans the screen, and the caption remains below it.
Over 990px, the image of Liz Danzico and her dog takes up around two-thirds of the screen, and the caption moves to the right.
Figure 2: Over 990px, the width of the image changes to around two-thirds of the screen width, and the caption pulls out to the right.

Here is the HTML for this type of image:

<div class="block enrich">
  <div class="single docked">
    <figure>
      <img class="blazy"
        src="loader-4x6.gif"
        data-src="liz-and-penny-keshari.jpg"
        data-src-small="liz-and-penny-keshari-sm.jpg"
        data-src-medium="liz-and-penny-keshari-med.jpg"
        alt="Liz at home with her dog, Penny, the Vizsla" />
      <noscript>
          <img src="/liz-and-penny-keshari-med.jpg"
            alt="Liz at home with her dog, Penny, the Vizsla" />
      </noscript>
      <figcaption>Liz at home with her dog, Penny, the Vizsla; 
        photo by <a href="http://www.smritikeshari.com">Smriti
        Keshari</a></figcaption>
    </figure>
  </div>
</div><!-- /.block -->

Wait just one second, mister — going through this markup line by line, I᾿m comfortable with the two divs, but I have questions about the figure and noscript elements, and about the data-src, data-src-small and data-src-medium attributes in the img element.

Skip to navigation

What does the figure element do?

Although figure is part of my passive web design vocabulary, I᾿m not 100% sure how it᾿s used. This article gives the basic low-down: www.w3schools.com/tags/tag_figure.asp, while this gives a bit more insight into how to use figure: html5doctor.com/the-figure-figcaption-elements. Essentially, figure is intended to be a semantic container (like header or article) for images and captions which are related to the main content. So, by itself figure doesn᾿t do much, but you can use it to group an img and its corresponding figcaption together instead of using an unsemantic div.

Skip to navigation

What does the noscript element do?

Again, from the name it᾿s pretty obvious what this is for. Here᾿s a description: www.w3schools.com/tags/tag_noscript.asp. According to this article, whatever appears inside noscript is triggered when JavaScript is disabled on the user᾿s browser. Examples online give examples only of text, for example, a message which says “You have disabled JavaScript!”. In the above code snippet, however, it᾿s clear that you can add other elements, not just text, inside the noscript tag.

Skip to navigation

What do the data-* attributes do?

According to w3schools.com/tags/att_global_data.asp, you can define your own attributes for elements using the data- prefix. Browsers will overlook these custom attributes, but you can make use of them through JavaScript, and I suspect that these are referenced by Picturefill (discussed in my previous blog post). This is a little beyond my ken at the moment, but for posterity, this article looks interesting: html5doctor.com/html5-custom-data-attributes.

So, the figure and noscript elements, and (used in conjunction with JavaScript) data-* attributes are all important ways of optimising images on a site. Now what about the small images?

Skip to navigation

Small images

The final image type spans the screen width up to 480px, but then reduces to about two-thirds of the screen as the caption moves to the right. At 990px, the image and caption shrink to about 25% of the screen width and are pulled to the right, out of the flow of the body text.

At 320px, the screenshot of Liz Danzico's blog spans the browser width, and the caption is below.
Figure 3: At smaller screen widths, here 320px, the screenshot of Liz Danzico᾿s blog spans the browser width, and the caption appears below.
The screenshot of Liz Danzico's blog takes up two-thirds of the screen and the caption pulls out to the right
Figure 4: Between 480px and 990px, the screenshot of Liz Danzico᾿s blog takes up two-thirds of the screen and the caption pulls out to the right.
The screenshot and caption pull out completely to the right, and are squashed into a space of about one quarter of the width of the browser
Figure 5: Over 990px, the screenshot and caption pull out completely to the right, and are squashed into a space of about one quarter of the width of the browser.

Here᾿s the HTML for all this:

<aside class="enrich">
  <figure class="screenshot">
    <img class="blazy"
      src="loader-4x6.gif"
      data-src="bobulate.jpg"
      data-src-sm="bobulate-sm.jpg"
      alt="screenshot of bobulate.com" />
    <noscript>
      <img src="bobulate.jpg"
        alt="screenshot of bobulate.com" />
    </noscript>
    <figcaption><a href="http://bobulate.com"><em>bobulate.com
      </em></a>, Liz&#8217;s personal website at its launch in
      2009</figcaption>
  </figure>
</aside>

For me, the above markup is pretty clear, but what I like about this is the way the images and their figcaptions bounce around the screen according to viewport width. TGD clearly makes creative use of the underlying grid that it employs.

Skip to navigation

The Loader Image

Finally, I want to have a look at the loader image that TGD uses when an image comes into the viewport. There is a pause of a second or so while the image loads, during which time you see a grey image with a circle of dots that seems to rotate.

When you scroll down and an image comes into view, a grey panel with a circle of rotating dots appears for a second or two before the image loads.
Figure 6: When you scroll down and an image comes into view, a grey panel with a circle of rotating dots appears for a second or two before the image loads.

From the HTML snippets above, we can see that the src attribute of the imgs is set to “loader-4x6.gif”. Presumably, the picturefill polyfill, discussed in my previous blog post, controls this behaviour; the polyfill causes the src image to appear for a second or so before the data-src image. So, if I want a loader image to appear, I set the src attribute of my img to the loader GIF, and then set data-src to the actual image that I want.

To wrap up with TGD, I᾿ve learnt a lot over the course of the last two blog posts:

On the whole, I᾿d say it᾿s been a productive couple of posts.

That concludes my exploration of The Great Discontent. I᾿ve learnt a lot, but it᾿s now time to move on to a new site: A List Apart.

Skip to navigation