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-quality placeholder images
  • Responsive images syntax (srcset)
  • Image formats (e.g. using WebP when you can)
  • Click-to-load on bad network connections
  • Better UX for loading errors, with translatable copy

That's not even all of it. So much to think about with poor little <img>. I enjoyed Alejandro Sanchez's response:

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 about it: it brings the power of WordPress' own massive servers to you.

For now, let's just focus on one angle of what Jetpack can do for you: image performance. Jetpack does a ton for you in this regard, solving some non-trivial performance upgrades. Let's take a look at what I see as the four big boosts you get from Jetpack on your images.


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 happen based on what you give it and you can still do a good job with that part.

The very weirdest part about all this is that the sizes attribute can alter an images "natural width", which can lead to unexpected upscaling, a thing we're trained to loathe. If you're in that situation, you can either...

  • use an inline width attribute
  • set an inline style with a max-width
  • embrace the fact you might experience occassinal upscaling

#155: Responsive Images, WordPress, and Cloudinary

Eric Portis joins me to dig into the world of responsive images.

We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in the overall weight of websites. If we can avoid sending too many pixels across the network, we should. After all, a screen that is only 720 pixels wide doesn't need a 2000 pixel wide image, even if it's a 2x display.


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 image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.


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 Optimal image format
Chrome WebP
IE 9+ / Edge JPEG-XR
Opera WebP
Safari JPEG-2000

And you can serve these formats through the <picture><source type=""> syntax.

Couple that complexity with the complexity of responsive images, and it really seems like outsourcing image delivery to a dedicated service seems like the way to go. At least above a certain scale.

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 design software is starting to accommodate that need. Adobe Photoshop, Adobe Illustrator, Sketch, and Affinity Design all have pretty solid workflows for doing just that. I cover all those in this post over on the Media Temple blog.