Cloud Four Blog

Technical notes, War stories and anecdotes

Responsive Field Day Speakers, Tickets and Community

Late spring. We are now officially entering the marvelous season in Portland. That means gorgeous weather and cheerful citizens from now well into October. This part of the year is why everyone wants to be here. Let’s forget about the rest of the year (hint: dim, misty). Let’s just talk about the wonderful things.

Like Responsive Field Day, this September 25 (Friday) at Revolution Hall here in marvelous-season Portland. We announced the event back in March, but now it’s time to up the ante with some real details.

Responsive Field Day

Speakers

The first half of our confirmed speaker roster looks like a dream team of responsive all-stars.

  • Stephanie Rieger, consummate researcher whose humanist talks explore anthropological and technical realms
  • Ethan Marcotte, who, you know, invented Responsive Web Design. And who also weaves a riveting presence in his talks.
  • Jeremy Keith, whose impact on web practices are legion, and who spices up the discourse on any panel.
  • Yesenia Perez-Cruz, who synthesizes her talents in writing, communication and graphic arts for a nuanced perspective on responsive challenges.
  • Jen Simmons, whose powerhouse weekly podcast _The Web Ahead_ is on the required listening list for those who build the web.
  • Brad Frost, whose bounding enthusiasm and thought leadership have helped to lead us toward a clearer responsive future.

And that’s only the first half! We’re kind of giddy with excitement right now. Stay tuned: we’ll announce the rest of our speakers soon.

Tickets and Community

Tickets will go on sale soon. They’ll be $175. We are keeping ticket prices low so that more of you can join us.

Any proceeds from the event will be donated to programs that support open web technologies, the tech community and education.

The whole Cloud Four crew hopes you can join us for Responsive Field Day!

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 Field Day Portland!

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

That’s why I’m so thrilled to announce that we’re bringing the Responsive Day Out format to Portland!

Responsive Field Day

We’re calling it Responsive Field Day. It is a one-day conference on responsive design. It will take place on September 25 at Revolution Hall.

We plan to continue the spirit of the Brighton event where Jeremy famously said that “every expense has been spared.” So you can be certain the event will be affordable and inclusive.

Lyza, Aileen and I are traveling to Brighton for Responsive Day Out 3: The Final Breakpoint to watch the masters and learn how to make Responsive Field Day a success.

We’ve already got some fantastic speakers lined up. We’re not ready to announce the lineup yet though, so you’ll have to trust us when we say, “OMG! OMG! I can’t believe they said yes!

So mark September 25th on your calendar and start planning your trip to Portland. Sign up for email or follow us on Twitter to receive updates when the speakers are announced and tickets go on sale.

Finally, thanks so much to Jeremy and Clearleft for inspiring us and sharing what they’ve learned.