# Photo Portfolio — responsive images, build step, and watermarking

This starter includes:
- Responsive <picture> markup that serves AVIF/WebP/JPEG variants using srcset.
- Example `photos.json` entries that contain `srcset` strings and `thumb` / `large` fields.
- A Node script (`scripts/generate-images.mjs`) that uses `sharp` to produce thumbnails and responsive derivatives from high-res originals.
- Optional visible watermarking of generated derivatives (configurable text or logo).

Watermarking
- By default in the example script `scripts/generate-images.mjs`, watermarking is disabled or configurable via the WATERMARK block near the top of the file.
- You can enable watermarking and choose `type: 'text'` (SVG text overlay) or `type: 'logo'` (composite a logo file).
- For logo mode, place a logo at `assets/watermark-logo.png` (or change `WATERMARK.logoPath`), and the script will resize and composite it onto each derivative.

Quick start
1. Install dependencies: `npm install`
2. Put source images in `src-originals/` named like `001.jpg`, `002.jpg`, ...
3. (Optional for logo watermark) place `assets/watermark-logo.png`.
4. Adjust watermark settings in `scripts/generate-images.mjs` (WATERMARK block).
5. Run: `npm run build:images` — outputs files to `images/` (320, 400, 800, 1400 widths in jpg/webp/avif).
6. Update `photos.json` to point to generated files if needed.

Important notes & recommendations
- Watermarking is applied to generated derivatives. Keep your original masters unwatermarked unless you intentionally want watermarks on all copies.
- A subtle watermark helps discourage casual reuse, but cannot fully prevent a determined actor from copying (screenshots, cropping, re-encoding).
- Consider watermark placement and opacity carefully — make it visible enough to assert copyright while not obstructing the viewing experience.
- For a production workflow with many assets, consider using a CDN/image service that can apply on-the-fly watermarking and signed URLs (Cloudinary, Imgix, etc.).

If you'd like, I can:
- Tune font size, margin, and watermark styling to match your visual identity.
- Add an option to watermark only certain sizes (e.g., watermark thumbnails but not tiny previews).
- Produce a small script that updates `photos.json` automatically with generated filenames.