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.

Il metodo più semplice per creare una GIF quasi senza perdite da una sequenza di immagini è usare FFMPEG per convertire la sequenza di immagini in un file video e poi convertire il file video in una 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.