Search code examples
htmlcssassetscontent-encoding

HTML & CSS: Turn fonts and images into data strings


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

Would assets load faster or slower this way?


Solution

  • 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.