How To Add Image in HTML? Example

Images are an integral part of modern web design. They can be used for logos, illustrations, product images, and more. In HTML, images are inserted using the <img> element, which requires the src attribute to specify the image source (URL).

Syntax to add Image:

To add an image to your HTML document, use the following syntax:

<img src="image-url.jpg" alt="Image Description">

Image Attributes.

The <img> element supports various attributes to control image behavior and appearance:

src attribute contains the URL of the image file.
alt attribute provides alternative text that is displayed if the image cannot be loaded.
width and height use to Set the dimensions of the image.
title attributes display a tooltip when the user hovers over the image.

Example: Adding Image to HTML.

Let's say you want to add a logo image to your website. You can add by using below HTML code.

<!DOCTYPE html>
<html>
<head>
    <title>Adding Images</title>
</head>
<body>
    <h1>Welcome to our Website</h1>
    <img src="images/logo.png" alt="Company Logo" width="200" height="100">
    <p>Explore our products and services.</p>
</body>
</html>

Here in the above example, we are defining the path of our image in the src attribute. You can provide a relative or absolute path of your image. Let's understand what is relative and absolute paths.

Relative Path Vs Absolute Path.

In web development, you specify the location of a resource such as an image, stylesheet, or script. You can use either relative or absolute paths of the image for the src attribute:

Relative Paths: Specify the path relative to the current HTML file.
Absolute Paths: Provide the complete URL of the image.

Example:

<!-- Relative Path -->
<img src="images/pic.jpg" alt="Picture">

<!-- Absolute Path -->
<img src="https://example.com/images/pic.jpg" alt="Picture">

I hope you understand the process of adding an image to your website. Now let's discuss some key points that you should keep in mind while adding any image to your website.

Tips for Effective Image Usage in HTML.

Here are some tips to consider for using images effectively on your website:

Image Quality.

You should always use high-quality images that are clear, sharp, and properly sized. Avoid pixelated or distorted images, as they can negatively impact the overall appearance of your website.

Add Alt Text.

Always include descriptive and meaningful alt text for images. Alt text is essential for accessibility and helps users with visual impairments understand the content of the image.

Mobile-Friendly Design.

Ensure that images are responsive and look good on various devices, including smartphones and tablets. Test your website's responsiveness to verify that images scale appropriately.

Avoid Overloading.

Use images sparingly and avoid overloading your pages with too many visuals, which can distract or overwhelm users.