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. Cropped to make the pine trees pop out a bit more.
Describe the cropped result
What I changed: cropped tighter to center the pine trees.
  • Dimensions: 877 × 720 px
  • Format: JPG at 75%
  • File size: 112 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 960 x 720 px.
Resized image suitable for web
What I changed: resized to 800px width for content.
  • Dimensions: 800 × 600 px
  • Format: JPG at 70%
  • File size: 31.2 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original image slightly tilted
Original image — horizon tilted.
Image with corrected horizon
What I changed: rotated to level the horizon using Free Transform.
  • Dimensions: 1732 × 640 px
  • Format: JPG at 70%
  • File size: 93.1 KB

Flip

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

Original orientation
Original orientation.
Horizontally flipped image
What I changed: flipped horizontally for better visual flow.
  • Dimensions: 2048 × 2048px
  • Format: JPG at 70%
  • File size: 236 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 I changed: increased exposure slightly by 0.5; added 34 contrast.
  • Dimensions: 800 × 1067 px
  • Format: JPG at 70%
  • File size: 157 KB

Format / Compression

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

Original large PNG
Original PNG (large size).
Optimized JPG or WebP
What I changed: exported as WebP at 80% quality.
  • Dimensions: 800 × 600 px
  • Format: WebP at 80%
  • File size: 38.1 KB