Adding Pictures

Let’s add a picture!

  • Go to the tab named index.html. Find the </main> tag and type the following above it:
<img src="barn-owl.jpg" alt="A barn owl" width="200px" />

Here’s what the result should look like:

Image code and picture of a bird

Notice that this tag has extra bits of information inside it. They are called attributes.

  • Find the bit of code that says width="200px" and try experimenting with different numbers to see if you can figure out what this attribute does. Don’t delete the letters px!

How the img tag works

Notice that the <img> tag is different from the other tags you’ve used so far — there is no closing </img> tag. Instead, this tag is self-closing: it has /> at the end. This is because there is no ‘start’ and ‘end’ to an image element like there is for text on the page.

The tag contains attributes with extra information:

  • The src attribute tells the browser what file to use for the picture.
  • The alt attribute is a short description that the browser will show if it cannot display the picture. ‘alt’ is short for ‘alternative’. This text also helps people using a screen reader to know what the picture is.
  • The width attribute tells the browser how wide to make the picture. 100px means one hundred pixels, which are the tiny dots that make up what you’re seeing on your screen. If you don’t include this attribute, the picture will be displayed in its original size.

Now that you know the code to put a picture on your website, you probably want to change the picture, right?

  • The first thing you will need is, of course, a picture! You can either use one you’ve already got on your computer, such as a photograph you took, or you can get one from the internet.

Getting pictures from the internet

  • Search for images of the thing you want a picture of.

  • When you find a picture that you like, click on it to open it up full size.

  • Then right-click the picture, and select Save Image As…. Be sure you haven’t selected Save Link As….

Menu with Save Image As selected

  • Type a short name in the box provided.

  • Before you click Save, make a note of which folder your image file will be saved to. You will need to remember this to find the picture later! You can select a specific folder if you wish. When you’re sure you’ll find the image again, click Save.

Note: not all images you will find on the internet are free for anyone to use. If you download a picture, you should make sure it is one that you are allowed to use. Find out more about this here:

Finding images with permissions to use

Because of copyright law, you cannot use everything you find on the web. Here you will learn how to find images that you can use in your digital making without breaking copyright laws.

Copyright law is designed to protect creators of artistic, literary, musical, and dramatic works from having their work exploited or misused. This means that copyright law applies to all manner of materials offline and online, including images and art work.

Anyone who uses a copyrighted work without the owners’ permission is guilty of copyright infringement. This is sometimes true even if a lot of things have been changed about the work.

Many images on the internet are protected by copyright. The copyright symbol © does not have to be present in the image for copyright to exist.

If you want to use an image for which you require permission, you will need to obtain permission from all the copyright owners. Otherwise, you can search for images that are free for you to use through Creative Commons licensing.

Creative Commons

Creative Commons licensing allows the creator of an image to select which permissions they want to give to people to their work for free. With Creative Commons licensing you can give away all rights to your work, or just some of them. There is an online form on the Creative Commons website that helps you to figure out exactly which of your rights you want to give away.

Creative Commons licensing makes it easier for people to find images that they have permission to use. On the Creative Commons site, there is a search tool you can use to find images that have a Creative Commons license. Another good place to look for images available under a Creative Commons license is Wikimedia Commons.

Many search engines also feature a way to search for images with a Creative Commons license, so that people can avoid breaking copyright law.

Searching for images with Google

If you are using Google, follow the instructions below to find an image you can use in your digital making:

  • Go to Google Images and type in what you are searching for. Here, we searched for cat fail:

Cat Fail Search

  • Click on Search Tools, then Usage Rights, and select Labeled for reuse.

Labeled for Reuse

  • Choose an image.

Cat Fail

  • Double-check whether it is free to use. You can use a reverse image search tool like TinEye or Image Raider to check for any further usage rights. Here, I copied the image link from the Google search, pasted it into TinEye, and pressed Search. As you can see, the image has been used many times (781!) all over the internet, so it is likely that it is free to use. If in doubt, you should write to the owner and ask for permission.

Reverse Search

Online safety

If you accidentally discover an image you find upsetting, close your browser immediately and tell an adult.

Once you have a picture, you can upload the file to Trinket:

  • In your trinket, click on the image icon next to the + sign.

The image icon

This is where you can see the pictures that you are able to use on your website. You should see the picture of the barn owl.

  • Click the button Add Image and then click Upload.

  • Click on the button Click To Select Files. Find and double-click your image file in the window that opens.

  • Click Done.

Image upload area

Your picture will be uploaded and should be ready to use.

  • Go to the file index.html and find the <img> tag. Change the text barn-owl.jpg so that it exactly matches the name of the image file you’ve chosen. Note that its name might end in .png instead of .jpg!

The text you just changed is the attribute called src, which tells the browser which file to display.

Note: the value you type for an attribute must have quotation marks "" around it!

Challenge: change the alt text of the picture

  • Find the alt attribute of your image element and change the text in it to a short description of your picture.
< Next