Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Base64 encoded images inside json file


geros
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...