Manipulate images on the fly with CloudImage

October 10, 2020

One of my client's requests for 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=""/>

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

© 2023, Paul Gaumer