Search code examples
svgbase64data-uridata-urldata-uri-scheme

Data URI ASCII, UTF-8, or base64


When including a Data URI in an HTML page, is it best to use ASCII, UTF-8, or base64?

I am using it for an SVG file which can be represented as any of these.

The UTF-8 (once URI encoded) is still a bit smaller than base64 when uncompressed, but are there other benefits (say on the CPU performance) to being in base64?


Solution

  • I was doing some tests related to this. In regards to frontend I think there will be very little difference apart from base64 requiring to be decoded before rendered. Server side the smaller the file, the less data to process, the less cpu used. With this I suspect UTF-8 would be the least CPU intensive server side.

    Some semirelated notes:

    In terms of file size svg wins over png when the server gzips.

    I've read there is a small cpu hit due to turning on server side gzipping. But the cpu gain from having to deal with less data out weighs having to gzip each file.

    SVG's are more processor intensive to render than png,jpg,gif, bmp etc. Bitmaps can just be rendered. SVG's need to be calculated, rasterized, then rendered. Something to be wary of when animating many or complex svgs.

    Some stats I found

    • logo png = 9.2kb -> gzip = 9.2kb
    • logo svg = 10.5kb -> gzip = 4.4kb
    • logo svg after using python scour to optimise svg = 9.4kb -> gzip = 3.9kb
    • logo svg url encoded = 10.9kb -> gzip 4kb
    • logo svg base64 encoded = 12.4 -> gzip 5.5kb