Web Photo Prep

You turn the owner's raw photos into images that load fast, look right and leak nothing: cropped with intent, sized for where they appear, honest light corrections, the right format for the job, metadata stripped, and product shots cut out cleanly on a consistent background. Everything runs locally with Pillow and an open-source background-removal model; nothing is uploaded to a third-party service. You look at every result before the owner does.

When to use

• "Get these photos ready for the website", "the homepage is slow, the images are huge".
• "Make product photos on white for the shop", "remove the background from these".
• "Crop this for the hero / for Instagram / for the team page."
• "These photos are wonky and dull", "make all the product shots match".
• "Make the responsive images and the HTML for this page."
• Before any photo from a phone goes public (location data).

What you need

• The originals at full size (not screenshots or messaging-app copies, which are already compressed). Keep them untouched in originals/.
• Where each image will appear: page and slot (hero, card, product grid, article), the displayed width, and the platform (own site, a shop platform, a marketplace, social). Check the platform's current image rules with web_search when it has them.
• Any brand rules for product shots (background colour, margin, shadow) or a sample of existing images to match.
• Permission: photos of identifiable people only with the owner's confirmation they may be published.
• Your computer set up: run the check in references/setup.md first, every time (installs outside /home/user are lost when the computer is rebuilt); step 7 installs background removal. Copy scripts/photo_prep.py and scripts/gfx_check.py into <job>/tools/.

Method

1. Inventory.
   • ~/.venvs/gfx/bin/python tools/photo_prep.py info originals/photo.jpg for each file: size, format, colour profile, orientation, and whether it carries a GPS location.
   • Make a contact sheet (tools/gfx_check.py contact sheet.png originals/*) and look at it with vision_analyze to spot the unusable ones (blurred, too small, wrong subject) before working on them.
2. Decide each image's job
   • : slot, aspect, displayed width, format and budget (references/web-image-specs.md).
   • Write it as a short table; it is the spec you check against at the end.
3. Crop around the subject
   • , never just the centre: find the focus point with vision_analyze, then tools/photo_prep.py fit in.jpg out.webp --size 1600x900 --focus 0.6,0.4.
   • Rules for faces, products and text-safe areas: references/crops-and-cutouts.md.
   • Never upscale; get a larger original or use a smaller slot.
4. Light corrections only when they help
   • : tools/photo_prep.py adjust in.jpg out.jpg --rotate 1.2 --autocontrast 0.5 --saturation 1.05.
   • Compare before and after with vision_analyze; keep the original look when you can't name the improvement.
   • Never change how a product really looks.
5. Cut-outs for products (and people when needed):
   • ~/.venvs/rembg/bin/rembg i -m isnet-general-use product.jpg product-cutout.png (always pass -m: the default model is licensed for non-commercial use only).
   • Check edges on dark and bright backgrounds (snippet in references/crops-and-cutouts.md) with vision_analyze.
   • Place consistently: tools/photo_prep.py pad product-cutout.png product.jpg --size 2048x2048 --bg ffffff --margin 0.08 --shadow.
6. Export for the destination.
   • Own website: tools/photo_prep.py variants in.jpg out/ --aspect 16:9 --widths 640,960,1280,1920 --formats avif,webp,jpeg --sizes "100vw"; it prints the <picture> markup with width, height and srcset.
   • A size budget: tools/photo_prep.py compress in.jpg out.webp --max-kb 150.
   • Social, email, shop platforms that convert uploads: JPEG at quality 85 to 90 at the platform's size. Every output is upright, sRGB and stripped of metadata.
7. Check the results.
   • A contact sheet of the outputs, then full-size spot checks with vision_analyze: compression damage (blocky skies, smeared skin, halos), crops cutting heads or products, colour casts, leftover background in cut-outs.
   • photo_prep.py info on a few outputs to confirm sizes and that no GPS remains.
8. Hand over.
   • With show_card (type media, the contact sheet and two or three key images), the output folder, the markup if the images are for the site, and alt text for each image.
   • Replacing images on a live website or shop is done only when the owner asks and has connected the account; otherwise give them the files and the markup.

Output

• out/ with files named <subject>-<width>w.<ext> (or the platform's naming), at the agreed sizes and formats, under the budgets.
• For the website: the <picture> markup per image, with alt text and the right sizes, fetchpriority="high" on the hero and loading="lazy" on the rest.
• A short table: file, use, dimensions, KB, format, what was done (crop, straighten, cut-out).

  | File                         | Use           | Size       | KB  | Done                          |
  | ---------------------------- | ------------- | ---------- | --- | ----------------------------- |
  | bakery-hero-1920w.avif       | Home hero     | 1920x1080  | 168 | crop 16:9 focus 0.6,0.4, levels |
  | mug-blue-2048.jpg            | Shop product  | 2048x2048  | 212 | cut-out, white, 8% margin     |
  | team-anna-1080w.webp         | Team page     | 1080x1350  | 74  | crop 4:5, straightened 1.2°   |
  

• originals/ untouched.

Checks before you finish

• Every output matches its spec row: aspect, pixel size (no upscaling), format, under budget.
• No output carries GPS or camera metadata (photo_prep.py info), and all are sRGB.
• Faces and products are whole and well placed; nothing important cropped.
• Cut-outs are clean on the final background; product sets share size, margin and shadow.
• No visible compression damage at full size.
• Alt text written for every image that carries meaning; decorative ones marked alt="".

Pitfalls

• Uploading 6000 px phone photos. Size to the slot times two, and ship responsive variants.
• Centre crops. Crop around the subject with a focus point.
• Upscaling to hit a size. It only looks worse; ask for a larger original.
• Over-editing. Heavy saturation and contrast look cheap; product colours must stay true.
• Leaving location data in. Phone photos reveal where they were taken; strip every file.
• rembg's default model. Non-commercial licence; always choose the model with -m.
• Lazy-loading the hero. It delays the most important image; use fetchpriority="high" instead.
• Working on the only copy. Keep originals/ untouched so any step can be redone.