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

Black Bear Diner sign
Original image of Black Bear Cafe sign on a wall.
Wall cropped out
Cropped outside of bear and the wall behind it.
  • Dimensions: 4032 × 3024 px
  • Format: JPG
  • File size: 695 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 of crawish painted on egg.
Resized image to be suitable for the web.
Resized to 800px width for content. Lost a bit of quality.
  • Dimensions: 800 × 1067 px
  • Format: JPG
  • File size: 216 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original image of meat on shelf at grocery store
Original image — meat at grocery store.
Image of meat tilted
Rotated meat at grocery store to appear to slide off of shelf.
  • Dimensions: 4032 × 3024 px
  • Format: JPG
  • File size: 1.8 MB

Flip

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

Original orientation of dog drinking from hose
Original orientation.
Dog drinking water hose from the sky
Flipped vertically for an upside down dog. As a Jeopardy! question might ask: What is Up Dog?
  • Dimensions: 800 × 1067 px
  • Format: JPG
  • File size: 667 KB

Exposure / Contrast

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

Underexposed original image
Original photo without extra exposure.
Brightened image with improved contrast
Increased exposure slightly; added contrast, as if in a tragic backstory flashback on CSI.
  • Dimensions: 4032 × 3024 px
  • Format: JPG
  • File size: 5.7 MB

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 of dog on floor
Exported as JPG/WebP at 70% quality.
  • Dimensions: 1792 × 960 px
  • Format: JPG
  • File size: 127 KB