Adding animated Image
To add an animated image in HTML, use the <img> tag with the src attribute pointing to a GIF file, providing engaging motion to enhance webpage content.
Example: This example explains the addition of an image in the GIF format in HTML.
<!DOCTYPE html>
<html>
<body>
<h3>Adding a gif file on a webpage</h3>
<img src="smiley.gif"
alt="smiley"
style="width: 200px; height: 200px" />
</body>
</html>
Output:
Common Image Format: Here is the commonly used image file format that is supported by all the browsers.
S.No. | Abbreviation | File Type | Extension |
---|---|---|---|
1. | PNG | Portable Network Graphics. | .png |
2. | JPEG. | Joint Photographic Expert Group image. | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
3. | SVG | Scalable Vector Graphics. | .svg. |
4. | GIF | Graphics Interchange Format. | .gif |
5. | ICO | Microsoft Icon. | .ico, .cur |
6. | APNG | Animated Portable Network Graphics. | .apng |
Supported Browsers:
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.
There are 2 ways to insert the images into a webpage:
- By providing a full path or address (URL) to access an internet file.
- By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image into the webpage & simultaneously, we will understand both the above approaches.