Reserve image space and choose image sources
See this course’s project requirements
A before/after optimization record for a supplied local page, with resource-size accounting, reserved image dimensions, fewer blocking resources and repeatable browser measurements.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Deliver an inventory and measurement table separating bytes, requests, timing, and content checks.
- Produce a delivered-image byte comparison and a preserved-content visual check.
- Verify aspect-ratio reservation and responsive fit, with an appropriate vector/raster source explanation.
- Produce a before/after CSS request-count and preserved-style comparison.
- Retain five actual samples, a correctly calculated median, and an explicit timed-block boundary.
- Deliver a measured, preserve-content before/after packet with performed and unavailable checks separated.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
Serve the supplied folder locally with python3 -m http.server 8765 --bind 127.0.0.1. Compare before.html and after.html. Both show the same original yellow-circle reference graphic and text; only resource packaging and image reservation change.
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
Reserve image space and choose image sources — original worked practice
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
Serve the supplied folder locally with python3 -m http.server 8765 --bind 127.0.0.1. Compare before.html and after.html. Both show the same original yellow-circle reference graphic and text; only resource packaging and image reservation change.
1. Step 1
Compare the before image with after.html width="800" height="400". Calculate its aspect ratio 800/400.
You should see: The declared ratio is 2:1.
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
2. Step 2
Read combined.css: max-width:100% and height:auto retain the ratio while fitting the container.
You should see: The image can shrink without distortion.
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
3. Step 3
Reload the after page under a browser network throttle and observe whether text shifts when the image arrives.
You should see: An actual reserved-space observation, not a guaranteed score.
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
4. Step 4
Document why this supplied SVG scales; note that a photographic raster may instead need correctly sized srcset variants.
You should see: An image sizing and source-choice record.
Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout.
What to finish
Verify aspect-ratio reservation and responsive fit, with an appropriate vector/raster source explanation.
Watch for this
Setting a fixed height that distorts the image or claiming reserved dimensions eliminate every source of layout movement.
How can I tell I understand it?
Demonstrate the rule: Width and height attributes provide an aspect ratio before the image loads. Responsive sizing changes display size without requiring an oversized layout. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.