We should all be automating our image optimization
The problem statement:
When building an image heavy site — like a social network for photography enthusiasts — you’ll need to handle images well. To automate image resizing we started using Google Cloud functions and the trusty Imagemagick.
Image resizing should be easy to do if you’re just serving dynamic transformed images. But again — this is something you have to build and maintain forever. And fix vulnerabilities for. If you think about optimizing the image for even a little while, there are more challenges.
- How do you find the optimal encoding format? (jpeg, png, webp, etc.)
- How do you find the right compression settings? (lossy vs. lossless)
- Determine which metadata should be kept or stripped
- You’ll need to handle building multiple variants of each for each display + DPR resolution (for @2x and @3x)
- Do you account want to handle a user’s network type, speed, and preferences?
The best way to learn is from the experience of others.
While looking for resources on how to do this better ourselves. I found images.guide by Addy Osmani. A phenomenal book for any web developer who works with images. Go save it for reading later right now, please.
This book has learnings from Google, Facebook and 500px — amongst others.
It’s always surprising to me that any little facet of today’s world has someone’s lifetime spent. The Butteraugli score, for example, could be someone’s life work.
The Solution:
That’s when we decided to use Cloudinary. A media management solution which solves the optimisation challenges that we talked about earlier, along with ones that we didn’t know existed, and delivers the optimised media from a CDN.
The demo on their homepage is mental. The way you can manipulate images with just the URLs. That’s something we wanted right away.
The generous free plan is great to get started.
Where we use Cloudinary.
- Responsive images — Show smaller images to smaller devices. The picture element has made that job much easier. Now Cloudinary made it easier. We define the image URL with the size and quality needed.
- Client hints — Chrome and some mobile browsers support WebP — an image format by Google that gives smaller files. Cloudinary will convert our images to WebP — if they’re smaller then will send them over to browsers that support them based on cloud hints. More on client-hints here
- Placeholder images — For a better user experience, it’s a great idea to give users an idea that we are trying to load an image. We saw this feature on Medium where they show blurred image placeholders. It’s easy to implement — now we have a 10x10px transformed image as the placeholder before we show images. Check it out on a client’s site. https://getpepped.com/app/inspiration/wedding/2w5g7kxe1
Closing comment.
Instead of trying to solve image optimization yourself, try integrating a solution that works for you. We should all be automating our image optimization. #perfmatters
