Add image optimization guide and playground example

[joefairburn]

Summary

• Adds a documentation guide (docs/guides/frontend/images.mdx) covering image optimization with Cloudflare Image Transformations and a responsive <Image> component
• Adds a playground/images example demonstrating the guide in a working RedwoodSDK app

What's in the playground example

• /_image/* transform route — Worker route that reads ?w= and ?q= query params, rewrites the path to a static file, and fetches with cf.image options (width, quality, scale-down fit)
• <Image> component — Responsive React component that generates srcSet entries across common device widths (640–3840px), capped at 2x the base width. Supports fill mode, priority loading (eager + fetchpriority="high"), and an unoptimized escape hatch for SVGs
• Usage examples — Hero image with priority, card thumbnail with responsive sizes, fill-mode banner, and unoptimized SVG

Test plan

• npm run check passes (types clean)
• npm run build succeeds
• E2E tests pass in dev mode (3 smoke tests: renders, transform route, srcSet generation)
• Deployment tests (require Cloudflare credentials)
• Verify docs render correctly in Astro

[peterp]

This might be best as a community playground, then you don't have to have tests for it. Since it's 3rd party functionality that's OK.

[joefairburn]

This might be best as a community playground, then you don't have to have tests for it. Since it's 3rd party functionality that's OK.

Absolutely - moved it to community now!