Manipulate images on the fly with CloudImage
October 10, 2020
One of my client's requests for https://fetedelascience-paysdelaloire.fr/ was to display the Instagram feed of the event on the homepage. Facebook having recently changed its API to the Instagram Graph API, fetching hashtag-related images required some tricks (Netlify functions FTW) but the feed eventually appeared nicely on the page.
However, while optimizing the code through Lighthouse, I noticed Instagram was serving fairly heavy images, which significantly impacted the loading time and the audit score. I was using Gatsby but couldn't use our beloved Gatsby Image plugin to manipulate the images since fetching was happening in the browser.
This is how a discovered CloudImage, a really nice proxy service allowing you to resize, scale and manipulate your images on the fly. All you need is the image's url!
Imagine your image is located at https://my-image.jpg
You simply have to run it through the CloudImage proxy and apply the needed modifications. Here, I resize the image to width: 400px and turn to black and white.
1<img src="https://test.cloudimg.io/v7/my-image.jpg?width=400&grey=1"/>They have a very generous free tier, tons a features and a great dashboard to follow your usage. An excellent tool for serverless lovers!