Experiments to see if the 'roster badge' can be made smaller (file size) and easier to use.

Original

The existing 'roster badge' is a JPG image. This example is 95.5 KB.

Using its 'native' size

width=100%

Fills screen width (and height scales proportionally).

width=50%

Fills half of screen width (and height scales proportionally).

width=25%

Fills 1/4 of screen width (and height scales proportionally).

Notes

✔️ entire image scales in correct proportion.
❌ if scaling down in width/height is required, at some point the text becomes difficult/impossible to read (as it's a bitmap and not 'real' text).
❌ harder to produce than simply editing a name in a HTML file? Need the source image and the image editing software.
❌ larger size. I.e. 95.5 KB per player vs ~40 KB for SVG or DOM.

SVG

IE doesn't seem to increase the height when the width of the parent element increases.

Source

Notes

✔️ smaller file size than plain image.
✔️ pretty easy to edit as it's just text.
✔️ easy to 'template' - just provide the text and generate the SVG element.
Supporting Bladerunners logo file logo.jpg - 7.2 KB
Supporting player picture file 334x334.jpg - 31.1 KB

DOM

Need to improve how scaling works. Reduce the player image size and the font size.

Rich Green

Number: 00
Position: 1B
Bats/Throws: R/L

Source

Notes

✔️ smaller file size than plain image.
✔️ pretty easy to edit as it's just text.
✔️ easy to 'template' - just provide the text and generate the DOM element.
Supporting Bladerunners logo file logo.jpg - 7.2 KB
Supporting player picture file 334x334.jpg - 31.1 KB