display png via html preserving size regardless of pixel density

[jkrumbiegel]

Description

Fixes issue #2264

Type of change

Adds the ability to show scenes with MIME"text/html" and related types, using the png output and setting the correct width/height on the result.

Delete options that do not apply:

• New feature (non-breaking change which adds functionality)

Checklist

• Added an entry in NEWS.md (for new features and breaking changes)
• Added or changed relevant sections in the documentation
• Added unit tests for new algorithms, conversion methods, etc.
• Added reference image tests for new plotting functions, recipes, visual options, etc.

Example images

This is in VSCode, displaying with different px_per_unit values.
Note that the relative size of the image doesn't change.
You can see that clarity is ideal at 2 px per unit on my retina screen, which makes sense. However, for zooming in, it can be beneficial to go higher.

Here's the same image shown with mime type svg, as you can see the apparent size is the same:

When we display with mime type png like before, we can see that the image blows up in size, filling the available plot pane space. This is not desirable, as the pixel density becomes lower again (blurriness) and the text becomes too large:

[MakieBot]

Compile Times benchmark

Note, that these numbers may fluctuate on the CI servers, so take them with a grain of salt. All benchmark results are based on the mean time and negative percent mean faster than the base branch. Note, that GLMakie + WGLMakie run on an emulated GPU, so the runtime benchmark is much slower. Results are from running:

using_time = @ctime using Backend
# Compile time
create_time = @ctime fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @ctime Makie.colorbuffer(display(fig))
# Runtime
create_time = @benchmark fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @benchmark Makie.colorbuffer(display(fig))

	using	create	display	create	display
GLMakie	48.32s (46.84, 50.37) 1.28+-	24.40s (23.43, 25.75) 0.99+-	22.50s (21.62, 23.72) 0.86+-	15.23ms (14.92, 15.50) 0.21+-	187.16ms (174.91, 193.75) 6.99+-
master	48.79s (46.95, 50.45) 1.49+-	24.26s (23.29, 25.06) 0.70+-	22.11s (21.39, 22.84) 0.53+-	15.37ms (14.63, 16.07) 0.47+-	189.74ms (176.81, 207.68) 9.77+-
evaluation	-0.97%, -0.47s invariant (-0.34d, 0.54p, 1.38std)	+0.58%, 0.14s invariant (0.16d, 0.77p, 0.85std)	+1.72%, 0.39s invariant (0.54d, 0.33p, 0.69std)	-0.95%, -0.14ms invariant (-0.39d, 0.48p, 0.34std)	-1.38%, -2.59ms invariant (-0.30d, 0.58p, 8.38std)
CairoMakie	35.48s (35.23, 35.83) 0.24+-	19.17s (18.88, 19.60) 0.33+-	2.78s (2.70, 2.91) 0.07+-	12.14ms (11.88, 12.38) 0.19+-	8.06ms (7.88, 8.30) 0.15+-
master	35.57s (34.95, 35.95) 0.36+-	19.24s (18.89, 19.45) 0.17+-	2.78s (2.74, 2.82) 0.03+-	12.18ms (12.01, 12.43) 0.15+-	5.60ms (5.30, 6.28) 0.34+-
evaluation	-0.26%, -0.09s invariant (-0.30d, 0.59p, 0.30std)	-0.35%, -0.07s invariant (-0.26d, 0.64p, 0.25std)	-0.13%, -0.0s invariant (-0.07d, 0.90p, 0.05std)	-0.33%, -0.04ms invariant (-0.24d, 0.67p, 0.17std)	+30.52%, 2.46ms slower❌ (9.44d, 0.00p, 0.24std)
WGLMakie	44.69s (44.45, 44.99) 0.21+-	22.01s (21.72, 22.30) 0.21+-	22.30s (21.88, 22.67) 0.27+-	14.37ms (13.72, 15.09) 0.54+-	803.20ms (758.49, 820.86) 24.57+-
master	44.39s (43.88, 44.74) 0.31+-	21.97s (21.85, 22.27) 0.14+-	22.22s (22.06, 22.42) 0.13+-	14.35ms (13.81, 14.89) 0.35+-	781.33ms (743.87, 829.15) 28.79+-
evaluation	+0.67%, 0.3s invariant (1.14d, 0.06p, 0.26std)	+0.14%, 0.03s invariant (0.18d, 0.75p, 0.17std)	+0.36%, 0.08s invariant (0.37d, 0.51p, 0.20std)	+0.13%, 0.02ms invariant (0.04d, 0.94p, 0.45std)	+2.72%, 21.88ms invariant (0.82d, 0.15p, 26.68std)

[jkrumbiegel]

Here's another example from a Pluto notebook. This is the old behavior:

As you can see, the image can be made crisper without increasing its size in the new html png mode:

[jkrumbiegel]

I think this is good to go in terms of functionality. I tested in VSCode and Pluto and it seemed to work well.

I do still want to write a couple paragraphs of docs about this but a review can already happen now.

[jkrumbiegel]

Updated the docs a bit, otherwise this hasn't changed in a while and I think it does what it's supposed to

[jkrumbiegel]

merged into #2831