CODEWITHSUNDEEP
javascripthtmlcss
Bialy
Bialy

Reputation: 975

Play Gif image in HTML with infinite loop

I tried displaying a gif animated image inside my HTML code like

<img src="preview.gif" loop=infinite />

With or without the loop tag , it always plays once only.

Any help to make it loop continuously?

Upvotes: 21

Views: 95905

Answers (4)

devBiceps
devBiceps

Reputation: 21

Anyone trying to display gif can use tag in html like this, include muted and autoPlay for automatically playing the Gif

         <video
            muted
            loop
            preload="auto"
            autoPlay
            playsInline
            src={gifUrl}
         ></video>

Upvotes: 1

Abdulsalam
Abdulsalam

Reputation: 303

The infinite attribute has no effect on the image. You have to store the infinite on the gif itself in case you generate it on the backend.

Upvotes: 0

ThisIsWilliam
ThisIsWilliam

Reputation: 1115

As mentioned it is encoded into the GIF but you can change it with tools like photoshop for this:

  • Open your file in Photoshop
  • Go to File and click Save For Web
  • At the very bottom of the save dialog, you will see the Animation section, which should no longer be greyed out
  • Choose forever and save it.

Upvotes: 5

Andy Ray
Andy Ray

Reputation: 32075

Looping is encoded into the GIF itself, not the img tag. Open the GIF in an image editor and change the mode to loop, or use a different GIF. The loop attribute is an invalid, deprecated attribute only meant to work when the src is a video.

Upvotes: 46

Related Questions