You'll notice that these pictures are probably way too big for your web page. Luckily, you can tell the browser to shrink the size of your picture.* There are two attributes to do this--height and width. Can you guess what these do?

Let's change the width of our picture to something more reasonable. (You can do this to any picture file that you like.) In the HTML Playground try changing your image tag to this:

<img src="images/seal.jpg" width="200">

This makes the width of your picture 200 pixels wide. At the same time, the browser automatically shrinks the height so that the two are in proportion. You can also change the height attribute in the tag:

<img src="images/seal.jpg" height="100">

Or both at once:

<img src="images/seal.jpg" height="100" width="200">

Notice that when you do this, you may misshape the picture a little.

Play around and add lots of pictures to your HTML document in the playground. Here again are the ones we have for you to use.

*FYI: It's usually better to adjust an image's size by using an image editing program like Photoshop, but we've taught you the easier way because the other method is beyond what we can cover here.