How to properly display gif on the page?

Question

css

Friends, such a question. I display several gifs on the page, but due to the fact that the files are too large, the page takes too long to load. I tried to display webm instead of gif by converting the files, but nothing worked for me. It's not possible to compress gif, because 1. The files still turn out to be large, 2. GIF files become too bad quality. Please tell me how can I solve this issue?

Answer 1

If the animations are simple, you can redo it through the canvas,
or even css animation is enough

Answer 2

Stop downloading them. The approach is called lazyload.
But if there are a lot of them directly, then do the loading, say, by hovering over the element. A la dribbble.
In both cases, you will need to arrange a placeholder, and in the second case, you will also need to make jpg-pictures for display before hover.

Answer 3

Use lazy loading