You can use the HTML image tag
<img> to add an image to a webpage. Use the
src attribute to select the image to be shown.
When the web was first invented, web pages could only display text. However, the ability to add an image to a web page was quickly added. Since then, images have become an important part of most pages on the web. From logos to photographs, images are everywhere on the internet.
You can use the HTML
<img> tag with the
src attribute to add an image to a webpage.
This tutorial will discuss, with examples, the basics of images in HTML, how to use the
<img> tag to work with images in HTML, and a few of the main attributes you can use with the
<img> tag. By the end of this tutorial, you’ll be an expert at working with images in HTML.
<img> tag is used to insert an image onto a HTML document. By itself,
<img> does nothing, but by combining it with the src attribute, we can use
<img> to embed image-based content onto a website.
Here’s the syntax for the HTML
Unless you specify otherwise, HTML assumes that the folder storing your HTML file is the same folder that stores any image to which you refer. So, in the above syntax, our
<img> will reference the file
house.png which is in the same folder as the HTML file with which we are working.
However, if we were storing our images in another folder—called pictures, for example—we would use this code:
If we want to embed an image from an external source, we can use an absolute URL. Here’s an example of an
<img> tag referencing an external image:
That said, it is usually best to reference an image from a local file whenever possible. This is because referencing an external image makes the browser do more work than when it retrieves an image from a local file.
HTML Image Example
Let’s explore an example of the HTML
<img> tag in action. Suppose we are building a website for a local coffee house, The Golden Roast. The Golden Roast wants an image of a cup of coffee to appear on their homepage.
The file they gave us to add to the webpage is called coffee.png. The folder that stores our HTML page also stores this image. To add this image to our site, we can use the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png"> </body>
Our code returns:
Let’s break down our code. First, we used a
<body> tag, which stores the main elements of our web page. Then, we used an
<h1> tag to define a heading on our page. The text of this heading is: The Golden Roast.
On the next line, we used an img element to add an image—called coffee.png—to our code. This image is contained within the same folder as our HTML file, so we didn’t need to point to a folder using the src attribute.
Adding alternative text is an important part of working with images in HTML. Alternative text, represented by the attribute
alt, is a textual description of an image.
There are a number of reasons why you should specify an alt attribute when working with images. Alt text:
- Describes an intended but nonexistent image. Alt text is useful if the image cannot be found—for example, because that file does not exist in the folder you specify.
- Describes an intended but slowly-loading image. If the web page visitor has a slow connection, there may be a delay in loading the image.
- Improves accessibility. If the visitor is using a screen reader, having alt text will allow them to hear a description of the image.
Alt text ensures that if an image cannot be rendered for whatever reason, the web page will still present some text to the user, rather than just a broken image icon. This is the default if an image is broken.
Suppose we want to add an alt attribute to the image in our coffee house example above. The alt text we want to specify is
Roasting coffee, surrounded by coffee beans on a light brown wooden table. We can add this alt text using the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table."> </body>
Now, suppose that someone moves our coffee.png file to another folder. As a result, our web page can no longer find the file. This will cause our alt text to appear on the web page because the image cannot be found. Here’s an example of what a visitor will see on our web page in this case:
When you’re adding an alt attribute, try to keep it brief, and use it to describe the image itself. In our coffee example, we described what the image of the coffee contains. We would not want to repeat text that is already on the page because that would be confusing to users.
You can use the title attribute to provide additional information about an image. When used, the title attribute provides a tooltip that appears when a user hovers over an image with the mouse.
The title attribute can be useful if you want to add a tooltip to an image. However, the title attribute does not have screen reader support, and it is not visible on mobile devices (which have no mouse).
Suppose we want to add a title attribute with the value
A cup of coffee on a table to our image from earlier. We can use the following code to do so:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table." title="A cup of coffee on a table"> </body>
When we hover over the image with our cursor, the contents of the title tag appear.
Width and Height
You can use the width and height attributes to specify the width and height of an image, respectively.
Let’s return to our coffee house example. Suppose we want our coffee image to be 400 pixels wide by 400 pixels long because we don’t want it to take up too much space on the web page. We could use the following code to specify these parameters:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400"> </body>
Our code returns:
As you can see, our image in this example is smaller than the one from earlier. In our first example, our image was 500×500, but in this one, our image is 400×400. This is because we specified both a height and width attribute and set each to 400.
When you’re working with an image, you may decide that you want it to float to the left or right of the page. Float refers to the horizontal alignment—left or right—of the image on the page. That’s where the CSS float attribute comes in.
Suppose we want our coffee image from earlier to appear on the right side of the page. We can make this happen using the following code:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400" style="float:right;"> </body>
Our code returns:
In this example, we used the
float:right; attribute within a style attribute to specify that our image should float to the right of our page.
You can use the
<img> HTML tag to place an image on a web page. Images can be rendered from a local file or folder or from an external source.
This tutorial discussed, with examples, how to work with the
<img> tag in HTML and how to use a few of the attributes offered by the HTML
<img> tag. Now you’re equipped with the knowledge you need to start using images in HTML like a pro!