Smashing Conference

Responsive Images


Full-day workshop • Dec. 9th Images are the major hurdle in your path to create fast responsive designs, and sending the right images to the right devices without introducing extra latency have been a near-impossible task for a long while now.

Luckily, that is no longer the case. A native responsive images solution is now implemented and shipped in most major browsers, and there's a polyfill in place that would help you handle the other one. But how do you use that new syntax?

What you'll learn:

  • The history that led us to the current responsive images solutions, and why previous hacks and techniques were not cutting it.
  • The various use cases of the responsive images problem and which parts of the syntax you would need to solve them, accompanied by detailed examples:
  • Device pixel ratio based selection: We would see how we can easily send high resolution images only to high resolution devices that actually need them.
  • Variable width images: In many RWD sites, the image dimensions we display our users on smaller screens are not the same as the ones they see on larger ones. We'll see what part of the syntax enables us to give the browser that information, so that it can download the resource that best fits the displayed dimensions.
  • Art direction: in some cases, you'd want to tailor the image to fit the different layouts of the different responsive breakpoints. Either some cropping to render the subject more clear, different proportions that sit better inside the layout, or a different angle of the image altogether. We'll cover the syntax that allows you to easily do that.
  • The best practices (and what to avoid) when it comes to the new syntax.
  • The various image formats out there, and what each one of them is good for.
  • Image compression best practices, and what open-source tools you can integrate into your workflow to make sure your images are as slim as they can be.
  • How to integrate responsive images into your workflow, for both static images and user-generated ones
    The workship will also include hands-on quiz and excercises to see how it all comes together.

What prerequisites skills do you need?

Basic understanding of HTML, CSS and Responsive Web Design.

What hardware/software do you need?

A laptop with the latest Chrome/Firefox installed, as well as your favorite text editor.

Who is it for?

This workshop is geared toward web designers and developers involved in the design process. You should at least know a little HTML and CSS.

On the Web
On Twitter
Workshop includes
  • Snacks and drinks during the whole day
  • Tea and coffee
  • Lunch
  • Paper and pen/pencil

Sponsors & Partners