Divya Manian

RSS Feed Youtube Channel Github

Using Data URIs in CSS

Chris Hills brought Data URIs to my attention in a comment on my post on web fonts. I had not thought about using Data URIs in CSS at all, but others have.

Data URIs allow any file to be embedded inline within CSS. Here is an example of a Data URI:

    
    span.button {
        background:url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%04gAMA%00%00%D8%EB%F5%1C%14%AA%00%00%00%20cHRM%00%00n%20%00%00r%EC%00%00%F7I%00%00%84%FA%00%00o%83%00%00%E8!%00%001%BA%00%00%17%89%0FO%F3%95%00%00%02%17IDATx%DA%9C%93%B1N%DB%60%14%85%3FCH%93%105(U%91%CA%D0%20%86H%9D%9A%A5b%23%EE%134oP%18%EC%81%2C%3C%02%8F%90%0EV%8534%7D%83%F4%0D%D2%BDj%93%AD%88%A5%0D%86%E0%10'.%B1%0D6%8E%DD%A1%BF%2B%20%E9%D2%23%FD%CB%D5%3D%E7%DE%7B%FE%7B%A58%8E%01%90%24%89%04%AA%A6T%81%03%40%06%D6D%B8%0B4%F4z%F3c%92%17%C71%D2C%01US%DE%02%AD%E2%93%22%A5%E7%252%99%0CQ%14a%9A%26%FD~%9F(%8AZz%BD%B9%A7j%CA%CB%A3%7D%BDwO%40T%EE%94%CBe%96V%24%EC%A9M%1CEd%1EeyZ%5C'%08%02%8E%BF%1F%E3%FB~%07%90%8F%F6ui%89%FB8(%16%8BL%DD)'''X%17%16%8E%ED%12%FA!%D6dD6%9Bekk%8B%E5%95e9!%3C%14%A8%8D%C7c%7Bp68%9C%05QES%DEK%AE%E3%C9g%C6y%7B8%18b%0CNy%5C(%B0%FDj%FB%2F!%F5%40%A0%0B%D4%F4z%F3g%12%D0%EB%CD%CF%AA%A6l%BA%AEWc%05n%A3%80r%E9%C5%BC%80%AA)%1F%80%06%60%DFU%14%BE%B4%00%FCk%1F%3F%B8%E1%AB%F7ea%07%BB%E2%A1jJ%17h%03m%D1A%05%90C%7FV%03%E4%D0%BB%5E%3C%C2%CEN%95%20%F0q%1C%A7b%18F%C5%B6%EDCUSjz%BD%F9%09%E8%01%EFTM)%88%FD%A8%CD%99%D8%3B%FE%86%EB%3A%A4%D3%E9%24%D4%10d%EEx%F2K%F8%B47%D7%81%7B%E30%BE%B2%C8g%F3%84%B3%10%A0%A2jJU%8C%91T%DE%15%D5%E7%05fn%C4hf%91ZO%B1%B1%F1%0C%C7q%E4%D1%C8%EA%A8%9A%02%12%AC%E6s%C41x%8E%D7%5D%E8A%1C%D2%F1%9D%40%1E%A5%2C%D6%0A%05r%B9%1C%A5%D2*11ax%CB%95%3BelN%10%06%CF-%D2%A6%5Eo%BE%06Z%AE%EDqyiaNLL%FB%82%B3%A1%C1%E9%B9%91%90%BB%E2%BB%FF%9C%C0%3F%AE%F1%CD%9DY%13%FC%10%FB%D0%10F%DE%BF%C6%FF%C5%EF%01%00%14%B1%11%2C%14%88%CF%E0%00%00%00%00IEND%AEB%60%82);
    }

See how it looks

Data URIs are always of this format:

    data:[<mediatype>][;base64],<data>

mediatype can be any of the Content Types. The Content Types most useful for CSS are:

  • font/opentype
  • application/x-font-ttf
  • image/png
  • image/gif
  • image/jpeg
  • image/svg+xml

Data URIs can be used in the CSS in many ways.

Embedding Images in CSS

Any CSS property that uses the src function can use Data URI scheme to embed data. This means, you can embed a CSS sprite like:

.button {
    background:url(data:image/png /*embed code */)
}                                               

.button.active {
    background-position:0 -40px;
}                         

.button:hover {
    background-position: 0 -20px;   
}

See a demo of embedding images with data URI scheme

This only works on Firefox 2+, Opera 7.2+, Chrome, Safari, IE 8+. For earlier IE versions, you can use a MHTML workaround in your IE-specific stylesheet.

Embedding Web Fonts in CSS

Most browsers allow fonts to be embedded using Data URI scheme.

Robert Accettura wrote a great article investigating Data URLs in @font-face. His demo page renders the embedded fonts correctly in Opera 10, Firefox 3.5, and Safari 4.

IE 8 (the only IE that supports data uri scheme), for security reasons, allows only images to be embedded inline, so @font-face will not render embedded fonts.

Advantages

Drawbacks

  • Large file sizes. Embedded images work best with small images like icons and arrows. Rob Flaherty has done some excellent research into real-time performance of inline embedding.
  • Not easy to maintain. Any change to the image or font needs to be added correctly to the CSS.
  • Comments