Update screenshots

[dscho]

Over in #28, @vtbassmatt pointed out that our screenshots do not have the same dimensions.

While looking into this, I realized that not only is that true, the screenshots are also of an ancient Git for Windows version, predating the v2.x era we're in since August 2015.

So let's update the screenshots. The diff is best viewed using the rich diff:

While at it, automate generating the thumbnails.

[dscho]

One thing is a bit unclear to me: whether we want to have those super small thumbnails. I don't know that they make a lot of sense in this time and age of HiRes screens.

Thoughts?

[prertik]

Yeah, I also don't think we need to do those super small thumbnails.

[dscho]

Yeah, I also don't think we need to do those super small thumbnails.

Do you know what the current story is on multiple resolutions, with regards to responsive design and mobile devices? I could imagine that we should have thumbnails that are small enough that mobile phones do not have to deplete the battery just to scale down the screenshot. If that hunch is true, I wonder what the recommended size(s) is/are?

[vtbassmatt]

My go-to example for doing thumbnails and high-res stuff is Emojipedia. If you pick an emoji and then use web dev tools to "inspect" the PNG-based ones, you get something like:

<img
  src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/sparkles_2728.png"
  srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/sparkles_2728.png 2x" 
  alt="Sparkles on Apple iOS 14.6"
  width="120" height="120">

I believe this lets high-DPI clients pick a higher-res version while low-DPI clients save a little bandwidth.

[dscho]

srcset

First time I came across that attribute. Here are the docs: https://html.com/attributes/img-srcset/