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

Uncommon moth species found on glass sliding door.
Original image. There is a little bit of empty space that does not need to be there.
Edges of image are closer to moth.
What you changed: Cropped the image of the moth closer to try to put it at the center.
  • Dimensions: 1642 × 2644 px
  • Format: JPG
  • File size: 270.46 KB

Resize

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

Bullfrog on path at the park.
Original large image (too big for web use).
Resized image suitable for web
What you changed: Changed the image size of the bullfrog from around 2000px to 800px.
  • Dimensions: 800 × 533 px
  • Format: JPG
  • File size: 125.66 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original image slightly tilted
Original image — horizon tilted.
Image with corrected horizon
What you changed: Used the Free Transform tool to rotate the moth 90.1 degrees.
  • Dimensions: 3024 × _4032 px
  • Format: JPG
  • File size: 665.31 KB

Flip

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

Original orientation
Original orientation.
Horizontally flipped image
What you changed: Flipped the duck horizontally 90 degrees.
  • Dimensions: __4032____ × __3024____ px
  • Format: JPG
  • File size: 1.05 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 the exposure a little bit and increased the contrast to 73%.
  • Dimensions: 3024 × 4032 px
  • Format: JPG
  • File size: 833.01 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.
Optimized JPG or WebP
What you changed: Exported as webp at 80% quality.
  • Dimensions: 3024 × 4032 px
  • Format: WebP
  • File size: 524.5 KB