Convert assets GIFs to a smaller format or ban them

[doup]

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.

• ffmepg could 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

[alice-i-cecile]

Other suggestions that came up:

• only animation on hover
• pagination

[nicopap]

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

[IceSentry]

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.

[Nilirad]

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.

[nicopap]

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

[doup]

Yes, the issue is with GIFs, everything else (🤞 ) is handled by Zola. (see: images macro).

[Nilirad]

In the resize_image docs it says that webp is supported, and you can also set image quality (webp is optionally lossy).

[doup]

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… 🤔

[doup]

Nope, forcing format=webp doesn't work for GIFs (GIF => webp). Only the first frame is used.

[alice-i-cecile]

That sounds like a bug in upstream?

[nicopap]

Yeah, I looked at the zola code, it uses two dependencies for image formatting:

• webp
• image

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

[nicopap]

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)

[TimJentzsch]

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).

[alice-i-cecile]

I'm on board with that as a start. @TimJentzsch can you make a PR?

[TimJentzsch]

Sure :)