Png output in HTML-capable environments

[jkrumbiegel]

I'm wondering if it would make sense to output png with an <img> wrapper tag instead of as raw image data when the environment can display HTML. The problem is that if I set px_per_unit = 2 to have a crisp output from CairoMakie, the image can become very large but still kind of blurry in something like Pluto or Quarto. I'm using a retina screen Macbook, so what happens is that one image pixel is displayed with four screen pixels by default. I guess in order to override this, one would have to pass half the image size as <img width=... etc, hence the idea to output HTML when png is activated. Not sure how the scale factor should be determined, though. Maybe one would just divide by px_per_unit.

[jkrumbiegel]

This seems to do it if called directly, question is if we should use this if CairoMakie.activate!(type = "png") was used. I think so, because then the image is the same size no matter the px_per_unit value. Just more or less pixelated.

function Base.show(io::IO, ::MIME"text/html", f::Figure)
    w, h = widths(f.scene.px_area[]) ./ 0.75
    iob = IOBuffer()
    Base.show(iob, MIME"image/png"(), f)
    b64 = Base64.base64encode(String(take!(iob)))
    print(io, "<img width=$w height=$h src=\"data:image/png;base64, $(b64)\"/>")
end