Placing an image on a page needs three things: the right path, a size that keeps its proportions, and alternative text that describes it. This skill appears in web tasks with supplied pictures, and it joins the proportion work from resizing an image without changing its aspect ratio to the paths in relative links.
What does the img element need?
<img src="images/hall.jpg" width="300" height="200" alt="Club members setting up chairs in the school hall">srcis the path to the file.widthandheightare the displayed size in pixels.altis the text description.
The img element has no closing tag.
How do you set the size step by step?
- Find the original size from the file properties, written width × height.
- Decide the new width from the brief.
- Calculate the scale factor = new width ÷ original width.
- Calculate the new height = original height × scale factor.
- Check the ratio: new width ÷ new height should equal the original width ÷ original height.
- Write the alt text after you have looked at what the picture shows.
Worked example
An invented photo hall.jpg is 1200 × 800 pixels. The brief says it must be 300 pixels wide.
Step 1: scale factor = 300 ÷ 1200 = 0.25.
Step 2: new height = 800 × 0.25 = 200.
Step 3: check: 300 ÷ 200 = 1.5, and 1200 ÷ 800 = 1.5. The ratio matches.
Step 4: the picture shows club members arranging chairs. The code is:
<img src="images/hall.jpg" width="300" height="200" alt="Club members arranging chairs in the school hall">The mistake to watch for
A common slip is to type both numbers from the brief without calculating.
<img src="images/hall.jpg" width="300" height="300" alt="image">There are two faults. The height 300 does not follow the ratio: 300 ÷ 300 = 1, not 1.5, so the hall looks tall and narrow. And “image” tells a screen reader user nothing.
The correction is height 200, and a description such as “Club members arranging chairs in the school hall”. If a brief fixes only the width, you may also leave out the height and let the browser keep the ratio.
Check yourself
1. An image is 900 × 600. It must be 450 wide. What height keeps its proportions?
Show answer
Scale factor = 450 ÷ 900 = 0.5. Height = 600 × 0.5 = 300.
2. An image is 1600 × 1000 and must be 400 wide. Give the new height.
Show answer
Scale factor = 400 ÷ 1600 = 0.25. Height = 1000 × 0.25 = 250.
3. Which alt text is better for a photo of a hand-painted poster: alt="poster1.jpg" or alt="Hand-painted poster announcing the photo club exhibition"?
Show answer
The second. It says what the picture shows and why it is on the page. The first only repeats the file name.
Where this leads next
Next, check whether a page uses tables and layout features the way a brief asks in Check required table or layout features without obsolete assumptions. Return to the module guide and confirm your sizes with the practical task and evidence checker.
Students can calculate the size correctly and still forget the description, which a marker looks for separately. Our teachers go through both in online one-to-one ICT tuition.