Including a Gif in HTML Page

How to animate GIFs in HTML document?

By default browser always plays animated gifs, and you can't change that behavior. If the gif image does not animate there can be 2 ways to look: something wrong with the browser, something wrong with the image. Then to exclude the first variant just check trusted image in your browser (run snippet below, this gif definitely animated and works in all browsers).

Your code looks OK.
Can you check if this snippet is animated for you?

If YES, then something is bad with your gif, if NO something is wrong with your browser.

<img src="http://i.stack.imgur.com/SBv4T.gif" alt="this slowpoke moves"  width="250" />

Including a gif in html page

It was probably a corrupt gif. Your code should work with some other gif. If you really want to get the corrupt gif to work, try opening it in an image editor program and then resave it as gif (or any other format).

Display GIF in html 5

The reference to your image is incomplete since your code itself is fine.

Your code reads as: the image is located at http://example.com/loading.gif.

You need to either put the complete url path (https://media.giphy.com/media/jUwpNzg9IcyrK/giphy.gif or use ellipses (../media/giphy.gif) to go back a directory.

<img src="https://media.giphy.com/media/jUwpNzg9IcyrK/giphy.gif">

Play Gif image in HTML with infinite loop

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.

How do I make a gif responsive?

The first step would be to remove width: 500px from the parent container .box. This explicit width restricts the image from being able to fill the entire viewport since it's parent containers width is only 500px. Next, there is an 8px default margin on the <body> from the user agent stylesheet. Using margin: 0 within the body styling will ensure there isn't any extra space around your content.

To make the GIF responsive and fill the entire viewport width, you can add some styling to the nested <img> elements in .box. I gave the images a width and max-width of 100% to ensure they take up all the available space. For the image height, use height: 100% to make sure it's 100% of the containing blocks height or height: auto to let the browser calculate and select a height for the specified element. Try this out.

body {
  margin: 0;
  padding: 0;
}

.box{
 width: auto;
}

.box img {
  max-width: 100%;
  width: 100%;
  height: auto; /* vary this to your needs ie auto, 100%, etc */
  margin: 0 auto;
}

<div class="box">
  <img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif" alt="Example gif">
</div>

Gif image not displayed on html page

Firefox hides 'broken images' and Chrome/internet explorer show a broken image placeholder.

Seems like you didnt close the src attribute.

$("#display").append('<img src="/templates/image.gif alt="red" width="30" height="30" " />');

should be

$("#display").append('<img src="/templates/image.gif" alt="red" width="30" height="30" />');

How to control gif in a webpage?

  $('.gifs a').embedly({
      display: function(obj){
        if (obj.type === 'photo'){

          var $this = $(this);

          // Create the static image src with Embedly Display.
          var src = $.embedly.display.display(obj.url, {query: {animate:false} });

          // Add static gif placeholder to the parent
          $this.html('<img class="gif-holder" src="'+src+'" />');

          // Start preloading the actually gif.
          $this.append('<img class="gif-preload" src="'+obj.url+'" />');

          // Create a promise so we can keep track of state.
          $this.data('promise', $.Deferred());

          // Get the element we added.
          var elem = $this.find('.gif-preload').get(0);

          // If the image is not in cache then onload will fire when it is.
          elem.onload = function(){
            $this.data('promise').resolve();
          };

          // If the image is already in the browsers cache call the handler.
          if (elem.complete) {
            $this.data('promise').resolve();
          }
          // Set the static gif url so we can use it later.
          $(this).data('static_url', src);
        } else {
          // remove li if it's not an image.
          $(this).parent().remove();
        }
      }
    }).on('mouseenter', function(){
      var $this = $(this);

      // Set the hover state to true so that the load function knows to run.
      $this.data('hover', true);

      // Create a function to load the gif into the image.
      var load = function(){
        if ($this.data('hover') === true){
          // Remove the loading image if there is one
          $this.find('.gif-loading').remove();

          // Swap out the static src for the actually gif.
          $this.find('img.gif-holder').attr('src', $this.data('embedly').url);
        }
      };
      // Add the load function to the done callback. If it's already resolved
      // this will fire immediately.
      $this.data('promise').done(load);

      // Add a spinner if it's not going to play right away.
      if ($this.data('promise').state() === 'pending'){
        // Add a loading spinner.
        $this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');

        // we need to center it over the image.
        $this.find('.gif-loading').css({
          top: $this.height() / 2 - 20,
          left: $this.width() / 2 - 20
        });
      }
    }).on('mouseleave', function(){
      var $this = $(this);

      // Make sure the load function knows we are no longer in a hover state.
      $this.data('hover', false);

      // Remove the spiner if it's there.
      $this.find('.gif-loading').remove();

      // Set the src to the static url.
      $this.find('img.gif-holder').attr('src', $(this).data('static_url'));
    });

Giving best animation You can use these codes in java script file