Web Image Optimization

Using your own photos to practice core editing skills in a web workflow.

Replace each example with your own work. For each technique, show a Before and an After image, then describe what you changed. Record dimensions, format, and final file size for the After image.

Crop

Goal: remove distractions and improve composition (rule of thirds, subject framing).

Describe your original photo
Original image. I want to focus on the top part of the building.
Describe the cropped result
What you changed: cropped tighter to center the subject.
  • Dimensions: 918 × 997 px
  • Format: JPG
  • File size: 41.3 KB

Resize

Goal: scale the image to an appropriate display width (e.g., 1200px hero, 800px content, 400px thumbnail).

Original large image
Original large image (too big for web use).
Resized image suitable for web
What you changed: resized to 800px width for content.
  • Dimensions: 800 × 571 px
  • Format: JPG
  • File size: 551.7 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original image slightly tilted
Original image — horizon tilted.
Image with corrected horizon
What you changed: rotated to level the horizon using Free Transform.
  • Dimensions: 5400 × 3600 px
  • Format: JPG
  • File size: 1.3 KB

Flip

Goal: create a mirrored composition or correct camera orientation if needed.

Original orientation
Original orientation.
Horizontally flipped image
What you changed: flipped horizontally for better visual flow.
  • Dimensions: 5373 × 3838 px
  • Format: JPG
  • File size: 1.8 KB

Exposure / Contrast

Goal: improve clarity with basic tonal adjustments (exposure, contrast, shadows/highlights).

Underexposed original image
Original underexposed photo.
Brightened image with improved contrast
What you changed: increased exposure slightly; added contrast.
  • Dimensions: 4932 × 3288 px
  • Format: JPG
  • File size: 1.2 KB

Format / Compression

Goal: export to an efficient web format (JPG or WebP) and reduce file size while preserving quality.

Original large PNG
Original JPG (large size).
Optimized JPG or WebP
What you changed: exported as JPG/WebP at ~70–80% quality.
  • Dimensions: 4577 × 3269 px
  • Format: WebP
  • File size: 1.1 MB