Website images

[diegoferigo]

This issue stores the images used in the website. For the time being I prefer avoid adding them to the git repository.

Images

Images (APNG)

ffmpeg -i <input>.mp4 -f apng \
    -vf "fps=10,scale=300:-2:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse"  \
    -plays 0 <output>.png

ffmpeg -i <input>.mp4 -f apng \
    -vf "fps=10,scale=450:-2:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
    -plays 0 <output>.png

[traversaro]

I am not opening a real issue because we can safely ignore this problem.

Firefox

One thing that I noticed is that on Firefox this GIFs get rendered with some scaling-dependent artifacts:

Chrome

Fortunately these artifacts are much less visible in Chrome (that is used by the vast majority of web users):

Explanation

Just to let you know, this probably happens as an 2D aliasing effect due to the combination of the regular pattern used by your GIF encoder to represent the gray of the Gazebo background using the limited 256-color palette available in GIFs :

and the upsampling/downsampling techniques used by Chrome and Firefox to render this images at a different resolution from their original one. Indeed, by searching on the web I was able to find some related comments: https://stackoverflow.com/questions/54950365/animated-gifs-are-antialiased-in-chrome-but-not-firefox-or-edge .

Possible solutions

Again, this is not something that we need to address, but just out of curiosity a possible solution is to use an animated image format that does not have the 256-color limitations of animated GIFs. Two possible alternatives are apng and webp, see https://ezgif.com/help/alternative-animated-image-formats . The main advantage of apng is that is supported also by Safary (among major browsers) and it can be attached to GitHub issues as we usually do, while .webp advantage seems to be that it also support compression.

[diegoferigo]

Thanks for proving so many information @traversaro, you saved me a good amount of time :) I am a firefox user too and I already noticed this strange behaviour, however since other browsers did not suffer from this glitch, I postponed the investigation of the root cause.

Beyond what you reported, I also noticed is that this glitch depends on the active zoom scale you're using on the webpage.

I suspect as well it is issue related to the encoding I used to create the gifs:

ffmpeg -i <input>.mp4 -vf "scale=600:-2" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=1 --delay=10 > out.gif

It doesn't seem that gifsicle supports other output file formats, but we could investigate alternatives.

[traversaro]

apngasm seems to be a tool similar to gifsicle but for apng, not sure if it supports everything we need. However, ffmpeg instead should support -f png option.

[diegoferigo]

I'll have a look at it, thanks! In the meantime, I opened and pinned #271.

[diegoferigo]

I found that ffmpeg already supports APNG encoding:

ffmpeg \
    -i <input>.mp4 \
    -f apng \
    -plays 0 \
    -vf "fps=15,scale=300:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
    <output>.png

No need to install anything else. I updated the images in the first post. Note that APNGs are bigger than GIFs on average. I noticed that the difference grows with file size. In any case, final size is acceptable.

• https://www.reddit.com/r/steamgrid/comments/dg2bmf/testing_the_best_resolution_and_method_to_convert/
• https://www.reddit.com/r/steamgrid/comments/detym1/guide_for_creating_your_own_apng/
• https://voldrixia.com/?p=scripts&s=gif
• https://stackoverflow.com/questions/43795518/using-ffmpeg-to-create-looping-apng
• https://www.reddit.com/r/steamgrid/comments/d7h8is/how_do_you_guys_manage_to_convert_your_animations/
• https://corydowdy.com/blog/converting-mp4-to-webm