tushuhei blog

How to take great advantage of Google image server

When we build a website, sometimes we want to resize images flexibly considering screen size, screen resolution (e.g. Retina display), lazy loading and so on. However, managing multiple sizes of an image file becomes painful sometimes even if task runners such as Gulp or Grunt are available. Is there any simpler and better way to handle image resizing? What if we can use a very powerful image serving server which supports simple image manipulation with fast file delivery? This article talks about how we can utilize Google image server to make our lives easier.

Google has the strong infrastructure to serve images with some image manipulation feature. It is supporting their own services like Google Photos. The hosted images are stored in the URLs with the form like: https://lh3.googleusercontent.com/.... By putting a parameter at the end of the URL, you can get the transformed images.

Manipulation Examples

Here's the original image uploaded to the image server.

Original

original

URL https://lh3.googleusercontent.com/P9Y...FAz

Resizing with width

By specifying =w100 parameter at the end of the URL, you can resize the image to the one with 100px width.

width 100px

URL https://lh3.googleusercontent.com/P9Y...FAz=w100

Resizing with height

By specifying =h100 parameter at the end of the URL, you can resize the image to the one with 100px height.

height 100px

URL https://lh3.googleusercontent.com/P9Y...FAz=h100

Cropping

You can also crop the image specifying c parameter. For example, if you want to crop the image with 400px width and 200px height, you can specify =w400-h200-c at the end of the URL. As you see here, you can combine multiple parameters actually.

cropping with 400px width and 200px height

URL https://lh3.googleusercontent.com/P9Y...FAz=w400-h200-c

Rotating

You can also rotate the image by specifying r parameter. Apparently degrees with 90, 180, 270 are supported. (That's enough, right?)

rotating 90 degree

URL https://lh3.googleusercontent.com/P9Y...FAz=w200-r90

Flipping

You can also flip the image by specifying f parameter. 'v' (vertical) and 'h' (horizontal) are supported.

Flipping vertically

flipping vertically

URL https://lh3.googleusercontent.com/P9Y...FAz=fv

Flipping horizontally

flipping horizontally

URL https://lh3.googleusercontent.com/P9Y...FAz=fh

The article "Uploading, Resizing and Serving images with Google Cloud Platform" also introduces other manipulation with s parameter, which can be a shorthand for width or hight parameter.

How to upload

Now we come up with a question: "How can we get that magic URL of the uploaded image?".

Without codes (2017-08-22 update)

The easiest workaround would be retrieving the shared URL from Google products. The detail direction is written in the article "How to obtain a direct link to an image in Google Photos for creating html image tag". Simply, you can share the photo on Google Photo and get the shared URL from the context menu or the browser's dev tool.

WIth some codes

For now, the only solution is uploading files by running some codes. If you prefer to upload the images by writing some codes, Cloud Storage can be good reference for general information about the image server. If you're looking at for some implementation examples, this Gist is useful to understand the implementation with GAE / Flask. Also, This post on Stack Overflow is useful to refer the implementation on GAE.

Conclusion

This article introduced how we can manipulate images using Google's image server. You don't need to write tasks in your task runner any more — upload, put parameters, done. I hope this article helps your web development!