Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use an animated image in HTML page?
Animated images in HTML are visual elements that display moving graphics on a web page. They are typically in GIF format (Graphics Interchange Format), which supports animation by storing multiple frames in a single file that play in sequence.
We use the <img> tag with the src attribute to add an animated image in HTML. The src attribute specifies the URL or file path of the animated image. You can also control the display size using the height and width attributes or CSS styling.
Syntax
Following is the basic syntax for adding an animated image −
<img src="path/to/animated-image.gif" alt="Description">
You can also specify dimensions −
<img src="path/to/animated-image.gif" alt="Description" width="200" height="150">
Basic Animated Image
Example
Following example shows how to add a simple animated GIF to an HTML page −
<!DOCTYPE html> <html> <head> <title>Basic Animated Image</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Welcome to Our Website</h2> <p>Here's an animated logo:</p> <img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="TutorialsPoint Logo"> </body> </html>
The animated GIF will display and play continuously in the browser. The alt attribute provides alternative text for accessibility.
Controlling Image Dimensions
You can control the size of animated images using HTML attributes or CSS. The width and height attributes set fixed dimensions, while CSS provides more flexibility.
Example − Using HTML Attributes
<!DOCTYPE html> <html> <head> <title>Sized Animated Image</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Resized Animated Image</h2> <p>Original size:</p> <img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Original Logo"> <p>Resized to 150x100 pixels:</p> <img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Resized Logo" width="150" height="100"> </body> </html>
The first image displays at its original size, while the second is resized to 150x100 pixels. Note that changing dimensions may affect the aspect ratio.
Example − Using CSS for Better Control
<!DOCTYPE html>
<html>
<head>
<title>CSS Styled Animated Image</title>
<style>
.animated-logo {
width: 200px;
height: auto;
border: 2px solid #333;
border-radius: 10px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Styled Animated Image</h2>
<p>Animated image with CSS styling:</p>
<img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Styled Logo" class="animated-logo">
</body>
</html>
This example uses CSS to set the width to 200px while maintaining aspect ratio with height: auto. It also adds a border, rounded corners, and centers the image.
Multiple Animated Images
You can display multiple animated images on the same page. Each image operates independently with its own animation cycle.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Animated Images</title>
<style>
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.animated-item {
width: 120px;
height: auto;
border: 1px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Gallery of Animated Images</h2>
<div class="image-gallery">
<img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Logo 1" class="animated-item">
<img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Logo 2" class="animated-item">
<img src="https://www.tutorialspoint.com/images/tp-logo.gif" alt="Logo 3" class="animated-item">
</div>
</body>
</html>
This creates a responsive gallery layout with three animated images displayed side by side, each maintaining its own animation cycle.
Best Practices for Animated Images
When using animated images, consider these important points −
-
Performance − Large animated GIFs can slow down page loading. Optimize file sizes when possible.
-
Accessibility − Always include descriptive
alttext. Some users may have motion sensitivity, so avoid excessive animation. -
User Experience − Animated images can be distracting. Use them purposefully to enhance content, not overwhelm it.
-
Responsive Design − Use CSS to ensure animated images scale properly on different screen sizes.
Conclusion
Animated images in HTML are added using the <img> tag with GIF files. You can control their size using HTML attributes or CSS, and they work independently when multiple images are used. Always consider performance, accessibility, and user experience when implementing animated images on your web pages.
52K+ Views
