Wednesday, June 1, 2011

Resize image using 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.
and more ... 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. Src sizes your images to the device that is requesting them, then caches and optimizes them for efficient repeat delivery. Src API
is very simple and ease of use. Just follow the documentation and remember the the full syntax of the API:[/data][/family][/format][/width[/height]]/url

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

Example 1: shrink it by 50%  (4550, 83*28px) (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

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"/>
  • width/height only accepts integer value
  • 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


  1. Did you know, If Sencha caches the image in someway?

    Because having the Highres file on the server will kill my bandwidth

  2. Hi There ,Just try this new and better performance website to reduce your image and speedup you webpage loading .

  3. We implemented the answer for e mail monitoring however at the moment are leveraging it to music incoming invoices as properly. helpdesk for schools