Pixel-sharp screenshots on the dev forum

Are you bothered by blurry screenshots of your game on this forum? I sure am. So I’ve tweaked our CSS to automatically “sharpen” images (i.e. use the pixelated resampling method) that are precisely 400 x 240, since there are pretty much guaranteed to be game screenshots. Look how sharp:

image

You can also apply this to any other image (if you’re posting isolated assets or such, where they’re not 400 x 240) by adding the “title” screenshot to your image. You’d append it to the image code in your post like such:

![MyAsset|40x90](upload://xEXDo3EEZLIfjV1sfjoGqEiY1PL.png "screenshot")

Let me know if you notice any issues around this. Long live sharp pixels!

13 Likes

Just looked at my two recent threads. The 400x240 screenshots were immediately much prettier, and adding “screenshot” to a 128x128px image made it sharp, too.

Awesome, thank you!

1 Like

Great!

Can you include 400x240 animated GIF also?

Hm they should be included already! Do you have an example that doesn’t work?

Those in my thread are blurry right now, viewing on my iPhone

https://devforum.play.date/t/matts-prototypes/826/

They’re sharp on my Mac—sadly, the iPhone may be ignoring all this :expressionless: I’ll research!

1 Like

It looks like they’re sharp on iPhone if the image is not initially shrunk down to fit the width of the window (by loading the page in landscape), but is not sharp if it shrinks the image (when I load a page in portrait).

1 Like

You’re absolutely correct! Nice catch.

Maybe Discord is overriding the CSS when it resizes the images to fit? Maybe a use case for !important ?

Hm unfortunately it’s not a matter of the style getting overriden by another, but of iPhone having its own ideas about resizing. Like Donald said, you can force it to obey this by rotating and reloading, but it’ll still do its silly thing when you originally load in portrait. Unfortunately it’s nearly impossible to debug this stuff ON an iPhone… I’ll keep looking!

Don’t spend time on it, @neven, it’s all good!

I’m not sure if this is what’s doing it, but my gifs look real bad in chrome on windows now. The forum seems to have resized them a bit but is using nearest-neighbor, so pixel sizes are all over the place. Look at my poor boy!

image
Here’s a comparison of some text as it appears in the thread VS right clicking and viewing the original image.
image

…and here’s what your example image in this thread looks like:

image

@neven I figured out the gif sharpening issue happens on my laptop because it doesn’t play well with Windows’ UI scaling feature. Is there any way we can toggle this feature in the forum settings?