How to Embed an Image in an HTML page

In order to embed an image in an HTML page, we use the img tag with the following format:

<img src="/images/name_of_image.picture_format style= "height=height_of_image; width=width_of_image;" alt="name_of_image;>

Elements to Embed Image

src- The src attribute allows you to indicate the URL or location where the image is located. This image above is in the images folder, but the image you are trying to embed may not be.

height and width attributes- The height and width attributes are used to indicate the size of the image. The browser uses this information to indicate how much space to reserve on the page for the image. If you leave out the height and width attributes, the browser determines the size automatically, but you aren't guaranteed to see the text until all the images have downloaded. Adding these attributes lets the browser format the page without waiting for the images.

alt- The alt attribute stands for alternate text. This is used when search engines are indexing images to know what your image is about. For example, when looking for an image in Google Images, this is the text that google uses to find relevant images. The alt attribute text is also the text that shows if an image doesn't download propery or if the internet user has images turned off and is used by screen readers.

Below is an example of an embedded image in HTML.

The HTML code to produce the image above is:

<img src="/images/embed_image_example_HTML.png" style="width: 443px; height: 97px;" alt="How to Embed an Image in HTML example">