Cloud Four Blog

Technical notes, War stories and anecdotes

Responsive Images 101, Part 7: Type

So far we’ve been focused on how to make responsive images more performant. That’s essential, but at the end of the day, we still have the same old image on the page.

Now, it is time for the fun stuff!

Type attribute

Have you ever bemoaned the fact that your options for reliable image formats are limited to jpg, png, and gif? Ever wanted found yourself wondering if there is enough browser support for new formats like SVG or webp?

If so, you’re going to love the type attribute.

Type syntax repeated below

The type attribute can be added to <source> elements inside a <picture> element and allows you to declare different image types that the browser can choose from:

<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

This new type attribute is modeled on the <video> element’s type attribute and works the same way.

The browser will pick the first source where the declared image type is one that it supports. If it doesn’t recognize any of the source types, it will use the <img> element’s src or srcset declarations.

The value is a MIME type for the image format being referenced in the srcset attribute. If you have multiple image URIs listed in the srcset attribute, they should all match the declared image MIME type.

Of course, you can combine type with the sizes and/or the media attributes as well. All three of these attributes are optional and can be combined to accomplish whatever you need.

The srcset attribute is required for all <source> elements. Both display density and width descriptors can be used with the type attribute.

Do you need the media attribute?

I’ve gotten in the habit of telling people that they shouldn’t use the <picture> element for most responsive images. That is both true and a bit misleading.

So now that you’re up to speed on all of the inline responsive images techniques, let’s break it down:

  • Most images on the web fit the resolution switching use case.
  • When you’ve got a resolution switching use case, you want to empower the browser to make the best choice possible. This is what srcset is designed to do.
  • When you use the <picture> element with media attributes, you’re dictating to the browser what images it should use.

Therefore, you can and should use <picture> when you want both resolution switching and to support multiple image formats. Just leave off the media attribute so that the browser can do its thing.

Progressive enhancement for image formats

So far in this series, I’ve tried to keep things professional, but lighthearted. But that ends here because…

OMG! OMG! OMG! I’M SO BLOODY EXCITED ABOUT TYPES!

Phew, had to get that out of my system.

For years we’ve wanted to be able to use different image formats, but had to wait for wide spread adoption of the format.

But even when we finally felt we could switch, we always knew that we were ignoring old browsers. We’d chalk it up to progress and hope it didn’t affect too many people. Or maybe we never switched to the new image formats for fear of leaving people out.

But <picture> plus the type attribute gives use a way out of this conundrum. We can use progressive enhancement for image formats right now.

Sara Soueidan described how she is starting to do this for SVG with PNG fallbacks instead of all the hacks we used to use.

But it’s not just SVG and webp. What about JPEG-2000? JPEG-XR? APNG?

If you can find browsers that support an image format and you believe it can provide some value to your users, then there is no reason not to use that format so long as you provide alternatives.

JPEG-2000? Yes please!

A wonderfully in-depth article by Zoltan Hawryluk opened my eyes to the benefits of different image formats and in particular JPEG-2000 for alpha transparency images.

In one of the examples in Zoltan’s article, he shows dice placed above a multi-color background. To pull it off requires an alpha-channel transparency.

dice

The file sizes of the dice image are:

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 112.1K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K

Look at those savings. The dice PNG at 1024×768 is 325.7K. The same image as JPEG-2000 is only 19.2K. That’s insane!

I know what you’re thinking. That’s wonderful, but no browsers support JPEG-2000.

That’s what I thought too, but I was wrong. Both desktop and Mobile Safari already support JPEG-2000.

Now before you go converting all of your images to JPEG-2000, heed Zoltan’s warning:

As you can see, the numbers for JPEG-2000 are especially impressive. However, the file sizes of the alternate images will vary depending on the characteristics of the original image… While alternative image formats may give better results, sometimes they don’t.

So it will depend on the image and the design. But you can see how there can be significant benefits for some of your users depending on the types of images and the formats their browsers support.

Brave new world of image formats

I don’t expect anyone to go off and immediately start using JPEG-2000. There’s a lot more work to be done in this space so that we know what image formats make sense and when to use them.

Simply getting tools in place to output the various images formats can be difficult. Zoltan includes information at the bottom of his article on what tools he used to create the different formats.

Other than the command-line tools, I find the tools to be awkward and rough around the edges. There has been no incentive for companies like Adobe to add rich support for image formats like JPEG-2000 because no one could use them until now.

We have a lot of experimenting to do. I can’t wait!

What about CSS?

Everything we’ve talked about so far has been for inline responsive images. Because we already had media queries in CSS, inline responsive images were the biggest challenge and most of the focus has been on them.

But there are some new standards for responsive images in CSS and a few tricks you should know. Stay tuned for Part 8: CSS Responsive Images.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Responsive Images 101, Part 6: Picture Element

In Parts 3, 4 and 5, we focused on solutions for resolution switching. Now it is time to look at how to solve for art direction.

The picture element—the media attribute in particular—is designed to make art direction easy.

Picture syntax, replicated below

The <picture> element contains a series of <source> child elements followed by the required <img> element. The source elements work similarly to the child sources of the video element.

<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

Each source has a required srcset attribute along with optional attributes including media, sizes and type. Both sizes and srcset on a <source> element work exactly the same as they do on an <img> element.

We're going to focus on the media attribute for now.

Media attribute

The value of the media attribute is a media query. Unlike the media condition that the sizes attribute uses, this is the full media query that you've come to know and love.

As the browser looks through the list of source elements, the first source whose media query matches is the one that is used. If no media queries match, then the <img> element is used.

Media attribute is a directive, not a suggestion

Unlike srcset and sizes, when you use the media attribute, you are dictating to the browser which source should be used.

The browser has no discretion to pick a different source. It must use the first <source> element whose media attribute matches the current browser conditions.

This is why the <picture> element with the media attribute is perfect for art direction. In the art direction use case, designers need to ensure that the image used at a particular viewport size is exactly the one they intend otherwise their design may break.

Let's take a look at this in action.

Picture element in the wild

Shopify uses the <picture> element for art direction. Shopify's home page highlights one of their customers, Corrine Anestopoulos, the Founder of Biko Jewellery.

Animation showing changes as Shopify home page viewport shrinks

On narrow screens, the photo of Ms. Anestopoulos is cropped. Because the image is no longer simply being scaled down, this is considered art direction.

The markup that Shopify uses combines the <picture> element with srcset display density descriptors. I've simplified the markup to remove long image paths and included it below:

<picture>
  <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

Looking at the code in more detail, what we see is the Shopify has three different image breakpoints. The image is a fixed width at each breakpoint—it jumps from size to size instead of flexing between breakpoints.

Because the image is fixed width, srcset display density descriptors make sense. So for each breakpoint, Shopify has defined a 1x and 2x source file. It breaks down like this:

  • <source … media="(min-width: 990px)"> — The largest image size, which Shopify calls desktop, is the first source. The media attribute tells the browser that this source should only be used if the viewport is larger than or equal to 990 pixels wide.

  • <source … media="(min-width: 750px)"> — The second source, the "tablet" image, will be used for viewports larger than or equal to 750 pixels. Because the first source takes effect at 990 pixels and the browser selects the first source that matches, the effective range of the second source is from 750 to 989 pixels.

  • <img> — If there are no matches for the two sources, then the viewport must be smaller than 750 pixels wide. When that is the case, the srcset on the <img> element will be used. This "mobile" image is the cropped image used for small screens.

If the images were flexible instead of fixed width, Shopify could have used <picture> with srcset width descriptors instead of display density descriptors.

One final trick

If you have art direction, you need the picture element. But the writers of the picture specification had one final gift to give us web authors and it's a big one.

Stay tuned for Part 7: Type to learn about an exciting new world of image formats.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Introducing Leveller: Please Avoid Using It

This happens to me over and over: I have a multi-column grid of tiles, each with varying heights. This means the bottom of certain rows can appear jagged and difficult to scan visually:

See the Pen Leveller: Before by Tyler Sticka (@tylersticka) on CodePen.

Ideally, I’d use flexbox to solve that problem with a shockingly small amount of CSS (especially if you use Autoprefixer). Seriously, look how well that works:

See the Pen Leveller: Flexbox Alternative by Tyler Sticka (@tylersticka) on CodePen.

Sadly, that solution rarely makes it into production on the projects I’ve worked on. Sometimes browser support is the culprit. Other times we’ve inherited particularly uncooperative grid patterns (either from an existing project, or an overzealous framework).

Over the last few years, I wrote and re-wrote project-specific, bespoke JavaScript to solve this problem. I’ve finally accepted that it isn’t going away, at least not as quickly as I’d like it to.

So I’ve written a jQuery plugin for equalizing element heights. It’s called Leveller:

See the Pen Leveller: After by Tyler Sticka (@tylersticka) on CodePen.

Don’t use Leveller if you can help it. Flexbox is way more appropriate. If you only need to adjust min-height properties, Equalizer is a leaner, dependency-free solution.

But if all else fails, Leveller is available now on GitHub (and also via npm). Godspeed!

Responsive Images 101, Part 5: Sizes

When we last left our intrepid web developers, they had discovered the power of srcset width descriptors, only to be faced with a new challenge—the browser only knows the size of the viewport when it begins downloading images.

Now, it is time to meet the hero of our story: the sizes attribute.

sizes-hero

Sizes attribute is required!

The sizes attribute is required any time you use srcset width descriptors.

In fact, sizes only makes sense if you’re using the width descriptors. If you’re using the display density descriptors, you don’t need the sizes attribute. The browser won’t know what to do with it.

Sizes syntax

Out of all the new responsive images standards, sizes was the hardest one for me to wrap my head around at first.

Sizes syntax repeated below

Like srcset, the sizes attribute contains a comma-separated list. This comma-separated list describes the size of the image in relation to the viewport.

I want to repeat that point because it is the key to understanding sizes.

We’re telling the browser what size the image will be in relation to the size of the viewport. And we can tell the browser how that relationship changes as the size of the viewport changes.

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Like srcset, each comma-separated item contains two values separated by a space.

Media conditions

The first value is a media condition. A media condition is similar to a media query, but not as full featured. For example, you can’t do things like ‘@media screen’, but you can do everything else you would likely want to do in sizes.

Most commonly, your media condition is going to be a something like ‘(max-width: 480px)’ or maybe ‘(min-width: 480px)’.

Lengths

The second value in each comma-separated item is a length. This length is often expressed using the viewport width (vw) unit.

There’s a good chance you haven’t seen vw units before. They are fairly new, but have wide support in current browsers.

Each vw unit represents 1% of the viewport width, which is a fancy way of saying that 100vw is 100% of the viewport width and 33vw is 33% of the viewport width.

The length doesn’t have to be expressed as a viewport width unit. It can be any length including absolute and relative length. You can even use CSS calc() to do things like auto-calculate margins dynamically.

How does the browser select the correct sizes value?

When the browser starts through the comma-separated list of values, it grabs the first value where the media condition passes.

Take another look at our sample markup and the order in the sizes attribute:

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

If we translated this into a bulleted list of instructions, it might look like this:

  • (max-width: 480px) 100vw — If the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width.

  • (max-width: 900px) 33vw — If the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. Ergo, if this rule effectively says that if the viewport is 481 pixels wide to 900px, that the image will be 33% of the viewport width.

  • 254px — When there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met. In this case, we have media conditions covering viewports up to 900 pixels. Therefore, from 901 pixels wide to infinity, the image will be 254 pixels wide.

To help you visualize how this might work in the real world, I created a little video that looks as how the values might change as the viewport width increased on the Walmart Grocery site.

NOTE: As of the time of publication, the Walmart Grocery site was not using srcset and sizes. This is hypothetical markup. If you want to see srcset and sizes in action, take a look at The Guardian which recently switched to using srcset and sizes.

But what about separation of content and presentation?

I’ve seen many complaints about the new responsive images specification. Most amount to either complaints about complexity that ignore the fact that images on the web are inherently complex3 or some variation of WWIC.

But the one complaint I have a tremendous amount of sympathy for is the idea that we now have presentation information—the size of the image—in the markup. I doubt there was anyone involved in the responsive images standards process who didn’t share this concern at some point.

Unfortunately, it is unavoidable. As discussed in Part 4, the browser starts downloading image sources before the size of the image in the page is known.

The only way to support the pre-loader and make sure the right source gets downloaded is to provide some information about the size of the image in the markup.

Is the pre-loader worth it?

If you’re like me, you may have found yourself wondering whether the pre-loader was worth all of the problems it causes?

Yes. Yes, it is.

pre-loader-faster-web

Andy Davies wrote about how Google saw a 20% and Firefox a 19% increase in average page speed after implementing the pre-loader. Steve Souders thinks that “preloading is the single biggest performance improvement browsers have ever made.”

We can’t simply throw out that web performance boon in favor of responsive images.

Therefore, we have to find a compromise. The sizes attribute is that compromise. It provides just enough information for the browser to do its job.

Srcset and sizes = Smart browsers

Srcset and sizes provide all of the functionality you need for the resolution switching use case. They give the browser just enough information to allow it to make smart decisions.

Dog with glasses

But what happens when you need more control? What about art direction?

Next Tuesday, Responsive Images 101, Part 6: The Picture Element.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Footnotes
  1. How quickly we forget web-safe colors, Lynda Weinman‘s multiple books on web graphics, and the way different images formats compress. And it’s not getting any simpler. Images on the web are inherently complex.
  2. Super hero by Ashley Rose. Dog Intelligence by Alice Jamieson. Licensed under Creative Commons.

Responsive Images 101, Part 4: Srcset Width Descriptors

In Part 3, we looked at display density descriptors and concluded that they are great for fixed width images, but are insufficient for flexible images.

Flexible images is where srcset’s width descriptors shine.

Width descriptors

The syntax for width descriptors is similar to that of display density descriptors. The value of the srcset attribute is a comma-separated list of image sources and descriptors.

Srcset syntax with width descriptors. Repeated below.

The difference is that instead of having 1x, 2x, and other values representing the density, we now list the width of the image source such as 320w, 480w, etc.

<img src="cat.jpg" alt="cat" 
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">

The width of the image source can cause some confusion. Width descriptors are looking for the resolution of the source file.

In other words, if you open the image in an image editor, what does it say the resolution is? Grab the width and put it in the srcset attribute.

The browser picks the best source?

When you use width descriptors, you’re providing the browser with a list of images and their true widths so that it can select the best source. How does the browser do that?

Your first instinct is probably to say that the browser looks at the size of the element in the page and compares it to the list of source sizes. That makes sense, but it isn’t how the selection work.

See, when a browser starts downloading images, it often doesn’t know the size of the image in the page.

Browser pre-loader and speculative asset downloading

If you look at a timeline of how a browser renders a page, you’ll notice something striking.

AnEventApart.com Chrome timeline

Shortly after the browser downloads the HTML, it requests CSS and JavaScript. But before the CSS and JavaScript is done loading, the browser starts downloading images.

Because neither the CSS nor JavaScript is complete, the browser is downloading images without knowing what the layout of the page will be. And without knowing the layout, it doesn’t know what size the image element will be.

BTW, this pre-loading behavior is why we can’t solve inline responsive images using CSS or JavaScript. They aren’t available when the browser starts downloading.

The only thing that the browser does know is the size of the viewport. Once we move past display density descriptors, everything hinges on the size of the viewport.

Why does this matter?

The viewport can be a poor substitute for the actual size of the image. Take the images on Walmart’s Grocery site:

Small screen version of delivery.walmart.com showing that images are nearly full width of page.

On narrow viewports, the images are nearly the same size as the viewport width. They are certainly close enough to work.

Wider screens, however, are a different matter:

Wide screen version of delivery.walmart.com showing how images are much smaller than the viewport.

In the second example, the viewport is 1540px wide, but the images are only 254px wide. Knowing the size of the viewport won’t tell the browser enough information to be able to select the right image source.

Sizes to the rescue!

How do we tell the browser about the size of the image in the page so that it can download the right source from our srcset list? Use use the sizes attribute!

Read more in Part 5: Sizes.


Responsive Images 101
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints