resize big images and compress them

[AurelienRichez]

I resized the backgrounds that were bigger than 2000px wide with imagemagick (exact command is convert -thumbnail '2000>' $image $image, there was a bit of trial and error until I found that this gives decent results) and then reduce their size with pngcrush (pngcrush -ow -brute $image $image.tmp). A few images were bigger after this process, so I just git reset'd them.

On top of that, I added a github workflow that checks the size of the image and add an annotation if the size is bigger than 1 MB (this is a bit arbitrary). I don't intend for it to be blocking, just to help us pause and think when we are about to push a 15 MB image.

I wanted the action to annotate the files with a warning. Unfortunately, I don't think it's possible to annotate a file (it's only possible to annotate a line in a file) so the warning does not show up in the PR. Instead I make the workflow fail and the author will then receive a notification and can check out the warnings.

rationale:

The "background" image is displayed as ~1000px wide. I doubled it to account for some high DPI screens. We could be smarter and provide several resolutions and format but I don't think the engine handles that anyway (and we would need some automation to do it properly). So this is already an improvement.

I did not check every single image but for the one I looked at I could not find any big difference.

[VincentBrule]

What do you think about using WEBP/Jpeg instead of PNG so we can save even more space?

[AurelienRichez]

What do you think about using WEBP/Jpeg instead of PNG so we can save even more space?

I thought about it actually 😅. As far as I know, they are supported enough to work everywhere so it would work. But I think that the background.png file is hardcoded in the engine right ? So I did not want to change everything.

It's also what I was hinting at when I talked about automation. Some CDN or other tools will probably do all that work for us (resizing, providing several resolutions depending on the screen DPI, providing the format most suited for the browser). So in the end I did not want to change too many things and just improve the current state without modifying the format.

[AurelienRichez]

Note for myself:

• Add a note in the readme with advice about how to reduce the image size. (done by Leonor in Updated README and compressed large file #129)