Category: responsive images

An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-qua...

The Four Big Ways Jetpack Helps with Image Performance

We’ve been working with Jetpack around here as a sponsor. It’s a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here’s one way to think ...

w descriptors and sizes: Under the hood

Eric Portis digs into how the browser decides which image to downloads when you give it <img srcset="" sizes"">. Notably, a browser can do whatever it wants: Intentionally un-specified behavior lets browsers provide innovative answers to an open-ended question. Still, calculations happens based on what you give ...

Let The Content Delivery Network Optimize Your Images

    Sometimes you have to step back and ask why a tradition exists. In mobile-first design, serving an image in three sizes — one for smartphones, one for tablets and one for desktops — using media queries and responsive ...

Responsive Images in WordPress with Cloudinary, Part 2

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native ...

Responsive Images in WordPress with Cloudinary, Part 1

If you’re reading this, you’re probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we’ll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web’s existence, any time you wanted to include an image ...

The “Optimal Image Format” for Each Browser

Perhaps you’ve heard about the WebP image format? And how it’s a pretty good performance win, for the browsers that support it? Well that’s only for Blink-based browsers, at the moment. Estelle Weyl’s article Image Optimization explains the best image format for each browser: Browser Optim...

Exporting Images in Multiple Resolutions Simultaneously

No surprise to any of y’all: screens come in a whole lot of different sizes and pixel densities these days. The technology behind dealing with that is catching up. For example, responsive images. So, we need software to help us generate those many versions of images we need. Thankfully, all the most popular desi...

Responsive Images in CSS

The term “responsive images” has come to mean “responsive images in HTML”, in other words, the srcset and sizes attribute for <img> and the <picture> element. But how do the capabilities that these things provide map to CSS? CSS generally wasn’t really involved in the responsi...

Responsive Image Breakpoints Generator

I’m guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same “desktop”, “tablet”, “mobile” thinking I can also be guilty of with breakpoints. Soooo what is the perfect way ...