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
It is supporting their own services like Google Photos.
The hosted images are stored in the URLs with the form like:
By putting a parameter at the end of the URL, you can get the transformed
Here's the original image uploaded to the image server.
Resizing with width
=w100 parameter at the end of the URL, you can resize the image
to the one with 100px width.
Resizing with height
=h100 parameter at the end of the URL, you can resize the image
to the one with 100px height.
You can also crop the image specifying
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.
You can also rotate the image by specifying
Apparently degrees with 90, 180, 270 are supported. (That's enough, right?)
You can also flip the image by specifying
'v' (vertical) and 'h' (horizontal) are supported.
"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,
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.
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!