How to add a GIF image using HTML code

If you’re asking how to add a GIF image to a site using HTML code:

If you’re asking how to animate a sequence of images without converting them to a GIF image then you’ll need to rely on something other than HTML:

2. @keyframes foo { 
3. 0% { content: url(image1.jpg); } 
4. 25% { content: url(image2.jpg); } 
5. 50% { content: url(image3.jpg); } 
6. 75% { content: url(image4.jpg); } 
7. 100% { content: url(image5.jpg); } 
8. } 
9.  
10. .bar { 
11. animation-name: foo; 
12. animation-duration: 3s; 
13. animation-iteration-count: infinite; 
14. max-height: 500px; 
15. max-width: 90vw; 
16. } 
17.  
18.  

I’d recommend converting your sequence of images into a GIF since not all browsers may support CSS animations.

O método mais fácil de criar um GIF quase sem perdas a partir de uma sequência de imagens é usar FFMPEG para converter a sequência de imagens em um arquivo de vídeo e depois converter o arquivo de vídeo em um GIF:

1. ffmpeg -r 2 -start_number 1 -i "%cd%\image%d".jpg" output.mp4 
2. ffmpeg -y -i output.mp4 -vf fps=2,scale=-1:-1:flags=lanczos,palettegen palette.png 
3. ffmpeg -i output.mp4 -i palette.png -lavfi "fps=2,scale=-1:-1:flags=lanczos [x]; [x][1:v] paletteuse" -y output.gif 

Then you can use the 1st method for HTML.