Resize image using Sencha.io Src

If we google "resize image online", there are many web sites/utilities providing image resizing capability, but it is kind of manual process with three main steps: upload, configure and resize, then download image. Some sites provide advanced options like rotate/crop/effect etc, but they are all web based image processing tool.
www.shrinkpictures.com/
www.resizeyourimage.com/
www.picresize.com/
resizepic.com/

and more ...

Sencha.io Src provides Optimized Fast Image Delivery, which is very cool. Here is its production introduction: Put a single high resolution image on your server, point your IMG tag to Src and let the cloud take care of the rest. Sencha.io Src sizes your images to the device that is requesting them, then caches and optimizes them for efficient repeat delivery.

Sencha.io Src API is very simple and ease of use. Just follow the documentation and remember the the full syntax of the Sencha.io API: http://src.sencha.io[/data][/family][/format][/width[/height]]/url

Here are two examples using iGoogle logo (small version, original size 8393 bytes, width*height=166*55px):

http://g0.gstatic.com/ig/images/igoogle_logo_sm.png

Example 1: shrink it by 50%

http://src.sencha.io/83/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png  (4550, 83*28px)

http://src.sencha.io/x50/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png (which is to shrink to 50% of the screen rather than 50% of the original image)

Example 2: shrink it to 1/4 of original size and get data URIs

http://src.sencha.io/data/42/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png

It will return the base64 data URI which is a way to save one HTTP request for very small image in terms of Web performance. The HTML code looks like <img id="img1" src="data:image/png;base64,thebase64data"/>

Notes:

• width/height only accepts integer value
• Sencha.io will only shrink images. It will not enlarge them.
• Subtraction sizing and Percentage sizing are relating to computer/device screen
• family sizing is now a legacy technique, use adaptive sizing instead. 
• For charts showing common mobile device screen sizes, you are recommended to take a look at dotMobi’s DeviceAtlas which provides up-to-minute device detection data for mobile development