API Documentation
The Img to CSS API allows image conversion through simple HTTP requests. This documentation explains how the requests should be sent and how to interpret the response.
If you have any questions, please email them to daniel@imgtocss.com.
Overview
The API accepts GET and POST requests to "http://www.imgtocss.com/api". By default, it returns its response in JSON format, but it can also return XML or HTML. JSON and XML include error messages while HTML indicates errors by returning no image.
All API requests require an API key that is available to paying users in their account page. Click here if you would like to learn more about purchasing an account.
GET Requests
A GET request accepts the following parameters:
| Name | Required | Description |
|---|---|---|
| api_key | required | The API secret key found in your account page |
| url | optional | The URL that links directly to an image of a supported format |
| base64 | optional | An image encoded as a base64 string |
| image_format | if using base64 | A supported image format |
| hex | optional | A hex background color value that will replace the alpha channel in a transparent png image e.g. ffffff for white. |
| rgb | optional | A rgb background color value that will replace the alpha channel in a transparent png image, e.g. 255,255,255 for white. |
| output_format | optional | Default is json. Accepts xml and html. |
The data should be submitted to http://www.imgtocss.com/api
In a GET request, all parameters must be URL encoded. For example "+" should be replaced with "%2b".
Click here to see examples.
POST Requests
A POST request accepts the following parameters:
| Name | Required | Description |
|---|---|---|
| api_key | required | The API secret key found in your account page |
| file | optional | An image file in one of the supported formats |
| url | optional | The URL that links directly to an image of a supported format |
| base64 | optional | An image encoded as a base64 string |
| image_format | if using base64 | A supported image format |
| hex | optional | A hex background color value that will replace the alpha channel in a transparent png image e.g. ffffff for white. |
| rgb | optional | A rgb background color value that will replace the alpha channel in a transparent png image, e.g. 255,255,255 for white. |
| output_format | optional | Default is json. Accepts xml and html. |
The data should be submitted to http://www.imgtocss.com/api
Click here to see examples.
Response Output
If output_format is not specified, json is returned by default. There are two values: "error", which will be null if there were no errors and "image", which returns the html/css image.
Example
{"image": "html/css image", "error": null}
If xml is passed as the output_format, then xml is returned. There are two values: "error", which will be an empty tag if there were no errors, and "image", which returns the html/css image. These two values are wrapped in the tag "output".
Example
<output><error /><image>html/css image</image></output>
If html is passed as the output_format, then the resulting html/css image is returned. This has the advantage of requiring no processing, but does not return any error messages. If there is an error, then an empty html file will be produced.
Supported image formats
Img to CSS will convert the following image types:
'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'ico', 'png'
PNG images are currently the only image that can handle transparency properly.
Examples
For our examples, we will convert this red square, which has a transparent background: 
We will use the made up API key "4aaceb".
URL example
We pass the url
http://www.imgtocss.com/api?api_key=4aaceb&url=http://www.imgtocss.com/assets/images/red_square.png
The output is json by default, so we get:
{"image": "<table cellpadding=0 cellspacing=0 height=10 width=10 style=\"font-size:0px;height:10px;width:10px\"><tr height=0><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /></tr><tr height=2><td colspan=10 bgcolor=\"#000000\" style=\"opacity:0;filter:alpha(opacity=0)\" /></tr><tr height=6><td colspan=2 bgcolor=\"#000000\" style=\"opacity:0;filter:alpha(opacity=0)\" /><td colspan=6 bgcolor=\"#ff0008\" /><td colspan=2 bgcolor=\"#000000\" style=\"opacity:0;filter:alpha(opacity=0)\" /></tr><tr height=2><td colspan=10 bgcolor=\"#000000\" style=\"opacity:0;filter:alpha(opacity=0)\" /></tr></table>", "error": null}
Base64 encoded with xml output and rgb background color
The red square can be encoded as the following base64 string. Note that it must be url-encoded when passed as a url parameter (e.g. plus signs should be replaced by %2b):
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D%2bPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAP8ACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKRwvz4AAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS44NzuAXQAAABtJREFUGFdj%2bA8HDChMRjD4/x8oSiYTZhySuQC7LT/lQrga8wAAAABJRU5ErkJggg==
We must set image_format to png because we are using a base64 encoded image. We want xml output so we set output_format to xml. We also want a black background, so we will set the rgb value to 0,0,0.
The resulting url is:
http://www.imgtocss.com/api?api_key=4aaceb&output_format=xml&rgb=0,0,0&image_format=png&base64=iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D%2bPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAP8ACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKRwvz4AAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS44NzuAXQAAABtJREFUGFdj%2bA8HDChMRjD4/x8oSiYTZhySuQC7LT/lQrga8wAAAABJRU5ErkJggg==
We set our output to xml, so we get
<output>
<error />
<image>
<table cellpadding=0 cellspacing=0 height=10 width=10
bgcolor="#000000"style="font-size:0px;height:10px;width:10px"
><tr height=0><td width=1 />
<td width=1 /><td width=1 /><
td width=1 /><td width=1 /><td width=1
/><td width=1 /><td width=1/>
<td width=1 /><td width=1/></tr
><tr height=2><td colspan=10 bgcolor=
"#000000" /></tr><trheight=6>
<td colspan=2 bgcolor="#000000" /><td colspan=6
bgcolor="#ff0008" /><td colspan=2 bgcolor="#000000"/
></tr><tr height=2><td
colspan=10 bgcolor="#000000"/></tr><
/table>
</image>
</output>
Once the response is processed, we will have this html/css image: Further Questions
If you have any further questions, don't hesitate to email me at daniel@imgtocss.com
