Posts by Eric Portis

The phrase “pics or it didn’t happen” has lost its credibility. As AI-generated content becomes more prevalent, distinguishing between real and fake has never been more challenging. This presents a significant problem: How can anyone be sure that what they see online is genuine and untampered? Many companies have focused…

Context Today, Users face multiple problems when arriving or simply using a website or app. One of these problems is quite significant, namely, network instability, causing the website or app to load slower. LQIP, Low-Quality Image Placeholder, and Lazy Loading are two…

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…

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…

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…

(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…

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,…

JPEGs, PNGs, and GIFs — oh my! Most web developers only learn which format to use through trial, error, and long experience, and not necessarily by fully understanding how these formats actually work. In this article, we’ll take a high-level look at each formats’ compression algorithms, in order to understand…

“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…

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…

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…

In part 1 of this interview, Jason Grigsby and I discussed how the industry came to understand the responsive image problem. Here, in part 2, we discuss today’s solutions — taking a particularly deep dive into the puzzle of “responsive image breakpoints.” EP: So, where are we, today,…

  Portland-based web developer Jason Grigsby co-founded Cloud Four. He’s a prolific writer and speaks about front-end development as thoughtfully as anyone in the business. He’s been writing about responsive images since there were responsive images to write about, and recently, he and I had a chance to sit…

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,…

Previously, we saw how to mark up performant, adaptable <img>s using srcset and sizes in conjunction with Cloudinary’s image transformations. How far can we push that notion of “adaptability”? Last time, we learned how to offer up an image at a range of different resolutions. This allowed us to…

The “responsive images” problem Five years ago, Ethan Marcotte coined the term “responsive web design” and gave it three defining ingredients: fluid grids, flexible media, and media queries. An essential part of this flexible media is the use of the srcset attribute in HTML, which plays a crucial role…