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).

Kitten playing with a toy, with a view of the floor
Too much empty space at the bottom, didn't follow rule of thirds, image too large
Kitten playing with a toy
What you changed: cropped tighter to center the subject.
  • Dimensions: 1200 × 943 px
  • Format: JPG
  • File size: 166.7 KB

Resize

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

Original large image (3024px by 4032px)
Original large image (too big for web use). (3024px by 4032px)
Resized image suitable for web
Resized to 400px width for thumbails.
  • Dimensions: 400 × 533 px
  • Format: JPG
  • File size: 43.3 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original image slightly tilted
Original image — Cat is slightly tilted.
Image with corrected horizon
What you changed: rotated by around 3 degrees to level the top of the cat tree using Free Transform.
  • Dimensions: 1200 × 900 px
  • Format: JPG
  • File size: 100 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, resized down to 1200px width.
  • Dimensions: 1200 × 900 px
  • Format: JPG
  • File size: 184.2 KB

Exposure / Contrast

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

Overexposed original image
Original underexposed photo.
Darkened image with improved contrast, resized to 1200px width
What you changed: increased exposure slightly; added contrast.
  • Dimensions: 1200 × 900 px
  • Format: JPG
  • File size: 150 KB

Format / Compression

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

Original large image (JPG)
Original Image (2.47 MB).
Optimized WebP
What you changed: exported as JPG/WebP at 70% quality. Kept original dimensions to showcase compression.
  • Dimensions: 3024 × 4032 px
  • Format: WebP
  • File size: 276.8 KB