# Resizo Embed — Übersicht Resizo Embed ist ein System aus sechs kostenlosen, iframe-basierten Bildwerkzeug-Widgets, die jede Website mit einem einzigen HTML-Snippet einbinden kann. Die Widgets werden von [resizo.in](https://www.resizo.in/de/embed/) ausgeliefert, laufen vollständig im Browser des Besuchers und benötigen weder API-Schlüssel noch Konto noch Backend-Integration. Die Embeds sind kostenlos für private, kommerzielle und unternehmerische Nutzung; die einzige Bedingung ist, dass der kleine "Powered by Resizo"-Link im Widget-Footer sichtbar bleibt. ## Verfügbare Widgets | Widget | Embed-Route | Zweck | | --- | --- | --- | | Image Resizer | `/embed/image-resizer/` | Skaliert auf exakte Pixelmaße mit Seitenverhältnis-Sperre. | | JPG Compressor | `/embed/compress-image/` | Verkleinert JPG-, PNG- und WebP-Dateigrößen über einen Qualitätsregler. | | WebP Converter | `/embed/webp-converter/` | Konvertiert PNG und JPG zu WebP. | | Passport Photo | `/embed/passport-photo/` | Erstellt Pass- / Visumfotos nach den offiziellen Vorgaben der USA, des Vereinigten Königreichs, der EU, Indiens und Kanadas. | | Batch Resize | `/embed/batch-resize/` | Skaliert viele Bilder gleichzeitig in einem Batch; Ergebnisse werden als ZIP heruntergeladen. | | Watermark Tool | `/embed/watermark/` | Fügt Text-Wasserzeichen mit Position, Farbe, Deckkraft und Rotation hinzu. | ## Minimales Embed-Snippet ```html ``` Jedes Widget ist insgesamt rund 5–10 KB groß (HTML + CSS + Vanilla JavaScript) und wird standardmäßig lazy geladen. Kein Framework, kein Tracking-SDK und keine Analyse-Beacons innerhalb des iframes. ## URL-Parameter | Parameter | Werte | Standard | Beschreibung | | --- | --- | --- | --- | | `theme` | `light`, `dark` | (folgt `prefers-color-scheme`) | Erzwingt ein festes visuelles Theme. Weglassen, um sich automatisch an die OS-Präferenz des Besuchers anzupassen. | Das Basis-URL-Muster lautet `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`. ## Datenschutz- und Sicherheitsmodell Das Embed übernimmt die "no upload, no persistence"-Architektur von Resizo: - **Kein Upload.** Das Widget liest die Datei des Nutzers per `FileReader` und verarbeitet sie über die HTML5 Canvas API. Es gibt keinen Netzwerk-Endpunkt, der Bilddaten entgegennimmt. - **Keine Cookies.** Im iframe werden keine Cookies gesetzt. Standardmäßig wird nichts in `localStorage` oder `sessionStorage` geschrieben. - **Keine Telemetrie zum Dateiinhalt.** Dateinamen, Maße und Metadaten werden nicht übertragen. - **GDPR- und CCPA-konform per Architektur**, nicht per Richtlinie. Prüfbar über DevTools → Network-Tab: Während der Verarbeitung wird keine einzige Anfrage gefeuert. - **Das `sandbox`-Attribut wird nicht unterstützt.** Es muss weggelassen werden, weil `sandbox` die Dateidownloads blockiert, von denen das Widget abhängt. Falls eine strikte Content-Security-Policy aktiv ist, ergänze `frame-src https://www.resizo.in;`. ## Auto-Resize-Protokoll (postMessage) Jedes Widget sendet seine Inhaltshöhe an das übergeordnete Fenster, sobald sich das Layout ändert: ```json { "source": "resizo-embed", "type": "size", "height": 742 } ``` Die übergeordnete Seite kann die Nachricht abhören und die `style.height` des iframes aktualisieren, um interne Scrollbalken zu entfernen. Vergleiche `event.source` mit dem `contentWindow` jedes iframes, um Höhenaktualisierungen auf Seiten mit mehreren Embeds korrekt zuzuordnen. Eine zusätzliche `iframe-resizer`-Bibliothek von Drittanbietern ist nicht erforderlich. ## Plattformkompatibilität Dasselbe iframe-Snippet funktioniert auf jeder Plattform, die benutzerdefiniertes HTML akzeptiert: - **WordPress** — Custom-HTML-Block (Block-Editor) oder Reiter "Text" (Classic-Editor). Sicherheits-Plugins müssen `resizo.in` ggf. auf die Whitelist setzen. - **Ghost** — HTML-Karte. - **Webflow** — Embed-Element. - **Wix** — Add → Embed Code → Embed HTML. - **Squarespace** — Code-Block. - **Notion** — Slash-Befehl `/embed` mit der Widget-URL. - **Shopify** — Pages → Klick auf `` (Show HTML) → einfügen. - **Statisches HTML** — direkt in die Datei einfügen; kein Build-Schritt. Drop-in-Komponenten stehen außerdem für **React** (mit Auto-Resize via `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`) und **Angular** (`ngOnInit` / `ngOnDestroy`) bereit. ## Browserunterstützung | Browser | Mindestversion | | --- | --- | | Chrome / Edge (Chromium) | 80+ | | Firefox | 78+ | | Safari (inkl. iOS Safari) | 14+ | | Chrome Android | 80+ | Der WebP-Export wird in Chrome, Safari und Edge vollständig unterstützt. Die intern verwendete Canvas API hat laut [caniuse.com/canvas](https://caniuse.com/canvas) eine weltweite Unterstützung von >98,5 %. ## Versionierung Das Embed wird zur Renderzeit von `resizo.in` geladen, sodass Verbesserungen automatisch ausgerollt werden. Der *Code* des Embeds, den du in deine Seite einfügst, bleibt unverändert. Inkompatible Änderungen an URL- oder Nachrichtenformat werden vermieden; falls sie nötig werden, liefert die alte URL das vorherige Verhalten weiterhin unter einem versionierten Pfad aus. ## Verwandte Dokumentation - [Embed Generator](https://www.resizo.in/de/embed/) — interaktiver Builder, der das iframe-Snippet erzeugt. - [Embed-Dokumentation (HTML)](https://www.resizo.in/de/embed/docs/) — vollständiger Integrationsleitfaden mit Plattform-Tutorials, Framework-Komponenten und Troubleshooting. - [Resizo Übersicht](https://www.resizo.in/docs/overview.de.md) — was Resizo ist und die architektonische Begründung. - [Wie Resizo funktioniert](https://www.resizo.in/docs/how-it-works.de.md) — browserbasierte Verarbeitungs-Pipeline und Datenschutzmodell. - [Funktionen](https://www.resizo.in/docs/features.de.md) — vollständige Funktionsliste und Maße der Social-Media-Presets.