# Resizo Embed — Overview

Resizo Embed is a system of six free, iframe-based image tool widgets that any website can drop in with a single HTML snippet. The widgets are served from [resizo.in](https://www.resizo.in/embed/), run entirely in the visitor's browser, and do not require an API key, account, or backend integration. Embeds are free for personal, commercial, and enterprise use; the only condition is that the small "Powered by Resizo" link in the widget footer remains visible.

## Available widgets

| Widget | Embed route | Purpose |
| --- | --- | --- |
| Image Resizer | `/embed/image-resizer/` | Resize by exact pixel dimensions with aspect-ratio lock. |
| JPG Compressor | `/embed/compress-image/` | Shrink JPG, PNG, and WebP file sizes with a quality slider. |
| WebP Converter | `/embed/webp-converter/` | Convert PNG and JPG to WebP. |
| Passport Photo | `/embed/passport-photo/` | Generate passport / visa photos to official US, UK, EU, India, and Canada specs. |
| Batch Resize | `/embed/batch-resize/` | Bulk-resize many images at once; results download as a ZIP. |
| Watermark Tool | `/embed/watermark/` | Add text watermarks with position, color, opacity, and rotation. |

## Minimal embed snippet

```html
<iframe
  src="https://www.resizo.in/embed/image-resizer/"
  width="100%"
  height="640"
  loading="lazy"
  title="Resizo — Image Resizer"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>
```

Each widget is ~5–10 KB total (HTML + CSS + vanilla JavaScript) and is lazy-loaded by default. There are no frameworks, no tracking SDKs, and no analytics beacons inside the iframe.

## URL parameters

| Parameter | Values | Default | Description |
| --- | --- | --- | --- |
| `theme` | `light`, `dark` | (follows `prefers-color-scheme`) | Forces a fixed visual theme. Omit to auto-match the visitor's OS preference. |

The base URL pattern is `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`.

## Privacy and security model

The embed inherits Resizo's "no upload, no persistence" architecture:

- **No upload.** The widget uses `FileReader` to read the user's file and the HTML5 Canvas API to process it. There is no network endpoint that receives image data.
- **No cookies.** Zero cookies are set inside the iframe. Nothing is written to `localStorage` or `sessionStorage` by default.
- **No telemetry on file content.** Filenames, dimensions, and metadata are not transmitted.
- **GDPR + CCPA compliant by architecture**, not by policy. Verify with DevTools → Network tab — zero requests fire during processing.
- **`sandbox` attribute is not supported.** It must be omitted, because `sandbox` blocks the file downloads the widget depends on. If a strict Content Security Policy is in force, add `frame-src https://www.resizo.in;`.

## Auto-resize protocol (postMessage)

Each widget posts its content height to the parent window whenever the layout changes:

```json
{ "source": "resizo-embed", "type": "size", "height": 742 }
```

The parent page can listen for the message and update the iframe's `style.height` to remove internal scrollbars. Match `event.source` against each iframe's `contentWindow` to route height updates correctly on pages with multiple embeds. No third-party `iframe-resizer` library is required.

## Platform compatibility

The same iframe snippet works on every platform that accepts custom HTML:

- **WordPress** — Custom HTML block (Block Editor) or "Text" tab (Classic Editor). Security plugins may need `resizo.in` whitelisted.
- **Ghost** — HTML card.
- **Webflow** — Embed element.
- **Wix** — Add → Embed Code → Embed HTML.
- **Squarespace** — Code Block.
- **Notion** — `/embed` slash command with the widget URL.
- **Shopify** — Pages → click `</>` (Show HTML) → paste.
- **Static HTML** — paste directly into the file; no build step.

Drop-in components are also provided for **React** (with auto-resize via `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`), and **Angular** (`ngOnInit` / `ngOnDestroy`).

## Browser support

| Browser | Minimum version |
| --- | --- |
| Chrome / Edge (Chromium) | 80+ |
| Firefox | 78+ |
| Safari (incl. iOS Safari) | 14+ |
| Chrome Android | 80+ |

WebP export is fully supported in Chrome, Safari, and Edge. The Canvas API used internally has >98.5% global support per [caniuse.com/canvas](https://caniuse.com/canvas).

## Versioning

The embed is fetched from `resizo.in` at render time, so improvements deploy automatically. The embed *code* you paste into your site stays the same. Breaking URL or message-format changes are avoided; if they become necessary, the old URL will continue to serve the previous behavior under a versioned path.

## Related documentation

- [Embed Generator](https://www.resizo.in/embed/) — interactive builder that emits the iframe snippet.
- [Embed Documentation (HTML)](https://www.resizo.in/embed/docs/) — full integration guide with platform tutorials, framework components, and troubleshooting.
- [Resizo Overview](https://www.resizo.in/docs/overview.md) — what Resizo is and the architectural rationale.
- [How Resizo Works](https://www.resizo.in/docs/how-it-works.md) — browser-based processing pipeline and privacy model.
- [Features](https://www.resizo.in/docs/features.md) — full feature list and social media preset dimensions.