A common and IMO cool way to create impress.js presentations, is to use some large background image for the entire presentation, then layout each slide over it. One of my first impress.js presentation was Selling Open Source 101 for Oscon 101. The presentation is inside a picture of a woman selling all kinds of stuff in a bazaar.
Next week I will present something about EC2 at HighLoad++ conference, and my presentation is flying over some clouds, of course.
A challenge with this approach has been, that when the background image is scaled aggressively, it quickly becomes rather blurry. Issues impress#609 and henrikingo#14 discuss this problem. Github user @fin-ger on the first issue helped me understand what the issue is, and for my HighLoad++ presentation I finally figured out how to avoid it and get a sharp background image.
Today I've created a demo which shows both the blurry and sharp way to use a background image:
Open presentation in new window
The solution isn't necessarily generally useful. While it's great to have a sharp background image, it turns out that the browser rendering a 7000 x 10000 pixel image will quickly run out of memory. On individual slides you're fine, because the browser will only render the visible part, but if you actually want to show the entire image - such as on a first or last slide, then rendering the image will fail. And I have 16 GB of RAM on this laptop!
So in practice you may want to combine a bit of both solutions. Maybe use
data-scale="2" or 3, and then draw a large background on that. This will yield a good compromise between sharp detail and still actually being able to handle the entire background image.
- Add new comment
- 6878 views
And I have 16 TB of RAM on
Nice typo. Or put another way, I wish I had that instead of the meager 32 GB on my desktop. :-)
Hah! Thanks for pointing it
Hah! Thanks for pointing it out. I actually made the same error last week. Maybe it's my freudian dream or something.
Thank you for this. Good stuff. I will try out Impressionist and see how I get along.
Add new comment