3

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?

Justin Elkow
  • 2,833
  • 6
  • 28
  • 60

1 Answers1

4

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
Lex
  • 4,749
  • 3
  • 45
  • 66
  • +1, but I just wanted to mention that I ran some tests and [*svgo*](https://github.com/svg/svgo) is a thousand times better than scour at optimizing SVGs. Just give it a try, if you look at how many things it does it's just insane. The fact that it's Node.js instead of Python is just icing on the cake, too. – Camilo Martin Aug 29 '14 at 03:54
  • Also, depending on your logo's visual complexity, even the uncompressed SVG might already be smaller than the PNG (or the opposite :P) – Camilo Martin Aug 29 '14 at 03:56
  • Another note about animations: morphing SVG with something like a 2D or 3D transform is at least an order of magnitude harder than morphing a PNG (which is basically just a matrix transform). – Camilo Martin Aug 29 '14 at 07:01