WebHost: improve image asset loading performance

[black-sliver]

Copyright

All changes made are simple, automated transformations and I do not claim any
copyright over them. The copyright of the original files shall apply to the transformed files.

What is this fixing or adding?

Increase performance when loading the website, both on first visit and repeated visits.

Image resizing

The goal is to improve decoding speed by reducing the total number of pixels.

Renders of landing page at 1x, 2x and 2.4x are attached below.

Most files were resized to meet a device pixel ratio of 3. That is if CSS specifies 100px, the image has 300px.
Device pixel ratio >3 is very uncommon.

Some files were kept as-is because the scaling would have introduced too much blurriness.

Some PC-only (non-mobile) files were resized to meet a device pixel ratio of 2.
Device pixel ratio >2 and zoom level >2 is very uncommon on PC and some of the assets don't meet that anyway.

"Layout shift"

There is a slight shift in the footer at 100% because of a rounding error when scaling, see screenshots below.
Both versions look fine to me.

Cliff atlas

All 8 backgrounds/cliffs/grass/cliff-* files are put into a single cliff-atlas to save 7 requests in the future
(once the CSS is changed to use the atlas).

Even with http/2, there is a request queue and more requests means more chances for render to get delayed.

WEBP Recompression

This reduces size, making the transfer faster. Decoding speed is very similar to optimized PNGs.

All butbackgrounds/stone were compressed losslessly using
cwebp -lossless -q 100 -m 6 "$1" -o "${1%.*}.webp"

backgrounds/stone was compressed lossy with highest quality using
cwebp -q 100 -m 6 backgrounds/stone.png -o backgrounds/stone.webp
PNG and WEBP look identical to me, PSNR is reported as 54.64 dB.

How was this tested?

See attached screenshots.

Size and loading speed comparison

Time is the time it took to decompress from RAM to RGBA with libpng 1.6.44 or libwebp 1.4.0 on an AMD Ryzen 9 5900X.

	og png	main png	new png	new webp
File	Size Time	Size Time	Size Time	Size Time
backgrounds/cliffs/grass/cliff-atlas	- -	- -	135.9 KiB 2.6 ms	96.7 KiB 2.8 ms
backgrounds/cliffs/grass/cliff-bottom	5.4 KiB 0.4 ms	1.8 KiB 0.2 ms	3.4 KiB 0.1 ms	2.8 KiB 0.1 ms
backgrounds/cliffs/grass/cliff-bottom-left-corner	78.2 KiB 4.5 ms	46.8 KiB 1.7 ms	36.1 KiB 0.6 ms	27.2 KiB 0.9 ms
backgrounds/cliffs/grass/cliff-bottom-right-corner	70.6 KiB 5.2 ms	50.1 KiB 1.7 ms	38.8 KiB 0.6 ms	27.2 KiB 0.9 ms
backgrounds/cliffs/grass/cliff-left	4.8 KiB 0.4 ms	2.9 KiB 0.3 ms	3.1 KiB 0.0 ms	2.6 KiB 0.1 ms
backgrounds/cliffs/grass/cliff-right	3.8 KiB 0.4 ms	1.4 KiB 0.1 ms	2.6 KiB 0.0 ms	2.2 KiB 0.1 ms
backgrounds/cliffs/grass/cliff-top	4.1 KiB 0.3 ms	1.4 KiB 0.1 ms	2.4 KiB 0.0 ms	2.0 KiB 0.0 ms
backgrounds/cliffs/grass/cliff-top-left-corner	56.6 KiB 4.4 ms	35.6 KiB 1.4 ms	30.8 KiB 0.5 ms	23.1 KiB 0.8 ms
backgrounds/cliffs/grass/cliff-top-right-corner	63.5 KiB 3.9 ms	35.6 KiB 1.4 ms	30.6 KiB 0.5 ms	22.9 KiB 0.9 ms
backgrounds/clouds/cloud-0001	20.1 KiB 10.5 ms	7.8 KiB 2.4 ms	7.8 KiB 2.5 ms	4.7 KiB 1.3 ms
backgrounds/clouds/cloud-0002	9.5 KiB 3.2 ms	3.8 KiB 0.7 ms	3.8 KiB 0.7 ms	2.6 KiB 1.0 ms
backgrounds/clouds/cloud-0003	6.7 KiB 2.0 ms	2.8 KiB 0.4 ms	2.8 KiB 0.4 ms	2.0 KiB 0.6 ms
backgrounds/dirt	10.1 KiB 1.0 ms	5.9 KiB 0.4 ms	5.9 KiB 0.5 ms	3.1 KiB 0.5 ms
backgrounds/footer/footer-0001	16.4 KiB 8.9 ms	14.2 KiB 8.2 ms	14.0 KiB 2.7 ms	10.0 KiB 1.2 ms
backgrounds/footer/footer-0002	18.4 KiB 9.5 ms	15.9 KiB 8.2 ms	15.9 KiB 1.5 ms	11.2 KiB 1.2 ms
backgrounds/footer/footer-0003	18.7 KiB 9.3 ms	16.1 KiB 8.1 ms	16.7 KiB 1.5 ms	11.8 KiB 1.2 ms
backgrounds/footer/footer-0004	19.8 KiB 9.8 ms	16.9 KiB 8.2 ms	16.8 KiB 1.5 ms	11.6 KiB 1.2 ms
backgrounds/footer/footer-0005	19.2 KiB 9.5 ms	16.4 KiB 8.2 ms	16.3 KiB 1.5 ms	11.2 KiB 1.2 ms
backgrounds/grass	8.2 KiB 1.0 ms	4.2 KiB 0.5 ms	4.2 KiB 0.5 ms	2.0 KiB 0.4 ms
backgrounds/grass-flowers	8.6 KiB 1.0 ms	4.7 KiB 0.5 ms	4.7 KiB 0.5 ms	2.5 KiB 0.4 ms
backgrounds/header/dirt-header	39.3 KiB 4.9 ms	25.4 KiB 3.5 ms	14.4 KiB 1.2 ms	10.2 KiB 0.8 ms
backgrounds/header/grass-header	39.1 KiB 5.0 ms	25.3 KiB 3.5 ms	14.1 KiB 1.2 ms	9.8 KiB 0.8 ms
backgrounds/header/ocean-header	23.9 KiB 6.3 ms	9.0 KiB 2.1 ms	11.7 KiB 1.2 ms	7.5 KiB 0.7 ms
backgrounds/header/party-time-header	24.6 KiB 6.3 ms	9.6 KiB 2.1 ms	13.1 KiB 1.2 ms	8.9 KiB 0.7 ms
backgrounds/header/stone-header	66.5 KiB 5.1 ms	43.8 KiB 3.6 ms	20.3 KiB 1.2 ms	15.1 KiB 0.8 ms
backgrounds/ice	10.1 KiB 1.0 ms	6.2 KiB 0.5 ms	6.2 KiB 0.5 ms	3.3 KiB 0.5 ms
backgrounds/jungle	35.6 KiB 1.3 ms	20.9 KiB 0.5 ms	20.9 KiB 0.5 ms	14.0 KiB 0.7 ms
backgrounds/ocean	32.0 KiB 38.3 ms	8.6 KiB 17.7 ms	3.7 KiB 1.7 ms	2.7 KiB 0.9 ms
backgrounds/party-time	40.5 KiB 1.3 ms	35.1 KiB 0.6 ms	35.1 KiB 0.6 ms	25.2 KiB 0.7 ms
backgrounds/stone	229.4 KiB 3.8 ms	118.6 KiB 1.6 ms	118.6 KiB 1.6 ms	21.1 KiB 1.8 ms
branding/header-logo	6.8 KiB 0.3 ms	3.3 KiB 0.1 ms	3.3 KiB 0.1 ms	3.0 KiB 0.1 ms
branding/landing-logo	43.9 KiB 1.0 ms	38.8 KiB 1.0 ms	38.8 KiB 1.1 ms	27.5 KiB 0.9 ms
button-images/hamburger-menu-icon	5.5 KiB 1.4 ms	1.5 KiB 0.5 ms	1.5 KiB 0.5 ms	512.0 B 0.5 ms
button-images/island-button-a	249.7 KiB 4.2 ms	204.1 KiB 2.1 ms	113.4 KiB 1.4 ms	70.8 KiB 1.2 ms
button-images/island-button-b	209.5 KiB 4.1 ms	170.0 KiB 2.0 ms	90.8 KiB 1.0 ms	74.2 KiB 1.3 ms
button-images/island-button-c	292.0 KiB 6.7 ms	249.1 KiB 3.0 ms	140.0 KiB 2.2 ms	89.1 KiB 1.5 ms
button-images/popover	9.6 KiB 0.9 ms	3.9 KiB 0.3 ms	3.9 KiB 0.3 ms	3.2 KiB 0.4 ms
decorations/island-a	161.5 KiB 2.6 ms	124.7 KiB 1.3 ms	76.3 KiB 0.8 ms	58.2 KiB 1.1 ms
decorations/island-b	160.7 KiB 2.6 ms	123.8 KiB 1.3 ms	75.6 KiB 0.8 ms	57.7 KiB 1.1 ms
decorations/island-c	162.6 KiB 2.7 ms	125.5 KiB 1.3 ms	77.0 KiB 0.8 ms	58.7 KiB 1.1 ms
decorations/rock-in-water	1.9 KiB 0.1 ms	1.3 KiB 0.0 ms	1.3 KiB 0.0 ms	1.0 KiB 0.0 ms
decorations/rock-single	1.8 KiB 0.0 ms	258.0 B 0.0 ms	258.0 B 0.0 ms	166.0 B 0.0 ms
Total	2289.2 KiB 185.5 ms	1632.9 KiB 101.2 ms	1273.0 KiB 38.5 ms	841.4 KiB 34.4 ms

If this makes graphical changes, please attach screenshots.

At 100%

At 200%

At 240%