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.

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:

Adding an image in GIF format

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.

Similar Reads

Adding images on a webpage:

The tag embeds images in web pages, requiring only attributes without a closing tag. Images enhance design and content quality, linked via the tag to preserve space and optimize webpage performance....

src attribute:

The src attribute in tag specifies the image’s location. If the URL is correct, the browser retrieves and displays the image; otherwise, it shows a broken link icon....

alt attribute :

The alt attribute in tag provides a text alternative if the image fails to load. It aids accessibility for users unable to view images due to slow internet, src errors, or screen reader usage....

Setting width and height of Image:

The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default. The width and height attributes are always declared in pixels. Please refer to the How to set the width and height of an image using HTML? article for further details....

Adding titles to Image:

To add a title to an image, include the title attribute in the tag, providing descriptive text for enhanced user interaction.Please refer to the HTML | title Attribute article for further details....

Setting style to the Image:

In this example, we are using the border property to decorate the image. By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture. Please refer to the HTML | border Attribute for further details....

Aligning an Image:

Aligning an image in HTML involves using the align attribute within the tag to position it horizontally. Options include left, right, or center, enhancing page layout and visual appeal. Please refer to the HTML | align Attribute for further details....

Adding Image as a Link:

To add an image as a link, enclose the tag within an tag, setting the image’s source with the href attribute. This creates a clickable image linking to external content, such as images, videos, or other web pages....

Adding animated Image:

To add an animated image in HTML, use the tag with the src attribute pointing to a GIF file, providing engaging motion to enhance webpage content....

Contact Us