How To Add an Image in HTML

So you want to add an image to your HTML web page. Did you know that images are actually linked to a web page? It means that an image has it's own web address and location and it's linked to a web page from that specific location. So, the image data is loaded from the image file and displayed on the page as a linked object.

Insert image location to an IMG tag

<img src="example-image.png">

The src value is the location of the image, called URL. URL stands for Uniform Resource Locator, a web address, a reference to a web resource and its location on a computer network. The <img> tag creates a holding space for the referenced image. For example: https://www.example.com/example-image.png

Adding an alternate text for an image

Alt text specifies an alternate text for an image. If the image location is not inserted correctly and the image is not displayed then an alternate text is shown instead of the image.

<img src="example-image.png" alt="Example Image">

Adding other variables to an image

The height specifies the height of an image in pixels and the width specifies the width of an image. Height and width can also be inserted an a percentage.

<img src="example-image.png" alt="Example Image" width="500" height="600">

Styling image with CSS

You can use CSS language to change its height, width, and style your image. There are many options available to style and manipulate the image with CSS code.

<img src="example-image.png" alt="Example Image" style="width:500px; height:600px;">

Last update: 2019-01-15 (Y,M,D)