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
This is the original image. I wanted to fix how the photo isn't fully centered or focused on the clock alone.
Describe the cropped result
What I changed: I cropped the photo to focus on the clock alone.
  • Dimensions: 2237 × 2077 px
  • Format: JPG / WebP
  • File size: 225 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 300px width for content.
  • Dimensions: 300 × 533 px
  • Format: JPG / WebP
  • File size: 23.4 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: 2250 × 3000 px
  • Format: JPG / WebP
  • File size: 1.82 MB

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: 4896 × 3264 px
  • Format: JPG / WebP
  • File size: 7.62 MB

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: 3000 × 4000 px
  • Format: JPG / WebP
  • File size: 364 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 you changed: exported as JPG/WebP at ~70–80% quality.
  • Dimensions: 3000 × 2250 px
  • Format: JPG / WebP
  • File size: 47.1 KB