Better png output into web pages

[damageboy]

Currently the png output from charts is set to 500x300px, this isn't a very useful setting...

It would be great if perhaps a few different resolutions would be generated for .png files, and some sort of dynamic .js file could be used to select the correct one according to pixel density and over-all resolution.

This should be easy enough to implement with the new picture element:

https://developers.google.com/web/fundamentals/media/images/images-in-markup#art-direction-in-responsive-images-with-picture

[tpetricek]

This would be a nice feature to add - as long as the picture element (or other way of doing this) is reasonably cross-platform.

[damageboy]

It isn't right yet, which is why I'm looking for some sort of js lib to do it for xplat...

picture seems to be chrome+ff only for now, not even planned for safari + IE

[damageboy]

picturefill.js seems to provide the right level of bowser support: http://scottjehl.github.io/picturefill/

[tpetricek]

I suppose that F# Charting does not let us save the picture as SVG...

Anyway, I wonder if producing one large image would be sufficient here? Because typical charts probably compress pretty well, so having one large version PNG file does not sound like a big problem (though we need to tweak the HTML to make it fit nicely - or we could make it clickable with a zoom effect).

[damageboy]

I guess that just generating a large image would also do, I was assuming that the generated html would be, at some point, served from a web-server, which is why I though that uses reponsive images would be useful... You're the project owner, so... pick an option... :8ball:

[damageboy]

How about this: http://matiasgagliano.github.io/guillotine/

[tpetricek]

Can you try how big the PNGs would be on a couple of sample charts?

I suspect that the compression will work quite well as there will typically be large areas filled with the same colour. But if the file size of large resolution file is notably bigger, then we should definitely use one of the fancier tools (we already use MathJax, so having more JS would be fine).

If we generate a PNG that is, say 1000x600px rather than 500x300px, what is the file-size increase?

[damageboy]

I generated PNGs that were 1200x720 (i.e. "HD") and the PNG size for 4 charts increased from 40 KB to 120KB, I guess you could call that a satisfactory fix...

Do you want me to make a pull request out of it, or do you want to just change it yourself...

[tpetricek]

I suppose that would be good enough - though I quite like the <picture> idea!

If you can do this change (as a starting point), that would be great. I think we'll also have to tweak the CSS so that the image is automatically resized to fit into the page.

[damageboy]

I'll make a PR out of this... I've tested it on my machine, it appears bootstrap is already applying some .css to these images, so my 1200x720 images are being resized, for example to 970x582 by the img css coming from bootstrap-combined.min.css like this:

Do you want an additional css rule to be applied? As far as I'm concerned this is fine as it is...

[tpetricek]

Perfect, in this case, we can probably start by leaving things to Bootstrap - and we'll see how it works :-).

[damageboy]

Made a PR for this: #76