Optimise image and YouTube loading

[MichaIng]

• Load images and YouTube frames "lazy", i.e. in case the browser support, when scrolling close to them.
• Define width and height explicitly for images, so that the aspect ratio is preserved even if it is still loading. The default CSS "max-width: 100%; height: auto" makes the aspect ration being correctly applied when images are resized on small screens.
• Contrary to CSS, the HTML "width" and "height" attributes do not require the "px" units to be set.
• Do not display images larger than the original image size, which usually looks blurry.
• Do not grant YouTube iframes extended permissions. Apply fullscreen permission via feature policy "allow" attribute, deny autoplay and all sensor permissions. Consequently add "?rel=0" to only show related videos of the same channel when the video has finished.

[MichaIng]

Defining image sizes makes sense even if we do not currently resize it, simply using the actual image dimensions. It is resized automatically on small screens (max-width: 100%, height: auto), and defining the HTML attributes allows the browser to derive the aspect ratio, which it then respects already while the image is loading, or if it fails to load.

Mid-term, we should resize all images where we apply a maximum size anyway. More importantly, when adding new images, those should always have an actual size that matches the displayed size we want it to have. We have a lot of images around 640 pixels. To me this sounds like a reasonable default/max image size since the container allows a max of 688 (on my browser/screen). It would also match our SBC image sizes on the download page with 640x400, although that match is irrelevant 😄.

---

So what you think:

• From now on sizing all images 640xH, aside of logos and pictograms of course which might need to be much smaller.
• Trying to avoid resizing where possible, e.g. in case of console screenshots the SSH window can be adjusted so that 640px width contains all relevant part, so that the image does not become blurry through resizing. As an exact 640px width is probably not that easy to achieve, better have it slightly larger and current left and right some pixel columns away until 640px is reached.

[MichaIng]

Added a few missing wordlist entries and/or spelling fixes.

[MichaIng]

Works pretty well. The Chromium development tools can be used to follow when/how images and YouTube frames are loaded when scolling. Check the dev tools Network tab, reload the page, then scroll down. One can see how the additional resources are loaded in the waterfall diagram when scrolling close to them.

I'll do the other software pages in a dedicated PR.