Uploading, Resizing and Serving images with Google Cloud Platform

More and more applications today require their users to upload photos. From simple things like updating a profile photo, to more complicated services like Snapchat where you share a bunch of them. These applications are running on all kind of devices with different resolutions and at different network conditions. In order to do it right we have to deliver the images as fast as possible, with the best available quality, taking into account the targeted device and screen resolution.

One option is to create an image service yourself, where you can upload the images, store them and possibly resize them in few different sizes. Unfortunately, doing so is usually very costly in terms of CPU, storage, bandwidth and can end up very pricy. It is also quite a complicated task and many things can go wrong.

By using Google App Engine and Google Cloud Storage though, you can easily achieve this seemingly difficult task by using their API. Start by completing a simple tutorial on how to upload files into the cloud and read the rest if you want to see it in action to understand why it’s one of the coolest things ever.

The Function

App Engine API has a very useful function to extract a magic URL for serving the images when uploaded into the Cloud Storage:

get_serving_url()
Returns a URL that serves the image in a format that allows dynamic resizing and cropping, so you don’t need to store different image sizes on the server. Images are served with low latency from a highly optimized, cookieless infrastructure.

In practice it’s the same infrastructure that Google is using for their own services like Google Photos. The magic URLs usually have the following form: http://lh3.googleusercontent.com/93u...DQg

A few details about this magic URL

  • By default it returns an image of a maximum length of 512px (link)
  • By appending the =sXX to the end of it where XX can be any integer in the range of 0–2560 and it will result to scale down the image to longest dimension without affecting the original aspect ratio (link=s256)
  • By appending =sXX-c a cropped version of that image is being returned as a response (link=s400-c)
  • By appending =s0 (s zero) the original image is being returned without any resize or modification (link=s0)
http://lh3.goo…DQg
http://lh3.goo…aDQg=s256
http://lh3.goo…DQg=s256-c

If all that wasn’t enough for what’s coming out of the box, there are also no charges for resizing the images and caching them when using that Google’s magic URL. Yes, you read it correctly, this is a free of charge service and you pay only for the actual storage of the original image.

Summary

You don’t have to worry about anything when it comes to serving images for your next big idea today. All you need to do is to upload your images once, extract the magic URL and then use it directly on the client-side by updating the arguments depending on the environment. Prototyping applications similar to Snapchat or even more complicated ones could be implemented over a weekend.

Try it yourself

Besides the already mentioned tutorial from the documentation, you can play with a live example on gae-init-upload (which is based on the open source project gae-init).

Credits

The photo in the example is taken by Aleksandra Kiebdoj.

Like what you read? Give Lipis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.