senthilp/ImageURIGen
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
-------------------------------------------------------------------------------
About
-------------------------------------------------------------------------------
Prerequisites: PHP5, php5-curl package, apache
ImageURIGen (Image Data URI generator) is a simple web service which generates
base64 encoded image data URI response in JSON format for a given set of image
URLs. The image URLs can be passed as HTTP GET or POST query string parameters.
Internally the web service reads the image URLs from the query string, makes
curl (HTTP) calls to the image hosting servers, does a base64 encoding on the
curl response, builds a JSON array and sends back the JSON response.
This technique would be extremely performant efficient when multiple HTTP
calls need to be made from the browser to fetch dynamic images which cannot
be previously sprited. Typical use cases would be displaying buddy images
in a chat client or social applications, images of items uploaded by users
in commerce sites, photo sharing sites etc. which are dynamic and decided on
run time. Now with this technique, instead of making individual HTTP calls
for images all of them can be combined into a single request to the
ImageURIGen web service which will return the complete list of data URIs,
which can then be set using JavaScript. Ideally all dynamic images coming
below fold in the page can leverage this technique. Even servers can call
this webservice directly and build the page with URIs.
Sample request and response
Request:
http://hostedserver/services/urigen.php?params={"images":["http://images.apple.com/mac/home/images/productbrowser/macbookpro.jpg","http://p.ebaystatic.com/aw/pics/logos/logoEbay_x45.gif"]}
Response:
{"data":[
{"url":"http:\/\/images.apple.com\/mac\/home\/images\/productbrowser\/macbookpro.jpg"","uri":"\/9j\/4AAQSkZJRgABAgAAZABkAAD\/........5AQEBAQEBAQEBAQEBAQEBAQEH\/\/z"},
{"url":"http:\/\/p.ebaystatic.com\/aw\/pics\/logos\/logoEbay_x45.gif","uri":"R0lGODlhbgAtANUAALIAJpnMAAAAmczl.......B4NmdQZTJ5QUFBQUFFbEZUa1N1UW1DQw=="}
]
}
Enhancements:
1. Currently the service makes all curl calls sequentially, which is not
an efficient way and can result in slow responsiveness. These calls can
be made parallel using libraries like Pluton
http://markdelany.github.com/Pluton/1.0/index.html
2. The web service needs a caching mechanism to avoid repetitive CURL
calls for the same images again. The image URLs can be maintained in a
hash with the corresponding URIs. Also a cache busting mechanism needs
to be in place based on the image response headers
3. If images are hosted by the same publisher who hosts the web service then
the images can be maintained in the same web server as the web service (or
vice versa) and totally avoid CURL calls. Subsequent disk reads can alos be
avoided if caching mechanism is setup
4. Cache headers sent in the final web service JSON response itself can be
tweaked in accordance with the actual image cache headers to maximize the
usage of browser cache
Limitation: IE6 & IE7 do not directly support image data URI, a
possible technique is explained here http://www.phpied.com/inline-mhtml-data-uris/
but I would not recommend it.