How to use an animated image in HTML page?

HTML Web Development Front End Technology

Animated images in HTML are an image on a web page that moves. It is in GIF format i.e. Graphics Interchange Format file.

We need to use the <image> tag with the src attribute to add an animated image in HTML. The src attribute adds the URL of the image (file destination).

Also, we can set the height and width of the image using the height and width attribute.

Syntax

<image src=”Animated image”>

Example 1

Following is an example to show how to use an animated image in HTML page −


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Adding Animated Images to the web page</p>
   <img src="https://tutorialspoint.com/images/html.gif">
</body>
</html>

Example 2

You can try to run the following to work with the animated image in HTML −


<!DOCTYPE html>
<html>
<head>
   <title>Animated Image</title>
</head>
<body>
   <h1>Animated Image</h1>
   <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif">
</body>
</html>

Example 3

We can change the height and the width of the animated image using the style sheet.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p> dding Animated Images to the web page</p>
   <img src="https://tutorialspoint.com/images/html.gif" height="200" width="200">
</body>
</html>

Lokesh Badavath

Updated on: 02-Sep-2023

45K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started