html · level 3 · unit 1 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
width and height save a space before the picture arrives.
Ever gone to tap a link, only for the page to jump so you tap something else? That jump is a . It happens when a picture arrives late and pushes everything below it down.
Give every <img> a width and a height, measured in pixels. A pixel is one of the tiny dots that make up a screen. Now the browser knows how much room to keep, even before the file has downloaded.
The two numbers also give the picture's , its shape. When a phone shows the picture smaller, the browser still keeps a space of the right shape.
<h1>Moss the shop cat</h1>
<img src="cat.svg" alt="Moss asleep in the shop window" width="800" height="600">
<p>Moss has lived in the shop since 2019. Say hello when you visit.</p>Press show my page to see it here.
Write plain numbers, with nothing after them. Use the picture file's real size.
guess first
Which picture has its space saved?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<img src="dog.svg" alt="Biscuit the beagle">
<img src="ball.svg" alt="A red ball" width="300" height="300">your turn
Your turn. Stop the menu jumping.
The cake picture is 600 pixels wide and 400 pixels tall. Fill in its width and height on line 2.
Press show my page to see it here.
- the picture is 600 pixels widenot checked yet
- the picture is 400 pixels tallnot checked yet
fix it
The page still jumps. Can you fix it?
Press show my page to see it here.
- the picture is still 800 pixels widenot checked yet
- the picture is 600 pixels tallnot checked yet
- The browser knows how wide this picture is. Does it know how tall?
- To keep a space of the right shape, the browser needs both numbers. This picture is 600 pixels tall.
- Add
height="600"afterwidth="800"on line 2, then press run.
nailed it
nothing jumps on your page now. :D
- A layout shift is the page jumping while it loads.
- Give every
<img>awidthand aheight. - Use plain numbers in pixels, from the file's real size.
new words in your collection
- layout shift
- aspect ratio
This lesson isn’t saved. A free account remembers every lesson you finish.