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

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.