# Resizo Embed — Muhtasari

Resizo Embed ni mfumo wa widget sita za bure za vifaa vya picha vinavyotegemea iframe ambazo tovuti yoyote inaweza kuziingiza kwa kipande kimoja cha HTML. Widget hizo hutolewa kutoka [resizo.in](https://www.resizo.in/sw/embed/), zinaendeshwa kabisa ndani ya kivinjari cha mtembelezi, na hazihitaji ufunguo wa API, akaunti, wala muunganisho wa backend. Embed ni za bure kwa matumizi binafsi, ya kibiashara, na ya kampuni; sharti pekee ni kwamba kiungo kidogo cha "Powered by Resizo" kwenye footer ya widget kibaki kionekane.

## Widget zinazopatikana

| Widget | Njia ya embed | Kazi |
| --- | --- | --- |
| Image Resizer | `/embed/image-resizer/` | Kubadilisha ukubwa kwa vipimo halisi vya pikseli kwa kufunga uwiano. |
| JPG Compressor | `/embed/compress-image/` | Kupunguza ukubwa wa faili za JPG, PNG, na WebP kwa kitelezi cha ubora. |
| WebP Converter | `/embed/webp-converter/` | Kubadilisha PNG na JPG kuwa WebP. |
| Passport Photo | `/embed/passport-photo/` | Kutengeneza picha za pasipoti / viza kulingana na maagizo rasmi ya Marekani, Uingereza, EU, India, na Canada. |
| Batch Resize | `/embed/batch-resize/` | Kubadilisha ukubwa wa picha nyingi kwa wakati mmoja; matokeo hupakuliwa kama ZIP. |
| Watermark Tool | `/embed/watermark/` | Kuongeza watermark za maandishi kwa nafasi, rangi, uwazi, na mzunguko. |

## Kipande cha chini kabisa cha embed

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

Kila widget ina takriban KB 5–10 kwa jumla (HTML + CSS + JavaScript safi) na hupakiwa kwa njia ya lazy kwa kawaida. Hakuna framework, hakuna SDK ya kufuatilia, wala hakuna beacon ya analytics ndani ya iframe.

## Vigezo vya URL

| Kigezo | Thamani | Chaguo-msingi | Maelezo |
| --- | --- | --- | --- |
| `theme` | `light`, `dark` | (hufuata `prefers-color-scheme`) | Hulazimisha mandhari ya kuonekana iliyowekwa. Iache ili ifuate mapendekezo ya OS ya mtembelezi kiotomatiki. |

Mfumo wa msingi wa URL ni `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`.

## Mtindo wa faragha na usalama

Embed hurithi muundo wa Resizo wa "hakuna upload, hakuna kuhifadhi":

- **Hakuna upload.** Widget hutumia `FileReader` kusoma faili ya mtumiaji na HTML5 Canvas API kuichakata. Hakuna endpoint ya mtandao inayopokea data ya picha.
- **Hakuna cookies.** Hakuna cookie hata moja inayowekwa ndani ya iframe. Kwa chaguo-msingi, hakuna kinachoandikwa kwenye `localStorage` au `sessionStorage`.
- **Hakuna telemetry kuhusu maudhui ya faili.** Majina ya faili, vipimo, na metadata haviwasilishwi.
- **Inalingana na GDPR + CCPA kimuundo**, si kwa sera tu. Thibitisha kwa DevTools → kichupo cha Network: hakuna ombi linalotumwa wakati wa uchakataji.
- **Sifa ya `sandbox` haitumiki.** Lazima iachwe, kwa sababu `sandbox` huzuia upakuaji wa faili ambao widget unautegemea. Ikiwa Content-Security-Policy kali iko hai, ongeza `frame-src https://www.resizo.in;`.

## Itifaki ya kujibadilisha ukubwa (postMessage)

Kila widget hutuma urefu wa maudhui yake kwa dirisha mzazi kila wakati mpangilio unapobadilika:

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

Ukurasa mzazi unaweza kusikiliza ujumbe na kusasisha `style.height` ya iframe ili kuondoa scrollbar za ndani. Linganisha `event.source` na `contentWindow` ya kila iframe ili kuelekeza masasisho ya urefu ipasavyo kwenye kurasa zenye embed nyingi. Hakuna maktaba ya watu wengine kama `iframe-resizer` inayohitajika.

## Uoanifu wa majukwaa

Kipande hicho hicho cha iframe hufanya kazi kwenye kila jukwaa linalokubali HTML maalum:

- **WordPress** — block ya Custom HTML (Block Editor) au kichupo cha "Text" (Classic Editor). Programu-jalizi za usalama zinaweza kuhitaji `resizo.in` kuongezwa kwenye orodha iliyoidhinishwa.
- **Ghost** — kadi ya HTML.
- **Webflow** — kipengele cha Embed.
- **Wix** — Add → Embed Code → Embed HTML.
- **Squarespace** — Code Block.
- **Notion** — amri ya slash `/embed` na URL ya widget.
- **Shopify** — Pages → bonyeza `</>` (Show HTML) → bandika.
- **HTML tuli** — bandika moja kwa moja kwenye faili; hakuna hatua ya build.

Vipengele tayari kwa kuingiza pia vimetolewa kwa **React** (na ubadilishaji ukubwa wa kiotomatiki kupitia `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`), na **Angular** (`ngOnInit` / `ngOnDestroy`).

## Usaidizi wa vivinjari

| Kivinjari | Toleo la chini |
| --- | --- |
| Chrome / Edge (Chromium) | 80+ |
| Firefox | 78+ |
| Safari (pamoja na iOS Safari) | 14+ |
| Chrome Android | 80+ |

Kusafirisha WebP kunasaidiwa kikamilifu katika Chrome, Safari, na Edge. Canvas API inayotumiwa ndani ina usaidizi wa zaidi ya 98.5% kimataifa kulingana na [caniuse.com/canvas](https://caniuse.com/canvas).

## Toleo na uhifadhi wa matoleo

Embed huletwa kutoka `resizo.in` wakati wa kurender, hivyo uboreshaji huwekwa moja kwa moja. *Msimbo* wa embed unaobandika kwenye tovuti yako hubaki vile vile. Mabadiliko yanayovunja uoanifu wa URL au muundo wa ujumbe huepukwa; ikiwa yanahitajika, URL ya zamani itaendelea kutoa tabia ya awali chini ya njia yenye toleo.

## Nyaraka zinazohusiana

- [Embed Generator](https://www.resizo.in/sw/embed/) — kijenzi cha kibadilishanaji kinachotoa kipande cha iframe.
- [Nyaraka za Embed (HTML)](https://www.resizo.in/sw/embed/docs/) — mwongozo kamili wa muunganisho wenye mafunzo ya majukwaa, vipengele vya framework, na utatuzi wa matatizo.
- [Muhtasari wa Resizo](https://www.resizo.in/docs/overview.sw.md) — Resizo ni nini na sababu ya muundo wake.
- [Jinsi Resizo inavyofanya kazi](https://www.resizo.in/docs/how-it-works.sw.md) — bomba la uchakataji unaotegemea kivinjari na mtindo wa faragha.
- [Vipengele](https://www.resizo.in/docs/features.sw.md) — orodha kamili ya vipengele na vipimo vya preset za mitandao ya kijamii.