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 with HTML code and an image file. The file can be from a different web page or stored on a web server.
Using the ![]()
tag
You may add an image using the tag in the HTML code for a web page. In the
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 that lets you specify a border around the image. The border attribute is defined in pixel size. For example, using border=1 in the tag means the border around the image would be 1 pixel wide.
Examples
The following examples show 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 and HTML file are on the same server. The second is how you would link to our image from a different server.
The border attribute is deprecated in HTML5 and is not supported or required anymore.
Example one
In this first example, the browser looks for the “html.png” image in the same directory as the HTML file. If this file exists in the same directory, it displays the image.
Example two
Usually, the pictures are not stored in the same directory as the HTML files. In this second example, the browser looks for the “html.png” image in the “images” directory (folder). If this file exists, it displays the image.
Example three
Finally, the example above shows how an image can be loaded from another web page. In this example, you can copy all of the code to show the image at the top of this web page.
In this example, the folder is in the same location as the HTML file. If the images folder was in a different directory (subdirectory), you’d need to change the path relative to where it is located. For further help, see: What is the difference between a relative and absolute path?
What image formats can I use on a web page?
The most common image formats for pictures, photos, logos, and other images are JPEG, GIF, and PNG. Other image formats that are not widely supported, such as BMP, may not work in all browsers.
For help with copying images from another web page, see: How to copy text and images from a web page.
The technique of using others images is called hotlinking. While practicing, it’s okay to use this method to add images to your web page. However, as your web page becomes popular, it should not be used because it uses another server’s bandwidth and could be changed.
Do I need quotes around attributes in the img tag?
Yes. Although today’s browsers can automatically fix errors with missing quotes around an attribute value, we recommend having double quotes (not single quotes) around an attribute value.
Related information
- How to resize an image with HTML.
- How to link an image to another page in HTML.
- How to create a fixed background image on a web page.
- How to create images as links with no borders.
- How to create a link to play a sound file in HTML.
- How to insert a movie or video in an HTML document.
- Where can I find free public domain images and pictures?
- HTML and web design help and support.
