To insert an image in your HTML document, add a <img> tag and input the file path into the src attribute. Also, adding an optional alt attribute is a best practice that I will discuss more later in this post.
<img src="./assets/images/flower.jpg" alt="Rose">No matter if it’s a live website or if you’re working locally on your computer, the ultimate process is the same for inserting images into your HTML document.
However, if this guide looks complex at any point, don’t worry because I will also show you everything in action in the video instructions.
How to insert an image in HTML?
Specify the image path in the <img> tag. This way you can insert an image in HTML.
<img src="name_of_the_image.jpg" alt="picture">In the above HTML (src), it’s a relative path.
Also, the image could be an absolute path as you see in the example below.
<img src="https://shihabiiuc.com/wp-content/uploads/2022/01/bulb.jpg" alt="Bulb">The image path (link) may be different depending on your folder structure. Otherwise, the rest of the thing is the same for everyone. Let’s face it!
1. Upload the image to your project folder
If you’re working on a live website, upload the image to your hosting. But if you’re working locally (computer), store the image in a folder.
2. Specify the image path & name in <img> tag
Open your HTML file in a code editor and insert the image link within a <img> tag. See the example below:
<img src="https://your_site.com/images/light-bulb.jpg" alt="bulb">
<!-- OR (if you working locally, use the below structure) -->
<img src="assets/light-bulb.jpg" alt="bulb">
From the above example, you see that the <img> tag contains an src attribute. And you have to paste the image link into the src attribute.
How you will get the image link (live host): If you’re working on a live website, follow this. Let’s say you uploaded the image to a folder called “images” so the image link will be “https://your_site.com/images/name_of_the_image.jpg” See the video for more clarification (below):
How you will get the image path for your local project: If you’re working on your computer, follow this. Let’s say you uploaded the image in a folder called “assets” so the image path will be “assets/name_of_the_image.jpg” See the video instruction below:
Finally, you got the image link (path)!
Specify the image path and image name (including extension e.g. jpg/png) in the same manner as you see in this example.
3. Save your HTML file
It’s a good practice to fill out the “ALT” value in the <img> tag. In the above example, you see that the “ALT” value is “BULB.” So the search engines will understand that it’s an image of a bulb.
Also, if the image breaks or doesn’t load for any reason, the visitors will see the text (bulb).
But if you don’t give it an “ALT” value, it will not cause any error. But it’s good to have it there.
Save your file and see your webpage in a browser.
And this brings me to the end of this post.
Learn more about images
- How to resize an image in CSS?
- How to add images to an HTML table?
- How to create an image hover animation effect only with CSS?
- How to position text over an image with CSS?
- How to change an image on hover (CSS)
- Center an image in various directions & methods
- How to insert an image in HTML?
- How to right-align an image in HTML CSS?
- How to add image border in CSS [styles & examples included)
- How to create a hero banner image using HTML CSS?
- How to wrap text around an image in HTML?
- How to rotate text & images using CSS?
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Build HTML CSS projects
Conclusion
Now you know how to insert an image link/path in an HTML document. This post could be even shorter but I tried to cover everything related. So it can serve everyone’s purpose even for troubleshooting.
I also included videos and showed you how you can add an image to your web page if it’s a live server/hosting. But if you still have any questions, please let me know.
