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 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
- 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.
The Border attribute is deprecated in HTML5 and is not supported.
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.
<img src="pictures/html.jpg" alt="HTML Letters" width="317" height="218">
<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?
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.
- 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.
- Creating images as links with no borders.
- Creating a link to play a sound file in HTML.
- How to insert a movie or video into an HTML document.
- Where can I find free public domain images and pictures?
- HTML help and support.