Some screenshot images are fuzzy

[kerchner]

As an example, the first screenshot on https://carpentries-incubator.github.io/jekyll-pages-novice/github-pages/index.html is fuzzy:

Recommend re-taking the screenshot, but don't resize the image to something too small. Also recommend checking other images in the lesson.

Great lesson! Happy to see this.

[unode]

This looks like a poor scaling algorithm on the browser when the image has higher resolution than the screen/image where it is being displayed.

Funny enough this affects Google Chrome but not Firefox.

One workaround mentioned is to add image-rendering: pixelated; to the img CSS.

The other option is to generate thumbnails for all screenshots instead of relying on the browser to re-scale the image. We can always link the original resolution to open on click.

[unode]

Chromium Version 97.0.4692.71 (Official Build) (64-bit) Without image-rendering: pixelated;

With image-rendering: pixelated;

Firefox 95.0.2: Without image-rendering: pixelated;

With image-rendering: pixelated;

Do I get a :+1: to enable this workaround?

Can someone confirm how this looks like in Safari/Edge?

[tobyhodges]

Safari 15.2

Without image-rendering: pixelated;

With image-rendering: pixelated;

[tobyhodges]

Looks good to me, @unode. Maybe also a change to propose to The Carpentries template?

[unode]

Once https://github.com/carpentries/styles/pull/636 is fixed/merged we can merge here and close the issue.

[unode]

fixed in 6e35bd3f3cddec87b508c0dd56cb0e849f88612f

[unode]

Actually, after enabling the workaround we realized that some of the other images become almost unreadable. After some discussion we decided to revert this change.

Reverted in f945067cbd3b945e292d0354c20271278f1067c0