Eric loves images, learning through teaching and building, and most of all: the web. He brings years of experience exploring the frontiers of responsive design.
AVIF is a new image format for the web. Before I tell you all about it, let me show you what AVIF can do.
One way to compare image codecs is to encode the same image in different formats at matched file sizes and then compare the visual quality of the resulting images. For example, I rendered the AVIF below with a q_50 quality transformation. It weighs 12.3 KB and, compared to the lossless original it looks pretty good subjectively.
Responsive design turns 8 this year, and to celebrate, we asked experts from across the web industry a simple question: what does responsive design mean to you and your work, in 2018?
I’m fascinated by their answers. As many state, the technical aspects of responsive design – flexible grids, flexible media, and media queries – are more-or-less well understood, eight years in. But those simple-sounding ideas about CSS are still having far-reaching effects, which extend far beyond code. Below, you’ll read about responsive design’s impact on how individuals, teams, and entire organizations work and think. How should we model our content, now that it is responsively adapting to fit new and different contexts? How in the heck should we be prototyping and testing responsive designs? How can our teams and workflows be structured to better accomplish this new kind of work?
Welcome to the latest edition of the Responsive Images Guide!
In part 1, I laid out the big idea: a responsive image is a variable image – which adjusts itself to fit variable contexts.
In part 2, we looked at the most common way that an image can do exactly that: scaling itself up and down to fit viewports of different sizes and screens with different densities.
(Photo by Erol Ahmed)
A few weeks ago, Google officially announced a new JPEG encoder, called Guetzli.
Cloudinary has been tracking Guetzli since it was soft-launched in October; it has been amazing to watch news about it bubble up into the pop-tech press.
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!
In the conclusion of this three-part interview the Jason Grigsby, we examine what the future may hold for images on the web. Previously: Part 1, Part 2.
EP: I want to go back to the idea that we started with, that images are fundamentally complicated; that they’ll always present us with problems. What do you think we are going to be working on and talking about in five-to-10 years with regard to images?
