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!

Next step?

Let's work together!

If you'd like to talk about a project or need advice about product and ideation , simply drop me a message. I'm currently available for development projects, entrepreneurial gigs or speaking events.

You can also find me on:

  • github icon
  • linkedin icon
  • twitter icon

© 2020, Paul Gaumer