Image paths in HTML define the location of an image file. The browser uses these paths to find and display images on a web page. There are two main types of image paths: relative paths and absolute paths.
What is an Image Path
An image path tells the browser where the image is stored. It can be inside your project folder or on another website.
Relative Path
A relative path shows the location of an image relative to the current HTML file. It is used when the image is stored inside your project folder.
Example of Relative Path
<img src=”images/photo.jpg” alt=”Sample Image”>
In this example, the image is inside the images folder within the same project.
When to Use Relative Path
Use relative paths when working on your own website files. They are commonly used in real projects because they keep files organized and easy to move.
Absolute Path
An absolute path is the full URL of an image that is hosted on the internet. It includes the complete web address.
Example of Absolute Path
<img src=”https://example.com/images/photo.jpg” alt=”Online Image”>
When to Use Absolute Path
Use absolute paths when using images from external websites or online sources.
Main Difference
Relative paths point to images inside your project folder.
Absolute paths point to images located on another website using a full URL.
Summary
Image paths help the browser locate and display images. Relative paths are used for local project files, while absolute paths are used for online images.