Base64 encoded images inside json file

[geros]

Hi all, 

I am researching some things for my current job (html5 games-phaser) and i encountered a very interesting implementation in an online game (not sure if they use an engine).

The have a json file like JSONHash but instead of serving the images as pngs the have inlined those as base64 encoded. 

Having a structure like the one below:

{   "sprite_key": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAABN ..."   "sprite_key2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAABN ..."    ....    ....    {     "sprite_key":{        "frameWidth": ...        ....      }     }}

I am struggling to understand the reasons to implement it that way and because i am not sure at all, i though i should ask the community for an opinion

[drhayes]

If the image is below a certain threshold it makes sense to inline into another resource (JSON, as you saw, or the JS directly) to keep the number of separate TCP connections the browser needs to make to download the app/game down. The time cost of making the connection can exceed the time to download the resource; in that case, inlining solves that by "packing" the resources together.

 

HTTP/2 (SPDY) is going to help with this a lot since it lets browsers and servers put multiple resources into a single HTTP connection without any image spriting or resource packing or what-have-you.

 

That'd be my guess. It's kinda tricky because base64-encoding things can swell their size up by around 30%.

[Skeptron]

Funny. I found this website to do it easily : http://b64.io/

 

It can improve perfs a little, but it might make any change a pain in the ass.... At least I guess.

[drhayes]

I don't mean tricky to do (browsers can do it via atob and btoa), I mean tricky to achieve a win across the time vs. size vs. browser request metrics.