Responsive images, Part 2—Body Images
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
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.
Here is the HTML for this type of image:
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
noscript elements, and about the
data-src-medium attributes in the
What does the
figure element do?
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
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
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
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-* attributes are all important ways of optimising images on a site. Now what about the 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.
Here᾿s the HTML for all this:
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.
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.
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:
- You can plug Scott Jehl᾿s picturefill into a site to enable finer control over image quality and bandwidth.
- You can apply a funky image cropping effect at different screen sizes.
- You can use certain HTML tags and attributes to add better control over images and other elements. These tags are:
- You can be very creative in the way images interact with your underlying grid.
- You can make a cool loader GIF display while an image is loading.
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