Everything Images :: The Pictures Page (M11)
Students consistently struggle with how pictures relate to the web - sizes, formats, and proportions. This page makes you experience all of it. AI is expected here: a good start is handing it these instructions and asking for them your way - checkboxes, more nesting, simplified, expanded. It's unlikely to do the image work correctly for you, though.
Get Your Two Images
- Pexels image: find a really big free color photo (~5000×3000 - check "More info" on the picture) with some fine detail. Save it so the name captures the picture, the source, and the photographer: crossing-tagus-river-lisbon-27926305@henrique-baldy_pexels.jpg - no caps, no spaces. Free doesn't mean uncredited. Into your course images folder.
- Personal geometry image: photograph something perfectly square or round (plate, frisbee, milk crate - not an oval or rectangle) with part of you in the shot, ideally your face. The point: a perfectly proportioned object next to something subjective. If the round thing isn't round in the photo, shoot it again. Name it descriptively: frisbee-next-to-head@yourname.
- Careful transferring - emailing/texting images to yourself degrades them. Keep full fidelity from phone to computer.
Set up the Page
- New course page named Pictures or Images (menu name matches), in the primary nav, with the standard header/footer/theme.
- h2: Everything Pictures (or Images), then an explanatory paragraph.
- Two sections, one per image, separated by a horizontal rule. Each starts with an h3 that says something about the image, then a couple sentences: why you picked it, who took it (and something about them), its format and size in pixels and megabytes.
- Within each section, articles with h4s, one per demonstration below. Each image sits in a figure with a figcaption explaining what's happening.
The Demonstrations (Each Image, Both Sections)
- Original Image - four side-by-side links opening in a new tab: the original, a GIF conversion (data loss is fine), a greyscale version, and a black-and-white version.
- Downsizing with CSS - inline CSS shrinks the original at the same proportions (try 10–20% of original). One dimension is usually enough - test it.
- Proper reduction with an editor - resize to a browser-friendly width (~600px). Note it still deserves CSS sizing so the space is allocated while loading.
- Improper proportions with CSS - four images side by side: two squished 33% (then 33% again) one way, two the other way, always keeping one dimension true. Watch the stretching.
- Improper enlarging with CSS - reduce a copy to 25%, then display it at the same CSS size as its bigger sibling: same displayed size, visibly worse quality.
- Name every derivative file for what it is (append dimensions like -600x400 - width before height) so you never touch the original. Sequence and naming discipline is most of this assignment.
Submitting
- The URL of your page - identical on CLT and GitHub Pages, both reachable by links.
- What you had AI do - tools used and a broad overview.
- A couple sentences on your frustrations, challenges, and learning.
- Peer reviews: these instructions (or the standards checklist first) as a GO/NO-GO on at least two classmates who don't already have two reviews.
What gets checked: the page is in the primary nav; it has the Everything Pictures h2, intro paragraph, two h3-titled sections split by a horizontal rule, 6+ h4 articles, figures with captions, new-tab links to the originals, inline-CSS resizing demonstrations, and image names carrying photographer and source.