Making Images Responsive

Making Images Responsive photo by Virginia DeBolt

Making Images Responsive photo by Virginia DeBolt

I’ve been attempting to sort out in my own mind exactly what I needed to be teaching students about responsive images. For a while, things have been a bit wobbly in this area and there were no definite best practice ideas. Thanks to the Responsive Images Community Group, I think a consensus on best practice has gelled for now.

Srcset and sizes

I’m sure you’ve heard about the new picture element. Before you think about using it, you need to know when you can use the familiar img element.

The majority of the time, the srcset and sizes attributes of the img element will be what front end developers use.

This example shows srcset with img and options for display density.

<img src="image500px.jpg"
  srcset="image750px.jpg 1.5x, image1000px.jpg 2x"
  width="500px" alt="great image">

The src attribute is the fallback image. The “1.5x” means 1.5 device pixels per CSS pixel, and is a larger image. The 2x means 2 device pixels per CSS pixel, and again, refers to a larger image. It means you have prepared 3 versions of the same image and uploaded them.

Here’s an example of code using an img element with srcset and sizes attributes.

<img srcset="large.jpg 1024w,
 medium.jpg 640w,
 small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
 100vw"
src="small.jpg"
alt="A great image">

The srcset attribute lets you give a comma separated list of image file paths. The second example used w to specify width to the browser and vw to specify viewport width. Instead of display density, the second example uses media queries to designate images from the list. Again, you have prepared 3 images in different sizes and have them on the server.

Whether you’ve prepared your code to work with pixel density or using widths, the result is the browser makes a choice as to which image will work best. The browser decides which image of the listed images fits the situation by evaluating resolution, viewport size, even bandwidth, and chooses the best image for the situation.

You can also add add the sizes attribute. The sizes attribute tells the browser how many pixels it needs by describing the final rendered width of the image. To make the image occupy a third of the viewport, the code would be:

sizes="33.3vw"

With sizes, you provide a CSS length that describes the image’s rendered width. CSS lengths can be either absolute (150px or 20em) or relative to the viewport  as in 33.3vw. As with fonts or other relative measures, the relative to the viewport value is what offers the responsive rendering. The 100vw measure is the default length and would be used if no other conditions matched.

Value can be in px, ems, or vw.

In the second example above the sizes attribute uses media query width descriptors with values in ems or vw (viewport width). The first value is a media condition (a media query without the media type) and the second value is a length. Note, the default length is not matched to a media query.

You can use only the srcset or both srcset and sizes attributes with the img element.

When you need to do more than resize an image

So, when do you use the picture element?

Sometimes an image won’t work if it is simply sized differently for different devices. It might need to be cropped or have some other type of what is called art direction work done on it. In this situation, you want to give a list of different images to the browser to use in different situations. Perhaps they’ve been cropped. If the image contain words, perhaps the text has been reworked for different size displays. They are not merely resized versions of a single image, but completely reworked images meant to fit different situations.

Use the picture element with multiple source elements for this situation.

<picture>
 <source media="(min-width: 40em)"
  srcset="big.jpg 1x, big-hd.jpg 2x">
 <source
  srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>

Embedded in the picture element are source elements with images paths, media queries, display density designations – all the things we saw with the img element, but here the source elements link to images that have been altered in some way. The last thing nested in the picture element is a fallback img element.

OMG

That’s a lot of new information for someone who grew up on the old style image tags. New length measures, new elements, new attributes. I’m not sure I really have it clearly understood. Writing this was one way to help me work it all out in my mind. If any of you see where I’m foggy or misunderstand something, please offer suggestions.

Learn More

Twitter Writes a Post about role=presentation

There is an ARIA role called “presentation” in the WAI ARIA spec. With Twitter’s help, Denis Boudreau wrote this post about it.

This is how it started:

Then @jsutt took up the idea with this:

Denis Boudreau to the rescue!

 

 

 

As you see, this ARIA role has specific and limited use. I wasn’t sure where a front end developer who was only working with semantic HTML would even consider using it.

 

Oh, at last the light dawns. This is what developers building apps sometimes need to do. Even at that, go back to point one about only using it when you really know what you’re doing and are absolutely sure you want to strip an element of its semantics.

Denis draws us to a sensible conclusion.

 

 

Some Teaching Tips for HTML5 and CSS3 7th Edition

Where I teach, we use HTML5 & CSS3 Visual QuickStart Guide (7th Edition) to teach both the basic HTML and the CSS class. This version of the book came out in 2011.

There’s an 8th Edition released in 2013, but we haven’t switched to it yet. I’m sure we will soon, but for the moment, we are using the 7th edition.

Here are a few teaching tips if you are using the 7th edition, as I currently am.

  • At the time this book was written, there was no <main> element in the spec. I suggest you change the layout suggested in Chapter 3 to use the <main> element for the left column. Use the landmark role role="main" with it.
  • Chapter 3 contains a clear explanation of the purposes and uses of both the <section> and <article> element. If you want, you can include an example of these two elements inside the <main> element.
  • Remember that <hgroup> has disappeared from the spec.
  • The example files all show empty elements such as <img> with a closing forward slash included: <img />. This provides a perfect opportunity to talk about backwards compatibility, XHTML, and some of the personal choices that are acceptable when writing HTML5.

Meet Megan Smith, New US Chief Technology Officer

MAKERS have several video profiles of Megan Smith, who was recently named Chief Technology Officer for the United States by President Obama.

You can find more films and a biography of Megan Smith at the MAKERS site.



When the video ends, you will be able to see several more short conversations with Megan Smith about technology.

Jeffrey Zeldman: 20 Years of Web Design and Community

This is a wonderful film everyone should watch, especially young people just starting out making web sites who have not lived through the last 20+ years with Jeffrey as their spirit guide.

The film is one of a documentary series from Lynda.com.Thank you to lynda.com for making this one available in its full length free.

There are many other fascinating documentaries on creative topics at lynda.com/vimeo. You must be a paying member of lynda.com to watch them. If you are, I especially recommend that you also watch Creative Insights: Lauren Bacon on Web Design.

The Relevance of Dreamweaver

Stefan Mischook from Studioweb.com posted an article a day or two ago called Is Dreamweaver still Relevant in Web Design? His conclusion was no, it is not.

Granted there are many more ways to make an effective and functional website than there used to be. I often steer people away from Dreamweaver toward some other tool when I don’t think they need to know everything you must know to use Dreamweaver properly.

However, that does not mean that the software is past its useful prime. What that article failed to take into consideration is all the site-wide tools and integrated tools that come with Dreamweaver. Dreamweaver does more than just write HTML and CSS. There are tools save a great deal of time for a developer who knows how to use them. There are tools that track links, update links, manage snippets, write JavaScripts, insert jQuery, write PHP. Dreamweaver works with Photoshop and other Adobe tools in ways that save both time and effort. In many ways, Dreamweaver forces developers to use accessible techniques – something other software doesn’t necessarily do.

I’ve certainly aired some complaints about Dreamweaver since Creative Cloud came along. But that doesn’t mean I think it’s irrelevant.

Anyone who doesn’t know enough to built a good website is going to build a bad website whether they are using Dreamweaver or some other tool. If I use Microsoft Word to write a terrible book, is that the fault of Word? Developers have to know what they are doing. When they do, their choice of software is just a choice. That software will do what they tell it to do.