Showcasing game action by using .gifs for featured screenshots is great, but unfortunately these appear at 50% scale, at least on Mac OS (tried Safari, Chrome, and Firefox). To make matters worse, regular images remain at the correct, larger size which fills the sidebar, leaving a mess of mismatched screenshots. Here's what it looks like:
This appears to be a bug in the way the screenshots are processed and provided in the `srcset` prop on the page. That property includes both 1x and 2x values, with a distinct image URL for each. Here's what it looks like in the page source:
<img data-screenshot_id="23189248" srcset="https://img.itch.zone/aW1hZ2UvMzg4NjgzNi8yMzE4OTI0OC5naWY=/347x500/l4GJhd.gif 1x, https://img.itch.zone/aW1hZ2UvMzg4NjgzNi8yMzE4OTI0OC5naWY=/794x1000/PPgPqp.gif 2x" class="screenshot" src="https://img.itch.zone/aW1hZ2UvMzg4NjgzNi8yMzE4OTI0OC5naWY=/347x500/l4GJhd.gif">
There's nothing wrong with the code, syntactically. Static image files (such as .png) actually serve up an image for the 2x URL with double the resolution. In the example above, here are the images provided for the static screenshot:
1x:
2x:
So far so good. However, despite including both the 1x and 2x sizes in the `srcset` property, both .gif images are provided at the same 1x size (400x240, in this case). This means that when the browser determines that a 2x image should be shown on a high DPI display, it pulls the image from the 2x URL (which is actually 1x resolution, remember) and then renders it at the smaller 50% scale to maintain the higher DPI (which is correct behavior, assuming that the provided image is actually double resolution).
The fix here is either to omit the 2x definition from the `srcset` property when there is no higher resolution version to display, or to ensure that a 2x resolution image is indeed provided for that attribute. By way of proof, if I manually delete the 2x declarations from the `srcset` property in my Browser's inspector, then I get the desired result on the page:
