askvity

How do I add images in HTML from a folder?

Published in HTML Images 3 mins read

To add images in HTML from a folder, you'll use the <img> tag and specify the image's location using the src attribute. You can use either an absolute or relative file path. Here's a breakdown:

Understanding the <img> Tag

The <img> tag is an HTML element that displays images on a web page. It doesn't have a closing tag (</img>) and relies on attributes to define its behavior. The src attribute is the most important one as it tells the browser where to find the image file.

Specifying the Image Path

You have two primary ways to specify the path to your image:

1. Relative Path

A relative path specifies the location of the image relative to the current HTML file. This method is commonly used for websites where images are stored in the same directory or subdirectories as the HTML files.

  • Same Directory: If your image (my_image.jpg) is in the same folder as your HTML file, you would use:
    <img src="my_image.jpg" alt="Description of image">
  • Subdirectory: If the image is in a folder (e.g., images) within the same folder as the HTML file, you would use:
    <img src="images/my_image.jpg" alt="Description of image">
  • Going Up a Directory: To go up one directory, use ../ For example, if your HTML file is in /pages and image in /images, you would use ../images/my_image.jpg.

2. Absolute Path

An absolute path gives the complete URL of the image, including the protocol (e.g., http:// or https://) and domain name. This method is suitable if the image is hosted on another website.

  • External Image: You can link to an image on another server:
    <img src="https://www.example.com/images/my_image.jpg" alt="Description of image">

Table of Common <img> Attributes
| Attribute | Description |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src | The required path to the image file. |
| alt | Provides alternative text for the image. Very important for SEO and accessibility, displayed when the image is not loaded or screen readers are being used. |
| width | Sets the width of the image (in pixels or as a percentage). |
| height | Sets the height of the image (in pixels or as a percentage). |

Practical Insights

  • Use relative paths where possible: They make it easier to move your website to a new domain or folder structure without breaking image links.
  • Always include the alt attribute: This is crucial for accessibility and search engine optimization (SEO). Provide a short and descriptive text for the alt attribute.
  • Consider image optimization: Use appropriate image formats (JPEG for photos, PNG for graphics with transparency) and compress images to improve website loading speed.

Example

Here's an example demonstrating how to insert an image named example.jpg from a folder named assets relative to the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Example</title>
</head>
<body>
    <h2>My Image</h2>
    <img src="assets/example.jpg" alt="A sample image" width="300" height="200">
</body>
</html>

In this code, the <img> tag will fetch and display example.jpg from the assets folder, which should be in the same directory as the HTML file.

Related Articles