HTML images

HTML images are a graphical part of web development, used to embed images, photos, and other visual content into web pages by linking them.

The <img> tag in HTML is used to embed images and is a self-closing tag, which means it does not have a separate closing tag like other HTML elements.

Basic Image Using:
To insert an image in HTML use the <img> Tag to embed images: 

The <img> tag has two required attributes: learn more about the Attribute -> What is an attribute in HTML

• src - src attribute is used to specify the location of the image
• alt - Specifies an alternate text for the image
   

                                        
                                            <img src="images/photo1.jpg" alt="Description of Image">
 
                                    

This example for, if you save your image into a folder called ‘images’ and your image name is photo1.jpg and you want to insert this image into your HTML document.

Absolute or Relative file path

In HTML, you can link to an image using either an absolute or relative file path, depending on where the image is stored

• Relative path (e.g., "images/photo.jpg")  
• Absolute URL (e.g., "https://example.com/photo.jpg").

Relative File Path

In a relative file path, you will just need to specify the location of the image. 

                                        
 <!-- Image located in a subfolder called 'images' -->
<img src="images/photo1.jpg" alt="Example Image">

<!-- Image located in the same folder as the HTML file -->
<img src="photo1.jpg" alt="Example Image">

<!-- Image located in a parent folder -->
<img src="../photo1.jpg" alt="Example Image">
    

Absolute File Path

In absolute file path, you will need to provide the full URL of the file, including the domain name. this is useful when the image is hosted on a different server or domain.

                                        
                                            <img src="https://www.example.com/images/photo1.jpg" alt="Example Image"> 
                                    

The alt Attribute

This attribute provides alternative text for the image if images cannot be loaded on website because of slow internet or an error. It’s also useful for accessibility purposes and SEO.

Some Additional Attributes:

Width and Height: if you want to change Image Size Use the HTML Width and Height attributes to set the size of the image or specify the dimensions of the image.

                                        
                                            <img src="logo.png" alt="Logo" width="300" height="200"> 
                                    

title: Provides additional information when the user hovers over the image. 

                                        
                                            <img src="logo.jpg" alt="logo" title="This is company logo"> 
                                    

Finally, Make sure the image file path is correct and that the image is accessible from your web server or local file system and Image Formats are correct. JPG, JPEG, GIF, and PNG are most useful Extension in HTML.

Here’s an overview of the most commonly used image formats 

• File Extension: .png (Portable Network Graphics). For images that require a transparent background
• File Extension: .jpg or .jpeg (Joint Photographic Experts Group)
• File Extension: .gif - For animated images
• File Extension: .webp
• File Extension: .svg

Choosing the Right Format:

• For Photographs: JPEG is typically the best choice due to its balance of quality and file size.
• For Graphics with Transparency: PNG or SVG (for vector graphics).
• For Animations: GIF or WEBP.
• For Web Performance: WEBP, JPEG, and optimized PNG files are often preferred.

If you have any other questions or need further examples, let us know and upload the question in our forum tapgen.xyz

Learn to code with the world's largest web developer site. Not sure where to begin? HTML is The language for building web pages Learn HTML Tutorial with Tapgen.

=================================