Sign Up | Login

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:

NameRequiredDescription
api_keyrequiredThe API secret key found in your account page
urloptionalThe URL that links directly to an image of a supported format
base64optionalAn image encoded as a base64 string
image_formatif using base64A supported image format
hexoptionalA hex background color value that will replace the alpha channel in a transparent png image e.g. ffffff for white.
rgboptionalA rgb background color value that will replace the alpha channel in a transparent png image, e.g. 255,255,255 for white.
output_formatoptionalDefault 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:

NameRequiredDescription
api_keyrequiredThe API secret key found in your account page
fileoptionalAn image file in one of the supported formats
urloptionalThe URL that links directly to an image of a supported format
base64optionalAn image encoded as a base64 string
image_formatif using base64A supported image format
hexoptionalA hex background color value that will replace the alpha channel in a transparent png image e.g. ffffff for white.
rgboptionalA rgb background color value that will replace the alpha channel in a transparent png image, e.g. 255,255,255 for white.
output_formatoptionalDefault 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>
    &lt;table cellpadding=0 cellspacing=0 height=10 width=10  
    bgcolor="#000000"style="font-size:0px;height:10px;width:10px"
    &gt;&lt;tr height=0&gt;&lt;td width=1 /&gt;
    &lt;td width=1 /&gt;&lt;td width=1 /&gt;&lt;
    td width=1 /&gt;&lt;td width=1 /&gt;&lt;td width=1
    /&gt;&lt;td width=1 /&gt;&lt;td width=1/&gt;
    &lt;td width=1 /&gt;&lt;td width=1/&gt;&lt;/tr
    &gt;&lt;tr height=2&gt;&lt;td colspan=10 bgcolor=
    "#000000" /&gt;&lt;/tr&gt;&lt;trheight=6&gt;
    &lt;td colspan=2 bgcolor="#000000" /&gt;&lt;td colspan=6
    bgcolor="#ff0008" /&gt;&lt;td colspan=2 bgcolor="#000000"/
    &gt;&lt;/tr&gt;&lt;tr height=2&gt;&lt;td
    colspan=10 bgcolor="#000000"/&gt;&lt;/tr&gt;&lt;
    /table&gt;
  </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