Generate lower resolution images for faster loading times

[FlyOrBoom]

Currently, the website's images load very slowly. I've generated 2800x, 1400x, 700x, and 350x versions of all images used in the comparisons, and added HTML sizing declarations so the browser will automatically use the image best for the screen resolution.

[FlyOrBoom]

(Difference from #1 is that this one has multiple sizes instead of just 1000x)

[Pierstoval]

The arrows don't display anymore:

[Pierstoval]

Awesome work by the way! Much better than my proposal :)

[FlyOrBoom]

The arrows don't display anymore:

Whoops, I un-deleted them in another commit but forgot to push it 😅

[JohnEdChristensen]

Thanks for the PR! This looks great, would you mind creating new image versions for the better Carina Nebula images I recently added? (img/Carina_Hubble_rotated_wide_short.png, and img/Carina_webb.jpg)

Also did how did you create the different Image sizes? I'm assuming you used a tool to quickly generate them?

[FlyOrBoom]

Updated! I used the command-line tool ImageMagick, which has a convert -resize option, and put that in a bash for loop.

file=carina
type=png
for size in "350" "700" "1400" "2800"
do
    convert -resize ${size}x ${file}.${type} ${file}_${size}.${type}
done

[JohnEdChristensen]

Thanks for making those changes! This will definitely help out folks with slower internet!