How Do You Insert an Image From a Folder in HTML?

To insert an image from a folder in HTML, you use the <img> tag along with the src attribute. This attribute specifies the path to your image file relative to your HTML document or as a full web address.

Using the <img src> Attribute

As the reference states, the <img> tag is the fundamental HTML element for embedding images. Its essential attribute is src, which tells the browser where to find the image file. When inserting an image located in a folder, you specify the folder name followed by the image file name within the src attribute's value.

<img src="path/to/your/image.jpg" alt="Description of image">

Specifying the Image Path

The src attribute requires a path to the image file. This path can be relative or absolute. When inserting an image "from a folder," you typically use a relative path, which describes the image's location in relation to the HTML file that is trying to display it.

Here's how to specify paths for common folder structures:

• Image in the Same Folder as the HTML File:
  If your HTML file (index.html) and image file (myimage.jpg) are in the same directory, you just need the image file name.

  <img src="myimage.jpg" alt="A simple image">

• Image in a Subfolder:
  If the image is in a folder (e.g., images) located within the same directory as your HTML file.

  <img src="images/myimage.jpg" alt="Image from a subfolder">

  Here, images/ tells the browser to look inside the images folder.

• Image in a Parent Folder:
  If the image is in the folder immediately above the folder containing your HTML file.

  <img src="../myimage.jpg" alt="Image from parent folder">

  The ../ signifies moving up one directory level from the current HTML file's location. You can chain ../ to go up multiple levels (e.g., ../../).

• Image in a Different Subfolder (Parallel Folder):
  If the image is in a folder (e.g., assets) at the same level as the folder containing your HTML file (e.g., pages).

  <!-- Assuming HTML file is in /pages/index.html and image in /assets/myimage.jpg -->
  <img src="../assets/myimage.jpg" alt="Image from parallel folder">

  You go up one level (../) and then down into the assets folder (assets/myimage.jpg).

Essential & Optional <img> Attributes

Beyond the src attribute, the <img> tag can include other attributes to improve accessibility, performance, and control the image display. The reference specifically mentions alt, width, and height.

• alt (Alternative Text):
  This attribute is mandatory and crucial for accessibility and SEO. It provides a text description of the image. This text is displayed if the image cannot be loaded and is read by screen readers for visually impaired users.

  <img src="images/logo.png" alt="Company logo">

• width and height:
  These attributes specify the dimensions of the image in pixels (or percentages, though pixels are common for fixed sizes). Setting these attributes helps the browser reserve space for the image before it loads, preventing layout shifts.

  <img src="images/photo.jpg" alt="Holiday photo" width="500" height="300">

• Other Attributes:

  • title: Provides extra information about the image, often shown as a tooltip on hover.
  • loading="lazy": (HTML5) Defers loading of images until they are within a calculated distance from the viewport, improving page load performance.

Summary of Relative Paths

Understanding relative paths is key to working with images in folders. Here is a quick guide:

Path Example	Description
myimage.jpg	Image in the same folder as the HTML file
images/myimage.jpg	Image in the images subfolder
../myimage.jpg	Image in the parent folder
../assets/myimage.jpg	Image in the assets folder, one level up then down
/root/images/myimage.jpg	Absolute path from the website's root directory

By correctly specifying the path in the src attribute of the <img> tag, you can easily insert images located in various folders within your website's file structure. Remember to always include the alt attribute for accessibility and SEO.