Image optimizations / improve documentation website speed

[jbergstroem]

Example URL(s)

This applies site-wide.

While reviewing pagespeed insights, one low hanging fruit seems to be optimizing most images. This can be done a few ways:

1. Use a image resizing service like cloudflare images
2. Optimize images (lossless or lossy)
3. Resize / use <picture> to serve more relevant versions of said image

There's also other small quick wins, specific to images:

1. Set proper caching headers for images / static assets ( for instance a 2MB png with 60s timeout should probably be 1d+)
2. Use defer

I did a small experiment of using lossless optimization via imageoptim locally. It shaved about 30% of the file-size across all images. See below.

Actual Behavior

Before running imageoptim on ~950 files:

~/wrk/oss/cloudflare-docs ±production $ dust -n 1 -b -c content
295M ┌── content

Expected Behavior

After running imageoptim on ~950 files:

~/wrk/oss/cloudflare-docs ±chore/imageoptim $ dust -n 1 -b -c  content
213M ┌── content

Additional information

This could also be incorporated into a github action (pngcrush or similar) to keep all changed images in check.

[eih64225]

They use Hugo which also supports image optimisation. But Cloudflare images is also a plus.

[kodster28]

Addressed in some areas by https://github.com/cloudflare/cloudflare-docs/pull/8423 (and will be fully addressed in future PRs).

Thanks for the suggestion, @jbergstroem!