Are images uploaded to a server?

No. The widget reads files with the browser's FileReader API and processes them on an in-memory canvas. Files never leave the visitor's device.

Does the widget work on mobile?

Yes. Every widget is touch-friendly and responsive down to roughly 320px wide on iOS Safari 14+ and Chrome Android 80+.

Does the embed affect SEO?

Minimally. Widget pages use noindex, nofollow meta tags. The iframe does not affect your content's indexing.

How large is the widget?

Each widget is roughly 5 to 10 KB total (HTML + CSS + vanilla JavaScript). No frameworks, no tracking SDKs.

Last updated: 20 May 2026

How to Embed an Image Resizer Widget on Any Website

Q: Is the embed widget really free?

Yes. All six Resizo embed widgets are free for personal, commercial, and enterprise use. No API key, no usage limits, no paywalls.

Q: Will the widget auto-update?

Yes. The widget loads from resizo.in at render time, so improvements deploy automatically. Your embed code stays the same.

Beginner's guide to adding a free, privacy-first image resizer widget to any site — WordPress, Webflow, Shopify, React, and more. One iframe, no backend, no signup.

⚡ Quick Answer

To embed an image resizer widget on any website, paste a single <iframe> snippet pointing to https://www.resizo.in/embed/{tool-id}/ into your page. Resizo offers six free, privacy-first widgets — Image Resizer, JPG Compressor, WebP Converter, Passport Photo, Batch Resize, and Watermark Tool.

Each widget runs entirely in the visitor's browser using the Canvas API, so images never leave the device. Setup takes under 30 seconds, requires no API key, no signup, and no backend. The system works on WordPress, Webflow, Wix, Shopify, Ghost, Squarespace, Notion, and any static HTML site, with optional postMessage auto-resize and light/dark theming via URL parameter.

Definition

Embeddable image resizer widget (n.): a small, self-contained image-processing tool delivered as an HTML iframe that can be inserted into any web page. The widget runs entirely in the visitor's browser using the HTML5 Canvas API, performs resize, compress, or convert operations locally, and returns the result as a downloadable file — without uploading anything to a server.

Key Takeaways

One iframe, zero backend — copy-paste a single HTML snippet to embed an image resizer widget instantly.
Six free tools available — resizer, JPG compressor, WebP converter, passport photo, batch resize, and watermark.
100% client-side — images are processed with the Canvas API inside the visitor's browser; nothing is uploaded.
No API key, no signup, no usage limits — free for personal, commercial, and enterprise sites.
Universal compatibility — works on WordPress, Webflow, Wix, Shopify, Ghost, Squarespace, Notion, and static HTML.
Auto-resize via postMessage removes inner scrollbars; light/dark themes set via ?theme= URL parameter.
GDPR + CCPA compliant by design — zero cookies, zero telemetry, zero personal data collected.

What Is the Resizo Embed System?

Featured Snippet

The Resizo embed system is a set of six free, iframe-based image tools — resizer, compressor, WebP converter, passport photo maker, batch resizer, and watermark tool — that website owners can paste into any HTML page. Each widget runs 100% in the visitor's browser, uploads nothing, and requires no API key or registration.

The system is built for beginners who need a working image resizer widget on their site within minutes, and for developers who want a privacy-first alternative to upload-based services. Each widget is roughly 5–10 KB in size and loads asynchronously with loading="lazy".

How Do I Embed an Image Resizer Widget in 30 Seconds?

Direct Answer

Paste the iframe snippet below into any HTML block on your page, then publish. The widget loads instantly and runs entirely on the visitor's device. No script tag, no API key, no CORS configuration required.

Paste this code anywhere that accepts custom HTML:

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>

✅ That's it! The widget loads, your visitors resize images, and nothing ever leaves their device. No API key needed.

What happens behind the scenes

Step	What happens
1. Iframe loads	A lightweight HTML page (~5 KB) is fetched from `resizo.in`.
2. Visitor drops an image	The file is read into memory using the browser's `FileReader` API.
3. Processing runs locally	The Canvas API resizes / compresses / converts the image entirely in the browser.
4. Download triggers	The result is offered via an `ObjectURL` — no network upload.

Why Use an Iframe-Based Image Tool Instead of a Plugin?

Featured Snippet

Iframe-based image tools install in seconds, never break with platform updates, work identically across every CMS, and don't bloat your site's JavaScript bundle. Plugins, by contrast, require per-platform installation, frequent updates, and often introduce upload-based privacy risks. An iframe image tool is the universal, future-proof choice.

Advantages over CMS plugins

One install method, any platform — the same snippet works on WordPress, Webflow, Wix, Shopify, Ghost, Notion, Squarespace, and raw HTML.
Zero maintenance — improvements deploy automatically because the widget is fetched from resizo.in at render time.
No security surface — no plugin database tables, no admin permissions, no PHP execution context.
Privacy by default — files are processed in the browser using FileReader + Canvas API, not uploaded.
Tiny payload — ~5–10 KB per widget vs. hundreds of KB for typical WordPress image plugins.

Which Image Widgets Are Available?

Resizo offers 6 embeddable tools. Each has its own dedicated embed route and runs as a standalone iframe widget.

Copy-Paste Snippets

Image Resizer

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>

JPG Compressor

HTML

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

WebP Converter

HTML

<iframe
  src="https://www.resizo.in/embed/webp-converter/"
  width="100%" height="640" loading="lazy"
  title="Resizo — WebP Converter"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>

Passport Photo

HTML

<iframe
  src="https://www.resizo.in/embed/passport-photo/"
  width="100%" height="700" loading="lazy"
  title="Resizo — Passport Photo Maker"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>

Batch Resize

HTML

<iframe
  src="https://www.resizo.in/embed/batch-resize/"
  width="100%" height="700" loading="lazy"
  title="Resizo — Batch Resize"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>

Watermark Tool

HTML

<iframe
  src="https://www.resizo.in/embed/watermark/"
  width="100%" height="700" loading="lazy"
  title="Resizo — Watermark Tool"
  style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;"
></iframe>

What Is the Embed URL Pattern?

Direct Answer

Every Resizo widget follows the URL pattern https://www.resizo.in/embed/{tool-id}/, optionally with a ?theme=light or ?theme=dark query parameter. Replace {tool-id} with one of: image-resizer, compress-image, webp-converter, passport-photo, batch-resize, or watermark.

URL Pattern

URL

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

URL Parameters

Parameter	Values	Default	Description
`theme`	`light`, `dark`	`auto`	Forces a specific color theme. Omit to follow the visitor's system preference.

Examples

URL Examples

# Auto theme (follows system preference) — recommended
https://www.resizo.in/embed/image-resizer/

# Force light mode
https://www.resizo.in/embed/image-resizer/?theme=light

# Force dark mode
https://www.resizo.in/embed/compress-image/?theme=dark

How Do I Configure the Iframe Attributes?

Use the recommended attributes below for best performance, accessibility, and reliability. The most important rule: never add the sandbox attribute, which breaks downloads.

Iframe Attributes

Attribute	Recommended	Notes
`width`	`"100%"`	Fills the parent container. Fixed widths like `"600"` work too. Min: 320px.
`height`	`"640"`	In pixels. Most tools fit at 600–700px. Passport & Batch may need 700–800px.
`loading`	`"lazy"`	Defers loading until the iframe scrolls into view. Better page performance.
`title`	`"Resizo — ..."`	Required for accessibility. Screen readers announce this text.
`sandbox`	Do not add	Sandbox restrictions break file downloads.

Recommended Height by Tool

Widget	Minimum	Recommended
Image Resizer	500px	640px
JPG Compressor	500px	640px
WebP Converter	500px	640px
Passport Photo	600px	700px
Batch Resize	600px	700px
Watermark Tool	600px	700px

How Do I Switch Between Light and Dark Themes?

Direct Answer

Omit the ?theme= parameter and the widget follows the visitor's system preference automatically. Force a specific theme by appending ?theme=light or ?theme=dark to the embed URL.

Auto Theme (Default — Recommended)

Omit the ?theme= parameter and the widget reads the visitor's prefers-color-scheme. Dark OS → dark widget. Light OS → light widget. No extra code.

Force Light Mode

HTML

<iframe src="https://www.resizo.in/embed/image-resizer/?theme=light" ...></iframe>

Force Dark Mode

HTML

<iframe src="https://www.resizo.in/embed/image-resizer/?theme=dark" ...></iframe>

Theme Behavior

Scenario	Behavior
No `?theme` param	Follows `prefers-color-scheme`. Updates dynamically if OS theme changes.
`?theme=light`	Always light, regardless of OS preference.
`?theme=dark`	Always dark, regardless of OS preference.
Visitor clicks sun/moon icon	Overrides for that session only. Doesn't persist on reload.

Design Tokens

Token	Light	Dark
`--bg`	`#ffffff`	`#0a0e1a`
`--surface`	`#f8fafc`	`#0f172a`
`--border`	`#e2e8f0`	`#1e293b`
`--text`	`#0f172a`	`#f1f5f9`
`--brand`	`#1B70E0`	`#3b8eff`

How Does Auto-Resize for Iframes Work?

Direct Answer

Resizo widgets emit a postMessage event with their measured content height. Your parent page listens for that event and updates the iframe's height attribute, eliminating internal scrollbars. The message format is { "source": "resizo-embed", "type": "size", "height": 742 }.

This pattern is the standard solution for dynamic iframe height, adopted by Twitter, Instagram, and CodePen embeds. Resizo implements it natively — no third-party script required.

Message Format

JSON

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

Single Widget

HTML + JS

<iframe id="resizo-widget"
  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>

<script>
window.addEventListener('message', function (event) {
  if (event.data &&
      event.data.source === 'resizo-embed' &&
      event.data.type === 'size') {
    var iframe = document.getElementById('resizo-widget');
    if (iframe) iframe.style.height = event.data.height + 'px';
  }
});
</script>

Multiple Widgets on One Page

HTML + JS

<iframe class="resizo-embed" src="https://www.resizo.in/embed/image-resizer/" ...></iframe>
<iframe class="resizo-embed" src="https://www.resizo.in/embed/compress-image/" ...></iframe>

<script>
window.addEventListener('message', function (event) {
  if (event.data &&
      event.data.source === 'resizo-embed' &&
      event.data.type === 'size') {
    var iframes = document.querySelectorAll('.resizo-embed');
    for (var i = 0; i < iframes.length; i++) {
      if (iframes[i].contentWindow === event.source) {
        iframes[i].style.height = event.data.height + 'px';
        break;
      }
    }
  }
});
</script>

How Do I Embed the Widget on WordPress, Webflow, Shopify, and Other Platforms?

Featured Snippet

Every major CMS supports the iframe snippet directly. In WordPress, use a Custom HTML block. In Webflow, use an Embed element. In Shopify, click the </> button in the page editor. In Wix, use Embed Code → Embed HTML. In Ghost, use the HTML card. In Notion, type /embed and paste the widget URL.

WordPress

In the block editor, click + → search for "Custom HTML" → add block.
Paste the iframe snippet.
Click Preview to verify the widget renders.
Publish your post or page.

💡 Classic Editor: Switch to the "Text" tab (not "Visual") before pasting the iframe. WordPress Visual mode may strip iframe tags.

Ghost

In the Ghost editor, click + → HTML card.
Paste the iframe snippet.
Publish.

Webflow

Drag an Embed element into your layout.
Paste the iframe snippet.
Adjust width in the style panel.
Publish.

Wix

Go to Add → Embed Code → Embed HTML.
Paste the iframe snippet in the code editor.
Resize the container to fit your design.
Publish.

Squarespace

Add a Code Block to your page.
Paste the iframe snippet.
Save.

Notion

Type /embed and select Embed.
Paste: https://www.resizo.in/embed/image-resizer/
Resize the block as needed.

Shopify

Go to Online Store → Pages → Edit page.
Click </> (Show HTML) in the editor toolbar.
Paste the iframe snippet.
Save.

Static HTML Sites

Paste the iframe directly into your HTML file. No build step, no dependencies, no configuration.

How Do I Use the Widget in React, Vue, or Angular?

If you're working in a framework, wrap the iframe in a component, attach the postMessage listener inside the framework lifecycle (useEffect, onMounted, ngOnInit), and accept tool and theme props. Drop-in components for all three frameworks are provided below.

React Component (with auto-resize)

JSX

import { useEffect, useRef } from 'react';

export default function ResizoEmbed({ tool = 'image-resizer', theme }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    function handleMessage(event) {
      if (
        event.data?.source === 'resizo-embed' &&
        event.data?.type === 'size' &&
        iframeRef.current?.contentWindow === event.source
      ) {
        iframeRef.current.style.height = `${event.data.height}px`;
      }
    }
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  const src = `https://www.resizo.in/embed/${tool}/${
    theme ? `?theme=${theme}` : ''
  }`;

  return (
    <iframe
      ref={iframeRef}
      src={src}
      width="100%"
      height={640}
      loading="lazy"
      title={`Resizo — ${tool}`}
      style={{
        border: 'none',
        borderRadius: '12px',
        overflow: 'hidden',
        display: 'block',
        maxWidth: '100%',
      }}
    />
  );
}

// Usage:
// <ResizoEmbed tool="image-resizer" />
// <ResizoEmbed tool="compress-image" theme="dark" />

Vue Component

Vue SFC

<template>
  <iframe
    ref="iframe"
    :src="embedSrc"
    width="100%"
    :height="height"
    loading="lazy"
    :title="`Resizo — ${tool}`"
    :style="iframeStyle"
  />
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  tool: { type: String, default: 'image-resizer' },
  theme: { type: String, default: null },
});

const iframe = ref(null);
const height = ref(640);

const embedSrc = computed(() => {
  const base = `https://www.resizo.in/embed/${props.tool}/`;
  return props.theme ? `${base}?theme=${props.theme}` : base;
});

const iframeStyle = {
  border: 'none', borderRadius: '12px',
  overflow: 'hidden', display: 'block', maxWidth: '100%',
};

function handleMessage(event) {
  if (
    event.data?.source === 'resizo-embed' &&
    event.data?.type === 'size' &&
    iframe.value?.contentWindow === event.source
  ) {
    height.value = event.data.height;
  }
}

onMounted(() => window.addEventListener('message', handleMessage));
onBeforeUnmount(() => window.removeEventListener('message', handleMessage));
</script>

Angular Component

TypeScript

import { Component, Input, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-resizo-embed',
  template: `
    <iframe #resizoIframe [src]="safeUrl" width="100%"
      [height]="height" loading="lazy"
      [title]="'Resizo — ' + tool"
      [style]="iframeStyle"></iframe>
  `,
})
export class ResizoEmbedComponent implements OnInit, OnDestroy {
  @Input() tool = 'image-resizer';
  @Input() theme: 'light' | 'dark' | null = null;
  @ViewChild('resizoIframe') iframe!: ElementRef<HTMLIFrameElement>;

  height = 640;
  iframeStyle = 'border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%';

  private listener = (event: MessageEvent) => {
    if (event.data?.source === 'resizo-embed' && event.data?.type === 'size' &&
        this.iframe?.nativeElement?.contentWindow === event.source) {
      this.height = event.data.height;
    }
  };

  get safeUrl(): string {
    const base = `https://www.resizo.in/embed/${this.tool}/`;
    return this.theme ? `${base}?theme=${this.theme}` : base;
  }

  ngOnInit() { window.addEventListener('message', this.listener); }
  ngOnDestroy() { window.removeEventListener('message', this.listener); }
}

What Are Some Advanced Embed Patterns?

Responsive Container

HTML

<div style="max-width:800px;margin:0 auto;">
  <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>
</div>

Tab Switcher — Multiple Tools, One Iframe

HTML + JS

<div>
  <button onclick="showTool('image-resizer')">Resizer</button>
  <button onclick="showTool('compress-image')">Compressor</button>
  <button onclick="showTool('webp-converter')">WebP</button>
</div>

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

<script>
function showTool(id) {
  document.getElementById('resizo-tool').src =
    'https://www.resizo.in/embed/' + id + '/';
}
</script>

How Do I Style and Customize the Embedded Widget?

The outer iframe accepts any CSS via the style attribute — borders, shadows, rounded corners. Deeper visual customization (custom brand colors, font swaps) inside the widget is not currently exposed beyond the light/dark theme parameter.

Remove Rounded Corners

CSS

style="border:none;overflow:hidden;display:block;max-width:100%;"

Add a Shadow

CSS

style="border:none;border-radius:12px;overflow:hidden;display:block;max-width:100%;box-shadow:0 4px 24px rgba(0,0,0,0.12);"

Add a Border

CSS

style="border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;display:block;max-width:100%;"

What Are the Security and Privacy Guarantees?

Direct Answer

Resizo embed widgets are GDPR- and CCPA-compliant by design. Files are read via the browser's FileReader API, processed on an in-memory <canvas>, and downloaded via ObjectURL. No file ever touches a network socket. Zero cookies are set. Zero telemetry about file content, filenames, or metadata is transmitted.

Verification Checklist

Open DevTools → Network tab while using the widget. You will see zero network requests during processing.
Check document.cookie in the iframe context. It is empty.
Inspect Content Security Policy — add frame-src https://www.resizo.in; if your site enforces strict CSP.
Do not add the sandbox attribute to the iframe. Sandbox restrictions break file downloads and uploads.

Concern	Answer
Are images uploaded?	No. Files are read with `FileReader` and drawn on an in-memory `<canvas>`.
Does Resizo see filenames?	No. No telemetry about file content, names, or metadata is transmitted.
GDPR-compliant?	Yes. No personal data is collected, processed, or stored on any server.
CCPA-compliant?	Yes. No consumer data is sold or shared.
Works offline?	Yes, after the first page load.
Sets cookies?	No. Zero cookies.
How to verify?	Open DevTools → Network tab. Zero requests during processing.

Content Security Policy (CSP)

If your site uses a strict CSP, add:

CSP Header

frame-src https://www.resizo.in;

⚠️ Do NOT add sandbox to the iframe. The sandbox attribute restricts downloads and file uploads — both are essential. Omit it entirely.

Which Browsers Support the Embed Widgets?

Featured Snippet

The Resizo iframe image tool runs on every modern browser released since early 2020: Chrome 80+, Firefox 78+, Safari 14+, Edge 80+, iOS Safari 14+, and Chrome Android 80+. WebP export is fully supported in Chrome, Safari, and Edge. According to Can I Use data, the Canvas API used internally has over 98.5% global support.

Browser	Min Version	Notes
Chrome	80+	Full support incl. WebP export
Firefox	78+	Full support
Safari	14+	Full support incl. WebP
Edge	80+	Full support (Chromium)
iOS Safari	14+	Touch-friendly, camera roll picker
Chrome Android	80+	Touch-friendly, gallery picker

How Do I Troubleshoot a Blank or Broken Widget?

Direct Answer

A blank embed almost always means one of four things: (1) your site's Content Security Policy is blocking the iframe, (2) the sandbox attribute was added to the iframe, (3) JavaScript is disabled, or (4) an ad blocker is filtering resizo.in. Removing sandbox and whitelisting the domain fixes 95% of issues.

Widget shows a blank box

Cause	Fix
CSP blocking iframe	Add `frame-src https://www.resizo.in;` to your CSP.
`sandbox` attribute present	Remove `sandbox` from the iframe.
JavaScript disabled	Enable JS in the browser.
Ad blocker interference	Whitelist `resizo.in`.

Download doesn't work

Cause	Fix
`sandbox` too restrictive	Remove `sandbox` or add `allow-downloads`.
iOS Safari behavior	File opens in new tab — long-press to save.

Internal scrollbars

Cause	Fix
Height too small	Increase iframe `height`.
Content expanded after image load	Implement the auto-resize listener.

WordPress strips iframe

Cause	Fix
Visual editor removes iframes	Switch to Text/Code mode or use a Custom HTML block.
Security plugin blocks iframes	Whitelist `resizo.in`.

Frequently Asked Questions

Is the embed image resizer widget really free?

Yes. All six widgets are free for personal, commercial, and enterprise use. There is no API key, no usage limit, and no paywall — the only condition is keeping the small "Powered by Resizo" footer link visible.

Is there an attribution requirement?

Each widget shows a small "Powered by Resizo" footer link. Please keep it visible — it's the only condition of the free embed.

Will the embed widget work on mobile devices?

Yes. Every widget is touch-friendly, responsive down to roughly 320px wide, and integrates with the native file picker — opening the camera roll on iOS and the gallery on Android.

Do embeds upload images to any server?

No. Every widget uses the browser's Canvas API locally. Files never leave the device. Verify with DevTools → Network tab — zero requests fire during processing.

Does embedding the widget affect my page's SEO?

Only minimally. Resizo widget pages use noindex, nofollow meta tags, so they don't compete with your own content in search rankings. The iframe itself does not affect indexing of the surrounding page.

How large is the embedded image widget?

Each widget is roughly 5–10 KB total (HTML + CSS + vanilla JavaScript). There are no frameworks, no tracking SDKs, and no analytics beacons.

Does it set cookies?

No. Zero cookies. The widget stores nothing in localStorage or sessionStorage by default.

Can I customize the widget's colors or branding?

The widget supports ?theme=light and ?theme=dark URL parameters. Deeper visual customization (custom brand colors, font swaps) is not currently exposed, but the outer iframe accepts any CSS — borders, shadows, rounded corners — via the style attribute.

Does the widget auto-update with new features?

Yes. The widget is fetched from resizo.in at render time, so improvements deploy automatically. Your embed code stays the same forever.

Can I use the widget on healthcare, legal, or government sites?

Yes. No data leaves the device, making it suitable for regulated environments. Always consult your compliance team for final approval.

What happens if my visitor has JavaScript disabled?

The widget will not function. All processing relies on JavaScript and the Canvas API. Roughly 0.2% of global users disable JavaScript, so the impact is negligible for most sites.

Glossary

Key terms used throughout this embed image resizer widget guide.

iframe: An HTML element that embeds one document inside another. The container for the Resizo widget.
Canvas API: The HTML5 <canvas> element and its 2D drawing context, used to manipulate pixel data in the browser.
FileReader API: A browser API for reading the contents of files selected by the user, without uploading them to a server.
postMessage: A window method for safely sending messages between an iframe and its parent page across origins.
CSP (Content Security Policy): An HTTP header that restricts what resources a page can load, including iframes from external origins.
noindex, nofollow: Meta tag directives that tell search engines to exclude a page from results and ignore its outbound links.
ObjectURL: A temporary URL created by URL.createObjectURL() pointing to in-memory file data — used for client-side downloads.
GDPR / CCPA: EU and California privacy regulations governing personal data collection, processing, and sale.

Sources & References

Authoritative documentation and standards cited in this guide.

Summary: Why Embed an Image Resizer Widget

An embed image resizer widget is the lowest-friction way to add image tools to any website — one iframe, zero configuration.
Resizo's six widgets cover resize, compress, convert, passport photo, batch, and watermark use cases.
All processing happens client-side via the Canvas API, making the embed inherently GDPR- and CCPA-safe.
The system works identically across WordPress, Webflow, Shopify, Wix, Ghost, Squarespace, Notion, React, Vue, Angular, and raw HTML.
Optional postMessage auto-resize removes scrollbars; ?theme=light|dark overrides system preferences.
Browser support covers ~98.5% of users globally with no polyfills required.

How to Embed an Image Resizer Widget on Any Website

Key Takeaways

What Is the Resizo Embed System?

How Do I Embed an Image Resizer Widget in 30 Seconds?

What happens behind the scenes

Why Use an Iframe-Based Image Tool Instead of a Plugin?

Advantages over CMS plugins

Which Image Widgets Are Available?

Image Resizer

JPG Compressor

WebP Converter

Passport Photo

Batch Resize

Watermark Tool

Copy-Paste Snippets

Image Resizer

JPG Compressor

WebP Converter

Passport Photo

Batch Resize

Watermark Tool

What Is the Embed URL Pattern?

URL Pattern

URL Parameters

Examples

How Do I Configure the Iframe Attributes?

Iframe Attributes

Recommended Height by Tool

How Do I Switch Between Light and Dark Themes?

Auto Theme (Default — Recommended)

Force Light Mode

Force Dark Mode

Theme Behavior

Design Tokens

How Does Auto-Resize for Iframes Work?

Message Format

Single Widget

Multiple Widgets on One Page

How Do I Embed the Widget on WordPress, Webflow, Shopify, and Other Platforms?

WordPress

Ghost

Webflow

Wix

Squarespace

Notion

Shopify

Static HTML Sites

How Do I Use the Widget in React, Vue, or Angular?

React Component (with auto-resize)

Vue Component

Angular Component

What Are Some Advanced Embed Patterns?

Responsive Container

Tab Switcher — Multiple Tools, One Iframe

How Do I Style and Customize the Embedded Widget?

Remove Rounded Corners

Add a Shadow

Add a Border

What Are the Security and Privacy Guarantees?

Verification Checklist

Content Security Policy (CSP)

Which Browsers Support the Embed Widgets?

How Do I Troubleshoot a Blank or Broken Widget?

Widget shows a blank box

Download doesn't work

Internal scrollbars

WordPress strips iframe

People Also Ask

Frequently Asked Questions

Glossary

Sources & References

Summary: Why Embed an Image Resizer Widget