How to Add Images to Websites
This guide walks through how to add images to websites with the <img> tag, including an examination of the various style options you can apply to the pictures.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this tutorial, we will learn how to work with images in html.

Beginning with a new <div>, add the image tag, <img>. It has a default option called source, where you can specify the path or the URL of an image. It is represented as so:

<img src = 'URL' >

URL is the string you'll find on the browser address.

large

I prefer to use wikimedia.org, as the images are free for reuse.

Copy this URL and paste it in your image tag.

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Mount_Kilimanjaro_Dec_2009_edit1.jpg">
</div>

You can now see the same image on your HTML page.

medium

As shown above, this image is not proportionate to the webpage causing you to scroll horizontally to view the full image. To avoid this, you can reduce the width of the image, with the width option. 

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Mount_Kilimanjaro_Dec_2009_edit1.jpg" width="300">
</div>

Now, the image is significantly smaller.

medium

The value you are adjusting is the number of pixels. You can also use percent when you're unsure of the right size in terms of pixels. For example, if I put the width as 100%, this means, the image will fit into the browser window perfectly. If you shrink the size of your browser, say for smartphones, the image will be correspondingly resized.

Like width, you also have the height option that you can use to resize your image. The problem with using both these options together is that the aspect ratio may not be maintained. If you choose to have a width of 800, and a height of 100, the image will stretch horizontally. Likewise, if your height is dramatically larger than your width, then the image will stretch vertically. A more preferred way to resize images is through CSS, which will be in a later section.

The next feature is the alt option. It assists with SEO, so it is important to utilize this tag. In addition, it helps with accessibility. If someone with disability is using your website, the words you put in the alt option will be read out to them. 

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Mount_Kilimanjaro_Dec_2009_edit1.jpg" width="800" alt="Kilimanjaro">
</div>