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

Two horses grazing facing away from the camera.
Original image. I would like for the image to only be of the horse on the left.
One horse grazing facing away from the camera.
I cropped out most of the right side of the photo so that just horse on the left is now only visible.
  • Dimensions: 707 × 893 px
  • Format: JPG
  • File size: 115 KB

Resize

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

Pen drawing of foods with pens.
Original large image (too big for web use).
Pen drawing of foods with pens.
What you changed: resized to 400px width for thumbnail.
  • Dimensions: 400 × 533 px
  • Format: JPG
  • File size: 37 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Brown calf behind a feeder surrounded by cows.
Original image — calf isn't well framed.
Brown calf behind a feeder surrounded by cows.
What you changed: Rotated the image to have the foreground fencing framing the calf.
  • Dimensions: 2881 × 2016 px
  • Format: JPG
  • File size: 897 KB

Flip

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

Golden hour skyline with many trees and flowers in the foreground, and pastures in the background.
Original orientation.
Golden hour skyline with many trees and flowers in the foreground, and pastures in the background.
Horizontally flipped image to see what it would look like.
  • Dimensions: 8064 × 6048 px
  • Format: JPG
  • File size: 4.3 MB

Exposure / Contrast

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

A field surrounded by tree lines, and a low clouds in the sky.
Original underexposed photo.
Slightly brightened image with strengthened contrast of a field surrounded by tree lines, and a low clouds in the sky.
What you changed: Lightly increased exposure and added more contrast to the image.
  • Dimensions: 4032 × 3024 px
  • Format: JPG
  • File size: 537 KB

Format / Compression

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

Digital drawing of a cartoon fox.
Original PNG (large size).
Digital drawing of a cartoon fox.
What you changed: exported as JPG/WebP at ~60% quality.
  • Dimensions: 2400 × 2400 px
  • Format: JPG
  • File size: 131 KB