It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we've been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins.
Thrillophilia is India’s largest online tours and activities platform. Through its website and app, the company offers a one-stop solution for travelers looking for tours, activities and things to do. Users can choose from more than 10,000 activities in 200+ cities in India and 15 countries in Asia. Headquartered in Bangalore, India, the company was founded in 2011 and employs more than 50 people.
In Part 1 of this series, I discussed (rather abstractly) what it means for an image to be “responsive.” In short, a responsive image is a variable image that adapts to fit variable contexts, in order to provide a great experience to users no matter what their screen, browser, network connection, or device may be.
“Responsive.” Where did that term come from, anyways?
In his sea-changing essay, Responsive Web Design, Ethan Marcotte explained:
Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. … rather than creating immutable, unchanging spaces … inhabitant and structure can—and should—mutually influence each other.
Note: this article was originally published in Smashing Magazine.
Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive images breakpoints? A year later, he had an answer: ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size”. Cloudinary built a tool that implemented this idea, and the response from the community was universal: “Great! Now – what else can it do?” Today, we have an answer: art direction!
Back in the day, responsive website design wasn't the business imperative that it is now. In fact, just having a functioning website was all that it took to set you apart, and if it had images that loaded correctly within a few minutes, then that was a nice bonus. Needless to say, but I'll say it anyway, those days are long gone.
Websites have evolved greatly over the past few years. Once text-heavy websites have become more eye-catching with prominent images and video. But the addition of richer media isn’t the only change impacting websites. Consumer behavior also factors into this evolution, as web access has moved from the desktop realm to a variety of different devices – smartphones, tablets, laptops, smartwatches and TVs – with different dimensions and resolutions. And consumers want to be able to access web content anytime and from any location.
To ensure that website performance is optimized, bandwidth usage is minimized and users have a top-notch experience, we will need to address many challenges.
High resolution images and videos
If a picture is worth 1,000 words, it’s no surprise that website owners are using images and videos as powerful tools on their websites to engage visitors. High-resolution images look best, but these files are so big that they cause websites to load slowly and use excessive bandwidth. These problems frustrate visitors, and potentially decrease their incentive to engage further on the website.
This is a guest post by Nicolas Hoizey, co-founder of Clever Age and creator of the Jekyll Cloudinary plugin. Nicolas’ plugin leverages Cloudinary’s image storage, optimization, resizing, and delivery infrastructures to automate responsive images in Jekyll-generated static sites. We think it’s the bee’s knees, and invited Nicolas to write a bit about the process and motivation behind it. Without further ado, here’s Nicolas.
I'll start by giving it to you straight:
As part of the recent "auto–everything" launch, we introduced two new transformation parameters – dpr_auto and w_auto, which pair the DPR and Width Client Hints with Cloudinary’s existing image resizing and delivery infrastructure, in order to serve up simple, automatic responsive images.
This is a guest post by Eric Portis – a proud member of (and newsletter-writer for) the Responsive Issues Community Group. The RICG formulated, championed, and standardized the new HTML features presented in the article.