# Resizo Embed — Ringkasan

Resizo Embed adalah sistem berisi enam widget alat gambar gratis berbasis iframe yang dapat dipasang situs web mana pun cukup dengan satu cuplikan HTML. Widget disajikan dari [resizo.in](https://www.resizo.in/id/embed/), berjalan sepenuhnya di browser pengunjung, dan tidak memerlukan kunci API, akun, atau integrasi backend. Embed gratis untuk penggunaan pribadi, komersial, dan enterprise; satu-satunya syaratnya adalah tautan kecil "Powered by Resizo" di footer widget tetap terlihat.

## Widget yang tersedia

| Widget | Rute embed | Fungsi |
| --- | --- | --- |
| Image Resizer | `/embed/image-resizer/` | Mengubah ukuran ke dimensi piksel persis dengan penguncian rasio aspek. |
| JPG Compressor | `/embed/compress-image/` | Memperkecil ukuran berkas JPG, PNG, dan WebP dengan slider kualitas. |
| WebP Converter | `/embed/webp-converter/` | Mengonversi PNG dan JPG menjadi WebP. |
| Passport Photo | `/embed/passport-photo/` | Menghasilkan foto paspor / visa sesuai spesifikasi resmi AS, Inggris, UE, India, dan Kanada. |
| Batch Resize | `/embed/batch-resize/` | Mengubah ukuran banyak gambar sekaligus secara massal; hasil diunduh dalam ZIP. |
| Watermark Tool | `/embed/watermark/` | Menambahkan watermark teks dengan posisi, warna, opasitas, dan rotasi. |

## Cuplikan embed minimal

```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>
```

Setiap widget berukuran sekitar 5–10 KB total (HTML + CSS + vanilla JavaScript) dan dimuat secara lazy secara default. Tidak ada framework, SDK pelacak, atau beacon analytics di dalam iframe.

## Parameter URL

| Parameter | Nilai | Default | Deskripsi |
| --- | --- | --- | --- |
| `theme` | `light`, `dark` | (mengikuti `prefers-color-scheme`) | Memaksa tema visual tertentu. Hilangkan agar otomatis mengikuti preferensi OS pengunjung. |

Pola URL dasarnya adalah `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`.

## Model privasi dan keamanan

Embed mewarisi arsitektur "tanpa unggah, tanpa persistensi" milik Resizo:

- **Tanpa unggah.** Widget menggunakan `FileReader` untuk membaca berkas pengguna dan HTML5 Canvas API untuk memprosesnya. Tidak ada endpoint jaringan yang menerima data gambar.
- **Tanpa cookie.** Nol cookie disetel di dalam iframe. Tidak ada yang ditulis ke `localStorage` atau `sessionStorage` secara default.
- **Tanpa telemetri atas isi berkas.** Nama berkas, dimensi, dan metadata tidak ditransmisikan.
- **Patuh GDPR + CCPA secara arsitektur**, bukan sekadar kebijakan. Verifikasi dengan DevTools → tab Network — nol permintaan terkirim selama pemrosesan.
- **Atribut `sandbox` tidak didukung.** Atribut tersebut harus dihilangkan, karena `sandbox` memblokir unduhan berkas yang dibutuhkan widget. Jika Content-Security-Policy ketat sedang aktif, tambahkan `frame-src https://www.resizo.in;`.

## Protokol auto-resize (postMessage)

Setiap widget mengirim tinggi kontennya ke window induk setiap kali tata letak berubah:

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

Halaman induk dapat mendengarkan pesan itu dan memperbarui `style.height` iframe untuk menghilangkan scrollbar internal. Cocokkan `event.source` dengan `contentWindow` setiap iframe agar pembaruan tinggi diarahkan dengan benar pada halaman dengan beberapa embed. Pustaka pihak ketiga seperti `iframe-resizer` tidak diperlukan.

## Kompatibilitas platform

Cuplikan iframe yang sama berfungsi di setiap platform yang menerima HTML kustom:

- **WordPress** — blok Custom HTML (Block Editor) atau tab "Text" (Classic Editor). Plugin keamanan mungkin perlu memasukkan `resizo.in` ke daftar yang diizinkan.
- **Ghost** — kartu HTML.
- **Webflow** — elemen Embed.
- **Wix** — Add → Embed Code → Embed HTML.
- **Squarespace** — Code Block.
- **Notion** — perintah slash `/embed` dengan URL widget.
- **Shopify** — Pages → klik `</>` (Show HTML) → tempel.
- **HTML statis** — tempel langsung ke berkas; tanpa langkah build.

Komponen siap pakai juga disediakan untuk **React** (dengan auto-resize via `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`), dan **Angular** (`ngOnInit` / `ngOnDestroy`).

## Dukungan browser

| Browser | Versi minimum |
| --- | --- |
| Chrome / Edge (Chromium) | 80+ |
| Firefox | 78+ |
| Safari (termasuk iOS Safari) | 14+ |
| Chrome Android | 80+ |

Ekspor WebP didukung penuh di Chrome, Safari, dan Edge. Canvas API yang digunakan secara internal memiliki dukungan global >98,5 % menurut [caniuse.com/canvas](https://caniuse.com/canvas).

## Versioning

Embed diambil dari `resizo.in` pada saat rendering, sehingga peningkatan diterapkan secara otomatis. *Kode* embed yang Anda tempel di situs tetap sama. Perubahan URL atau format pesan yang merusak kompatibilitas dihindari; jika menjadi perlu, URL lama akan tetap melayani perilaku sebelumnya pada jalur ber-versi.

## Dokumentasi terkait

- [Embed Generator](https://www.resizo.in/id/embed/) — pembuat interaktif yang menghasilkan cuplikan iframe.
- [Dokumentasi Embed (HTML)](https://www.resizo.in/id/embed/docs/) — panduan integrasi lengkap dengan tutorial per platform, komponen framework, dan pemecahan masalah.
- [Ringkasan Resizo](https://www.resizo.in/docs/overview.id.md) — apa itu Resizo dan dasar pertimbangan arsitekturnya.
- [Cara kerja Resizo](https://www.resizo.in/docs/how-it-works.id.md) — pipeline pemrosesan di browser dan model privasi.
- [Fitur](https://www.resizo.in/docs/features.id.md) — daftar fitur lengkap dan dimensi preset media sosial.