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 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">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) following 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 broke 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.
Conclusion
If you don’t see the image yet, don’t panic! It’s probably you pasted the wrong path of the image. See the videos above for more clarification.
But if you still have any issues with inserting the image on your HTML file, let me know. I reply to all the comments.
