How to add pictures to an HTML website

Updated: 12/31/2017 by Computer Hope
3D HTML Letters

Adding pictures to the pages of your website can often make them more pleasing to the eye and convey information better than using text alone. This process is accomplished by using HTML code and an image file. The file can be from a different web page or stored on a web server.

Using the <img> tag

In the HTML code for a web page, you may add an image using the <img> tag. In the <img> tag, you need to specify four attributes:

  • Src - The source attribute indicates the location of the image. You may use a relative path if the image is on the same server as your site, but images from another site require absolute paths.
  • Alt - The alternate text attribute is a written description of the image.
  • Width - The width of the image.
  • Height - The height of the image.

An optional attribute is Border, which allows you to specify a border around the image. The border attribute is defined in pixel size. For example, using border=1 in the <img> tag means the border around the image would be 1 pixel wide.

Note

The Border attribute is deprecated in HTML5 and is not supported.

Examples

The following examples show the actual HTML used to add the image at the top of this page. They may be inserted anywhere in the body of your page. The first has a shorter URL because the image is stored on our server; the second is how you would link to our image.

Example one

<img src="pictures/html.jpg" alt="HTML Letters" width="317" height="218">

Example two

<img src="https://www.computerhope.com/issues/pictures/html.jpg" alt="3D HTML" width="317" height="218">

What image formats can I use on a web page?

The most common image formats to use for pictures, photos, logos, and other images is JPEG, GIF, and PNG. Other image formats that are not widely supported such as BMP may not work in all browsers.

Do I need quotes around attributes in the img tag?

Yes. Although today's browsers can usually fix any errors with missing quotes around an attribute value, you should always have quotes around an attribute value to prevent errors.