HTML Images

HTML Images allow you to add images to any web page. Images can be added to your page very easily, take a look at the example below:

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png">

We had similar code in the previous section except it was a linked image instead of just an image, take a look at the result of the code above:

Example of an HTML Image

Images have a few attributes that we can use. Take a look at the more common attributes used in images below:

The src attribute

You can see above that we have used examples of the src attribute. This is where we specify the URL to the image.

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png">

The src value above is a URL to the location of the image. This is referred to sometimes as the absolute path to the image. Instead we could use a path that is relative to our domain, which looks like the following:

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png">

And this will give use the same result if we are displaying that image on the devdojo.com. Absolute paths can be an image URL on any website; however, a relative path is only relative to the current domain it is being displayed on.

The alt attribute

The alt attribute is used for SEO purposes and also for screen readers.

A screen reader is software that can read what is displayed on the screen to people who are blind, visually impaired, or learning disabled.

To alt attribute is typically used to describe what the image is. Take a look at the following example of using the alt attribute:

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png" alt="Image of a Ninja">

The width & height attributes

The width and height attributes are fairly simple to understand, they simple specify the width and the height that we want to show the image. Take a look at the following example:

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png" alt="Image of a Ninja" width="100">

Notice that we didn't specify the height attribute for the image. Since we didn't specify the height attribute it will automatically be scaled proportionally or with the same aspect ratio. Take a look at the following example:

Image width attribute

You can see that the image looks smaller then the previous examples and that's because we have told the browser that we want to display the image with a width of 100px and the height is then set automatically.

The same thing will happen if we give our image a height attribute and no width attribute:

<img src="https://cdn.devdojo.com/guides/html/ninja-character-1465343985.png" alt="Image of a Ninja" height="137">

Image height attribute

Great, but what happens if we specified both width and height?

Well, that's ok, just make sure to keep the proportions correctly, otherwise you'll end up with an image that looks like this:

HTML Image with incorrect Proportions

The above example is what happens when you specify incorrect widths and heights for your image. It might become scaled or stretched incorrectly. Here is a quick example of how to keep proportions.

Say we have an image with a width of 200px and a height of 300px. To ensure the image gets displayed correctly we could specify a width and height of 200px and 300px respectively. If we wanted the image to be half of it's normal size we could specify a width of 100px and then the height would need to be 150px. However much you scale the width, you must also scale the height by the same amount otherwise your image may be stretched.

In most cases, just specify the width or the height attribute and let the other scale automatically :)

Ok, even though images are really cool... We must move on.

Let's move ahead to talking about how you can display rows and columns of data on a web page using tables.