bevy-website
bevy-website copied to clipboard
bevyengine
Convert assets GIFs to a smaller format or ban them
Assets page GIFs take around 16mb (at the time of writing this) and unfortunately don't get optimized by Zola resize_image (see issue #339 & PR #360). Ideally these should be resized to fit in 340x340 (current assets thumbnail size) and converted to a better image format (e.g. webp, gifv, mpeg…)
Ideally this should be automated.
-
ffmepgcould be used as it supports gif => webp. - or, maybe there is some crate that supports this conversion and can be integrated with the assets generation code
A quick search shows that there are 5 assets that weight more than 1M:
3.0M Apps/Games/Kataster.gif
1.2M Apps/Games/bevy_combat.gif
4.2M Assets/2D/bevy_ecs_ldtk.gif
2.7M Assets/3D/bevy-hikari.gif
1.5M Assets/Helpers/bevy_match3.gif
Some of the large PNG files could be downsized, given how tinny the preview is on the website, I see a 2144x1360 png. I ran
fd -e png . -x ls --size --human-readable {} |
sort --human-numeric-sort |
tail -40 |
cut -f2- -d' ' |
xargs file
Click to expand list of all assets of more than 50K
52K ./Apps/Games/libracity.png 52K ./Apps/Games/One-Click-Ninja.png 52K ./Apps/Games/punchy.png 52K ./Assets/3D/bevy_mod_picking.png 60K ./Apps/Games/typey-birb.png 60K ./Assets/2D/bevy_life.png 68K ./Apps/Games/bounce-up.png 68K ./Apps/Games/build_a_better_buddy.png 68K ./Assets/Helpers/bevy_plot.png 68K ./Assets/Helpers/bevy_proto.png 72K ./Apps/Games/not-snake.png 96K ./Apps/Tools/nodus.gif 104K ./Assets/Networking/ggrs_logo.png 124K ./Apps/Games/unflock.png 124K ./Assets/Shapes/bevy_smud.png 152K ./Assets/2D/bevy_tileset.gif 164K ./Learning/minesweeper-tutorial.png 172K ./Apps/Games/nbody_moon_creator.gif 172K ./Learning/Learn-Bevy-Ecs-By-Ripping-Off.png 176K ./Apps/Games/cheaters-never-win.png 216K ./Apps/Games/super-kaizen-overloaded.png 256K ./Apps/Games/bevy-tetris-yat.gif 276K ./Apps/Games/limbo_pass.png 328K ./Assets/Animation/bevy_easings.gif 384K ./Assets/Animation/bevy_tweening.gif 392K ./Apps/Games/bavy-balls.png 432K ./Apps/Tools/fun-notation.gif 540K ./Apps/Games/mechaburro.gif 692K ./Apps/Games/miner.png 704K ./Assets/2D/bevy-parallax.gif 776K ./Assets/3D/bevy_hanabi.gif 1.2M ./Apps/Games/bevy_combat.gif 1.5M ./Assets/Helpers/bevy_match3.gif 2.6M ./Assets/3D/bevy-hikari.gif 3.0M ./Apps/Games/Kataster.gif 4.1M ./Assets/2D/bevy_ecs_ldtk.gif
I think we should combine this with some form of pagination to avoid needing to load absolutely everything at once. I don't know if that's possible without using a backend though.
webp format is much better than gif. For example, the image below is only 120 KB.
It's highly compressed, but it is also quite big (in area) for a thumbnail, so a smaller one with higher quality image should be of comparable size.
EDIT: webp is also very good for a png replacement. For moving images, webm and mp4 are also good.
Oh, actually, the use of zola's resize_image does reduce the actual size of images. The pngs are nicely resized, but the GIFs are still an issue
In the resize_image docs it says that webp is supported, and you can also set image quality (webp is optionally lossy).
From what I remember the issue with GIFs is that the animation is lost and only the first frame is used when processed via resize_image. I don't know how it handles animated webp, it might happen the same. 🤷
Although… I just realized, maybe is just a matter of forcing the format to webp and it'll handle the GIFs… 🤔
Nope, forcing format=webp doesn't work for GIFs (GIF => webp). Only the first frame is used.
Yeah, I looked at the zola code, it uses two dependencies for image formatting:
webp is a simple crate that just eats image crate's DynamicImage and makes static webp images with them. webp is based on the lower level c wrapper libwebp-sys, which probably can manage encoding animated webps. But this is not implemented yet in webp crate. I think one would need to figure it out based on the libweb documentation
Google provides example C code to convert gifs to webp here: https://chromium.googlesource.com/webm/libwebp/+/0.4.0/examples/gif2webp.c
Wonder how easy it is to translate to rust using libwebp-sys (eh, I'll try tomorrow)
An easy temporary solution to improve the situation would be to set loading="lazy" for the images. Then they are only loaded when the user scrolls to the given card (Docs).
