How do you add GIFs to html?-CodePudding

How do i add GIFs to html? I'm currently learning html, and i want to know how to add a GIF to my websites. Does anyone know how to do that?

CodePudding user response：

need to write img tag

<img src="img.gif" alt="">

CodePudding user response：

it's simple:

 <!DOCTYPE html>
    <html>
       <head>
          <title>Gifs</title>
       </head>
       <body>
          <h1>Add Gifs To Html</h1>
          <img src="http://...../1.gif">
          <img src="./img/2.gif">
       </body>
    </html>

CodePudding user response：

It depends.

GIF is an outdated format, terribly wasteful and resource hungry for the animations we know as “GIFs“. The term GIF is also used for the content pattern of short, autoplaying, silent videos that run in a loop.

If you checkout big websites with GIFs like Giphy, 9Gag or Twitter, they are actually using video formats like VP8, VP9, H.265 or AVIF, which are way more efficient than the old Graphics Interchange Format.

Whatever you do, please do not forget to provide an alternative text for visitors who either have visual impairments or simply cannot load videos. This is called accessibility, hashtag a11y.

Using the embed option to include a GIF from a platform

So, if you simply want to add a GIF from one of the GIF sharing platforms, you would choose the GIF you want to put on your website, use their “embed” sharing option and copy the resulting code into your website.

The default <iframe> element from Giphy does not include an alternative description, and you should add an attribute like title="Animation, a man moving his hands away from his forehead sideways, in a mind-explosion gesture. An overlaid animation enforces the explosion character."

Include self-hosted GIF-animations as videos

If you plan to serve the animation file from your website, this is the recommended way to go if you want to systematically put GIFs on your website.

Since the GIF format is not suited for animations nowadays, you would like to embed your animations as actual videos in a <video> element

 <!DOCTYPE html>
    <html>
       <head>
          <title>GIFs</title>
       </head>
       <body>
          <h1>Add GIFs To HTML in 2022</h1>
          
          <video autoplay loop muted width="500" height="300" src="https://media1.giphy.com/media/2rqEdFfkMzXmo/giphy.mp4?cid=790b76118e85130b6027e42ff5aca28cf62871c4e09f8306&rid=giphy.mp4&ct=g">
            A man moving his hands away from his forehead sideways, in a mind-explosion gesture. An overlaid animation enforces the explosion character.
          </video>
       </body>
    </html>

Include a self-hosted GIF-animations as actual GIF images

One reason to actually use the GIF format in HTML would be for Emails, since most Email clients do not play videos.

You would use the <img> element and point the src attribute to your .gif file.

To provide an alternative text for images, you would use the alt attribute:

<img alt="A man moving his hands away from his forehead sideways, in a mind-explosion gesture. An overlaid animation enforces the explosion character" width="500" height="300" src="https://media1.giphy.com/media/2rqEdFfkMzXmo/giphy.gif?cid=790b76118e85130b6027e42ff5aca28cf62871c4e09f8306&rid=giphy.gif&ct=g">