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…
- imgix offers it (powers Unsplash URLs)
- Cloudinary offers it
- Netlify offers it
- Image Optim offers it
- Filestack offers it
- Cloudflare offers it
- I’m sure there are tons more…
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.