As the IFComp deadline looms I’m scrambling to make sure my graphics are ready in time, and I’ve never really done this before!
The original images I got from the artist are, of course, huge. Based on a bit of experimentation in different interpreters, it looks like I want to scale them down to approximately 256 pixels tall so that they don’t overwhelm the screen. But when I do this, they appear blurry next to the crisp, sharp text—I have a UHD monitor that always displays everything at twice the size, and it can scale the text cleanly, but can’t restore lost pixels to the images. (In this day and age, I doubt I’m the only one either.)
Is it best for me to do this scaling myself in an image editor (so the images embedded in the blorb are 256 pixels tall), or do the scaling in Glk (so the interpreter has access to larger images and can display them at a better resolution if the screen is especially large)? Or perhaps to do the scaling in CSS in the web interpreter?
This feels like a problem that’s probably been solved many times over by now, but my searches are coming up empty.
When I asked about it here, I didn’t feel that there was a clear consensus/best practice. I wound up prompting the player for an image size preference at the beginning of play (including each image in three sizes). I never had a better idea. It’s ok, but I wish I could have offered something dynamic.
256 pixels is a pretty small ceiling, but that’s just a general comment; it might be ideal for your situation.
Added options that let you change between 256, 512, 768, 1024 pixels high. That should work for now. I’m still curious what the best approach is, though.
I had proposed a Glk extension for exposing the screen’s pixel ratio, but there wasn’t enough consensus.
Some people do have very high pixel ratios now, but I think 200% is probably reasonable enough. I’d suggest including images with double the dimensions you intend to show them at and using glk_image_draw_scaled to display them.
I do a lot of work with images, but this isn’t an Inform answer so facilities might be different;
Firstly, my image deployment size is 4K (wide) and 2-4K for web versions. 256 pixels high seems ridiculously small in this day and age. I realise that this is the sort of size needed when presented embedded within text, but can the player not resize or zoom the image? What if the overall window is resized on a large screen, for example.
If you have fantastic high res artwork, you must show it!
Then there’s performance;
If you resize within GLK, will that use the GPU. If not resizing the image in real time is going to hurt.
If you resize with CSS, that should use the GPU. Which is what you want.
As an aside, if you do wish to resample down your images, most modern algorithms cause blurring. I invented an algorithms that reduces that, but it turned out to already exist but is very little known.