1

How can I convert fonts and images (assets in general) to data attributes?

Would assets load faster or slower this way?

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Francisc
  • 77,430
  • 63
  • 180
  • 276
  • Are you talking of [data attributes](http://ejohn.org/blog/html-5-data-attributes/) or do you mean [data URI](http://en.wikipedia.org/wiki/Data_URI_scheme)? – Jerome Jun 26 '11 at 20:37

3 Answers3

2

You should be aware that DataURI's are not supported by IE earlier than IE8. Also, IE8 has a limitation for at most 32KB of dataURI's in css assets. A more detailed description about DataURI's can be found at this blog post.

If you need the java implementation, you can find one here:

This allow you to transform all images into a base64 encoded uri in css files. For more details about how to integrate this implementation into your project, visit this page:

Disclosure: I'm affiliated to wro4j project.

Alex Objelean
  • 3,893
  • 2
  • 27
  • 36
1

Your pages would load slower because the data has to be downloaded with each request while a separate file can be cached. Try to keep usage of data uri's for small files only.

uri encoder for images: http://www.scalora.org/projects/uriencoder/

ZippyV
  • 12,540
  • 3
  • 37
  • 52
0

you can use FileSystem API's readAsDataURL meathod. But it only works in chrome for now.

Achshar
  • 5,153
  • 8
  • 40
  • 70