Dynamically Creating Visual Information

One strategy to create images that make best use of the display space is to generate them dynamically from HTML/CSS.

To do this:

• Create a responsive design using HTML/CSS3.0/Javascript, which uses media selectors to determine the available canvas size
• Use a “headless browser” (such as Puppeteer - https://pptr.dev/) to set a viewport based on the dimensions provided by the receiver, and render the design
• Use the “screenshot” function to create a JPG or PNG from that rendering
• Cache the resulting image for future requests at the same dimensions.

APPENDIX - will describe how to provide Visual Information