Science, Tech, Math › Computer Science

Add Images to Web Pages Using HTML

By Jennifer Kyrnin

Updated  2021

Look at any web page online today and you will notice that they share certain things in common. One of those shared traits is images. The right images add so much to a website's presentation. Some of those images, like a company's logo, help brand the site and connect that digital entity to your physical company. 

How to Add an Image to a Web Page Using HTML

To add an image, icon, or graphics to your web page, you need to use the tag in a page's HTML code. You place the

IMG

tag in your HTML exactly where you want the graphic to display. The web browser that is rendering the page's code will replace this tag with the appropriate graphic once the page is viewed. Going back to our company logo example, here is how you could add that image to your site:

The SRC Attribute

Looking at the HTML code above, you will see that the element includes two attributes. Each of them is required for the image.

The first attribute is the "src". This is quite literally the image file that you want to be displayed on the page. In our example are we using a file called "logo.png". This is the graphic that the web browser would display when it rendered the site.

You will also notice that before this file name, we added some additional information, "/images/". This is the file path. The initial forward slash tells the server to look into the root of the directory. It will then look for a folder called "images" and finally the file called "logo.png". Using a folder called "images" to store all a site's graphics is a pretty common practice, but your file path would be changed to whatever is relevant for your site.

The Alt Attribute

The second required attribute is the "alt" text. This is the "alternate text" that is shown if the image fails to load for some reason. This text, which in our example reads "Company Logo" would be displayed if the image fails to load. Why would that happen? A variety of reasons:

• Incorrect file path
• Incorrect file name or misspelling
• Transmission error
• File was deleted from the server

These are just a few possibilities for why our specified image may be missing. In these cases, our alt text would display instead.

What Is Alt Text Used for?

Alt text is also used by screen reader software to "read" the image to a visitor who is vision impaired. Since they cannot see the image like we do, this text lets them know what the image itself is. This is why alt text is required and why it should clearly state what the image is! 

A common misunderstanding of alt text is that it is meant for search engine purposes. This is not true. While Google and other search engines do read this text to determine what the image is (remember, they cannot "see" your image either), you should not write alt text to appeal solely to search engines. Author clear alt text that is meant for humans. If you can also add some keywords into the tag that appeal to search engines, that is fine, but always make sure the alt text is serving its primary purpose by stating what the image is for anyone who cannot see the graphics file.

Other Image Attributes

The

IMG

tag also has two other attributes that you may see in use when you put a graphic on your web page — the width and the height. For example, if you use a WYSIWYG editor like Dreamweaver, it automatically adds this info for you. Here's an example:

The

WIDTH

and

HEIGHT

attributes tell the browser the size of the image. The browser then knows exactly how much space in the layout to allocate, and it can move on to the next element on the page while the image downloads. The problem with using this information in your HTML is that you may not always want your image to display at that exact size. For example, if you have a

responsive website

 whose sizing changes based on a visitors screen and device size, you will also want your images to be flexible. If you state in your HTML what the fixed size is, you will find it very hard to override with responsive

CSS media queries

. For this reason, and to maintain a separation of style (CSS) and structure (HTML), it is recommended that you do NOT add width and height attributes to your HTML code.

One note: If you do leave these sizing instructions off and do not specify a size in CSS, the browser will show the image at its default size anyway.

Edited by Jeremy Girard