No matter if it’s a live website or if you’re working locally on your computer, the ultimate process is the same to insert images in 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
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 image to your hosting or project folder
If you’re working on a live website, upload your image in a folder or any directory. But if you’re working on your computer (locally), store the image in a folder.
How do 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 “your_site.com/images/name_of_the_image.jpg” See the video for more clarification (below):
How do 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)!
2. Insert the image in your HTML file
Open your HTML file in a code editor and insert the image link within an <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” tag.
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.
But 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 issue with inserting the image on your HTML file, let me know. I reply to all the comments.