How to add pictures to an HTML website
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 (HyperText Markup Language) code and an image file. The file can be from a different web page or stored on a web server.
Using the <img> tag
You may add an image using the <img> tag in the HTML code for a web page. In the <img> tag, you must 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 <img> tag means the border around the image would be 1 pixel wide.
The border attribute is deprecated in HTML5 and is not supported or required anymore.
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 (Uniform Resource Locator) 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.
Example one
<img src="html.png" alt="HTML" width="350" height="250">
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
<img src="/images/html.png" alt="HTML" width="350" height="250">
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.
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?
Example three
<img src="https://www.computerhope.com/jargon/h/html.png" alt="3D HTML" width="350" height="350">
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.
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.
What image formats can I use on a web page?
The most common image formats for pictures, photos, logos, and other images are JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), and PNG (Portable Network Graphics). Other image formats that are not widely supported, such as BMP (bitmap), may not work in all browsers.
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.