#183: Art Directing Images, the Picture Element, and Image CDNs

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

It’s a bonafide phenomenon!

I’m talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. In other words, if you need multiple copies of an image in order to do justice for the responsive images syntax, you don’t have to make the images yourself — you adjust the URL so that you have the perfect image for the job.

This idea of manipulating the URL has made its way into tons of image hosting services. Let’s take advantage of what those services have to offer and do something above and beyond typical responsive images: let’s art direct them.

To put a point on how popular of an idea this URL-manipulation based image serving is…

We’ll use the <picture> element as the main workhorse here, and the imgix API for all the image variations. Here’s where we ended up in the video:

Oh, and here’s that weird HTML <base> element we touched on.