Adding Images to Web Pages

Images and Graphics on Web Pages

Workers using software to calibrate springs in office
Monty Rakusen/Cultura/Getty Images

Look at any webpage online today and you will notice that they share certain things in common. One of those shared traits are 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. 

To add an image, icon, or graphic to your web page, you need to use the <img> 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:

<img src="/images/logo.png" alt="Company Logo">

Image Attributes

Looking at the html code above, you will see that the <img> element includes  two attributes. Each of them are 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 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 mispelling
  • 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.

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" you 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 graphic file.

Other 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. An example:

<img src="/images/logo.png" alt="Company Logo" witdth="300px" height="75px">

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, native size anyway.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/9/17