AI Computer Science Academy · Faisalabad

Responsive Web Design

Images and performance

Task 49 of 56 HTML & CSS Accessibility and polish
All tasks
Read first Task 49

Images and performance

Give width and height so the layout does not jump, and lazy-load below the fold.

Definition and example

Images and performance is the focus of this lesson. Give width and height so the layout does not jump, and lazy-load below the fold. The task asks you to apply that idea in a small example: Which loading value defers an off-screen image. Before you run the code, predict what should happen. Then Inspect the rendered page and its element structure and compare it with your prediction. If the result differs, change one relevant line and run it again. Testing one change at a time makes the cause of a result easier to understand.

HTML & CSS 1 automatic check Accessibility and polish
Code editor Ctrl + Enter runs
Run your code to see the output and the checks.
Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

  • The value found in “img” must equal “lazy”.

The task and step-by-step instructions are written as comments at the top of the editor. Change one relevant line, run it, and compare the result with these checks.

Sign in to use up to 8 optional task skips in this course.

Incorrect attempts before answer: 0 / 3

Track progress

0 passed of 56 tasks

Pass every check or use one of your available skips to open the next task.

Sign in to keep your code and certificates.

Next task (pass every check first)