Be able to adjust the contrast of an image
12 Images
Objective
Be able to adjust the contrast of an image 🎨.
What is Contrast?
Contrast is the difference in brightness between the darkest and lightest parts of an image. Think of it like the difference between a black night sky and a bright sunny day. A high‑contrast image has deep blacks and bright whites, while a low‑contrast image looks more washed out or softer.
Why Adjust Contrast? 🤔
- Make hidden details pop out (like a detective finding clues).
- Improve readability of text over images.
- Give a photo a dramatic or soft mood.
- Prepare images for printing or web publishing.
How to Adjust Contrast in a Typical Image Editor
- Open the image in your editor (e.g., Photoshop, GIMP, Paint.NET).
- Navigate to Image > Adjustments > Brightness/Contrast or a similar menu.
- Move the Contrast slider:
- Positive values increase contrast.
- Negative values decrease contrast.
- Preview the changes in real time.
- When satisfied, click OK or Apply.
Using CSS to Adjust Contrast on the Web
You can change contrast with the filter property. The syntax is filter: contrast(percentage); where 100% is the original contrast, 0% is a completely gray image, and values above 100% increase contrast.
Exam Tip Box 📋
contrast(0%) turns the image into a flat gray, which is rarely useful.
Contrast Adjustment Table
| Slider Value | Effect on Image |
|---|---|
| 0% | Completely gray – no contrast. |
| 50% | Soft, muted look – details are subtle. |
| 100% | Original image – normal contrast. |
| 150% | High contrast – darks deepen, lights brighten. |
| 200% | Very high contrast – can create a poster‑style effect. |
Quick Practice Exercise
1️⃣ Open any photo you like. 2️⃣ Try setting contrast to 70% and note the difference. 3️⃣ Then set it to 120% and compare. 4️⃣ Write a short sentence explaining how the image changed. 📖 Remember: Higher contrast = more dramatic; lower contrast = softer.
Revision
Log in to practice.