How to add an image into an html file
problem
You’re learning HTML and wish to add an image into your page. In this post we will see how to use the <img> tag to load an image that is stored locally and also from a remote source.
SOLUTION
Using the <img> tag.
Let’s suppose we have an image with a filename “nature.jpg”. I will create a directory and put it in there along the HTML file. The HTML file for loading the image is called “load_image.html”. So the directory looks as follows:
Let’s start with the HTLM file. Creating a basic skeleton with a <body> section as follows:
<html>
<body>
</body>
</html>
Let’s add the <img> tag for loading an image.
The tag uses the attribute src to specify the source of the image. For example, in our case the image is in the same directory (folder) so it will look as follows:
<img decoding="async" src="nature.jpg" />
It’s important to note that the tag is self-closing. This means there is no need to add a closing tag, i.e. “</img>”.
The tag must be added in the <body>. So now, our HTML file looks like this:
<html>
<body>
<img decoding="async" src="nature.jpg" />
</body>
</html>
Because the particular image has big dimensions, it’s loaded by default taking up all the screen.
output
Specifying image size - dimensions
The <img> tag supports attributes for specifying the size for the image to be loaded. In this case we will use the height and width and some pixels in order to make the image look rectangular.
<img decoding="async" src="nature.jpg" width="450px" height="650px" />
So the HTML code now looks like this:
<html>
<body>
<img decoding="async" src="nature.jpg" width="450px" height="650px"/>
</body>
</html>
output
Loading an image from remote source
For this example I’ll use an image found on pexels.com after searching for “airplane”. The link (URL) is the following:
https://images.pexels.com/photos/327331/pexels-photo-327331.jpeg
In order to load an image via the Internet, all that needs to be done is to specify its URL at the src attribute. Simply, the img tag will look as follows:
<img decoding="async" src="https://images.pexels.com/photos/327331/pexels-photo-327331.jpeg" width="550px" height="650px" />
Note: I slightly changed the width to 550px for this image.
The HTML code now looks like this:
<html>
<body>
<img decoding="async" src="https://images.pexels.com/photos/327331/pexels-photo-327331.jpeg" width="550px" height="650px" />
</body>
</html>
Loading a gif - animated image
The gif image is coming from a remote source, it can be found in the following URL:
It could have been a locally stored file in the same directory as well.
Again, all we need to do is to change the src of the image. The code now looks like this:
<html>
<body>
<img decoding="async" src="https://media.giphy.com/media/ZVik7pBtu9dNS/giphy.gif?cid=ecf05e47pvq7jepaj9uhu3v6qwc2lsy8t55xdmhk8r6p8vux&ep=v1_gifs_related&rid=giphy.gif" />
</body>
</html>
output
Loading an image under other directory
Let’s suppose we have a subdirectory (subfolder) in our main directory that has all the images stored in there. In order to load an image from there, all we need to do is to correctly specify the image we want in the src attribute.
For example I have an image “taj_mahal.jpg” that is stored in a subdirectory “images”. The file hierarchy looks like this:
In order to load it, just specify the exact path in the src attribute.
<html>
<body>
<img decoding="async" src="images/taj_mahal.jpg" width="500px" height="500px" />
</body>
</html>
OUTPUT
Simply, you specify the exact path of the image in the src attribute otherwise it will not load it. The same thing holds true for any sub directory(s) in sub directory, or upper directory.
Using the alt attribute
What happens if an image that is stored remotely is not available anymore?
Or something changes locally and the filetitle is incorrect. Answer: the image will not be loaded. In order to be more user friendly we can use the alt attribute and a text message to let the user know that something went wrong.
So instead of showing nothing (or a small icon of a broken image), we can show an error message.
For example:
<html>
<body>
<img decoding="async" src="not_found.jpg" alt="The image cannot be found"/>
</body>
</html>
In the code above, the file “not_found.jpg” obviously doesn’t exist to cause it to show the message stored in the alt attribute.
OUTPUT
Without specifying the alt attribute:
conclusion
In this post we saw how to load an image into an HTML page. We saw an example when the image stored in the same directory with the HTML file (locally) and another one example that the image is stored online (remotely). Finally we saw how to load an image from a sub directory which is usually the way to go in real projects; to keep various files organized.
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪
Thank you for sharing this insightful article! I found the information really useful and thought-provoking. Your writing style is engaging, and it made the topic much easier to understand. Looking forward to reading more of your posts!