The img element

Go back to HTML and CSS Index

A page without media or style instructions is a bit dull - right? In this lesson, we will add some more images to our page to make it look more interesting.

Images and rights

To be able to insert images on our page, we need to actually have some. You might have some on your computer already and they will most likely work just fine. If you don't have any, however, no worries! There are plenty of images online - but when you use them on a public website, make sure that you are actually allowed to do so. You might have heard of a term called copyright.

Now, you can use Google to find images that are free to use, share or modify, even commercially, by doing an advanced image search, or you can use a website like Unsplash - just make sure to read what the website says about the license.

File naming conventions

When naming your files, choose filenames that make sense and follow the rules below.

  • Avoid character spaces in filenames
  • Avoid special characters like ?, /, % and #
  • Use proper suffixes - eg .jpg
  • Use lowercase
  • Keep filenames as short as possible

An image named B21908.jpg doesn't give you any clue as to what's on it. If it is an image of a grey cat, name it something like grey-cat.jpg!

File structure

Good and meaningful filenames and good file structure is really important when working with web development. Websites often consist of a ton of files, and if you are not careful, you may end up spending a lot of time searching for the file, you need.

A good idea is to keep different file types in their own folder, so that the main project folder contains all .html files and a number of subfolders for eg. images, stylesheets, scripts and videos.

  • In your project folder, create a new folder and call it img or images (if you don't have one already).
  • Copy or save all images you want to have on your website to that specific folder. Remember to rename them so that you know exactly what's on them.

Here is an example of how it might look:

GW

about.html

img

red-dress.jpg

white-shirt.jpg

Inserting the images

To insert images on our page, we use the img tag as mentioned in the previous lesson.

The img tag is a bit different than the other tags we have seen so far: 1) it has two attributes that are required as a standard: src and alt, and 2) it does not have and end tag. We refer to this as an empty element as you cannot nest anything inside it.

<img src="img/red-dress.jpg" alt="Red dress">
Example 4.10 | The img element

The src attribute specifies the path for the image. As I want the image on the about page (about.html), I start from there and then ask myself, what path I have to take to get to the image that I want to insert. Everytime I go into a subfolder, I type a /.

The alt attribute specifies an alternative text for the image if the image for some reason cannot be displayed. Good alt texts describe what's on the image in a way that makes sense when read aloud as screen readers actually read the alt text aloud.

Specifying image width and height

To specify the width and/or height of the image, we can use the width and height attributes:

<img src="img/red-dress.jpg" alt="Red dress" width="300" height="200">
Example 4.11 | Image with specified width and height

The width and height attributes specify the width and height of the image, in pixels.

When you specify both the width and height of the image, the space for the image is reserved - even if the image for some reason cannot be displayed.

Be sure to get the aspect ratio right - otherwise the image may be stretched - and also remember that even if you downsize an image on your website this way, the file size of the image remains the same.

NB: There are other, more efficient, ways to specify the width and height of an image - we will get back to that later when we dive into CSS.

Try it out

  • Find some (at least 2) images, rename them and save them into the img subfolder in your project folder.
  • In the about.html file, insert two img elements.
  • You have succeeded with the assignment, if the images appear on your about page.

Next up

Ok, so we now have some more images on our page. In the next lesson, we will add another page and a link so that we can actually navigate back and forth on our site.

Next up: Adding and linking pages