# Resizo Embed — Visão geral O Resizo Embed é um sistema de seis widgets gratuitos de ferramentas de imagem baseados em iframe que qualquer site pode incorporar com um único trecho de HTML. Os widgets são servidos a partir de [resizo.in](https://www.resizo.in/pt/embed/), rodam inteiramente no navegador do visitante e não exigem chave de API, conta nem integração de backend. Os embeds são gratuitos para uso pessoal, comercial e corporativo; a única condição é que o pequeno link "Powered by Resizo" no rodapé do widget permaneça visível. ## Widgets disponíveis | Widget | Rota do embed | Função | | --- | --- | --- | | Image Resizer | `/embed/image-resizer/` | Redimensiona em dimensões exatas em pixels com travamento de proporção. | | JPG Compressor | `/embed/compress-image/` | Reduz o tamanho de arquivos JPG, PNG e WebP com um controle deslizante de qualidade. | | WebP Converter | `/embed/webp-converter/` | Converte PNG e JPG para WebP. | | Passport Photo | `/embed/passport-photo/` | Gera fotos de passaporte / visto conforme as especificações oficiais dos EUA, Reino Unido, UE, Índia e Canadá. | | Batch Resize | `/embed/batch-resize/` | Redimensiona várias imagens em lote de uma só vez; resultados saem em ZIP. | | Watermark Tool | `/embed/watermark/` | Adiciona marcas d'água em texto com posição, cor, opacidade e rotação. | ## Trecho mínimo de embed ```html ``` Cada widget pesa cerca de 5–10 KB no total (HTML + CSS + JavaScript puro) e é carregado de forma preguiçosa (lazy) por padrão. Não há frameworks, nem SDKs de rastreamento, nem beacons de analytics dentro do iframe. ## Parâmetros de URL | Parâmetro | Valores | Padrão | Descrição | | --- | --- | --- | --- | | `theme` | `light`, `dark` | (segue `prefers-color-scheme`) | Força um tema visual fixo. Omita para acompanhar automaticamente a preferência do SO do visitante. | O padrão de URL base é `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`. ## Modelo de privacidade e segurança O embed herda a arquitetura "sem upload, sem persistência" do Resizo: - **Sem upload.** O widget usa `FileReader` para ler o arquivo do usuário e a HTML5 Canvas API para processá-lo. Não existe nenhum endpoint de rede que receba dados de imagem. - **Sem cookies.** Zero cookies são definidos dentro do iframe. Nada é gravado em `localStorage` ou `sessionStorage` por padrão. - **Sem telemetria sobre o conteúdo do arquivo.** Nomes de arquivos, dimensões e metadados não são transmitidos. - **Em conformidade com LGPD + GDPR + CCPA por arquitetura**, não por política. Verifique no DevTools → aba Network: zero requisições disparam durante o processamento. - **O atributo `sandbox` não é suportado.** Ele precisa ser omitido, pois `sandbox` bloqueia os downloads de arquivos dos quais o widget depende. Se uma Content-Security-Policy estrita estiver ativa, adicione `frame-src https://www.resizo.in;`. ## Protocolo de auto-resize (postMessage) Cada widget publica a altura do seu conteúdo na janela pai sempre que o layout muda: ```json { "source": "resizo-embed", "type": "size", "height": 742 } ``` A página pai pode ouvir a mensagem e atualizar o `style.height` do iframe para eliminar barras de rolagem internas. Compare `event.source` com o `contentWindow` de cada iframe para rotear corretamente as atualizações de altura em páginas com vários embeds. Nenhuma biblioteca de terceiros do tipo `iframe-resizer` é necessária. ## Compatibilidade de plataformas O mesmo trecho de iframe funciona em qualquer plataforma que aceite HTML personalizado: - **WordPress** — bloco HTML personalizado (editor de blocos) ou aba "Texto" (editor clássico). Plugins de segurança podem precisar adicionar `resizo.in` à lista de permitidos. - **Ghost** — card HTML. - **Webflow** — elemento Embed. - **Wix** — Adicionar → Embed Code → Embed HTML. - **Squarespace** — bloco de código. - **Notion** — comando slash `/embed` com a URL do widget. - **Shopify** — Pages → clique em `` (Show HTML) → cole. - **HTML estático** — cole direto no arquivo; sem etapa de build. Componentes prontos para uso também são fornecidos para **React** (com auto-resize via `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`) e **Angular** (`ngOnInit` / `ngOnDestroy`). ## Suporte a navegadores | Navegador | Versão mínima | | --- | --- | | Chrome / Edge (Chromium) | 80+ | | Firefox | 78+ | | Safari (incl. iOS Safari) | 14+ | | Chrome Android | 80+ | A exportação WebP é totalmente suportada em Chrome, Safari e Edge. A Canvas API usada internamente tem mais de 98,5 % de suporte global segundo o [caniuse.com/canvas](https://caniuse.com/canvas). ## Versionamento O embed é buscado em `resizo.in` no momento da renderização, portanto melhorias são implantadas automaticamente. O *código* de embed que você cola no seu site permanece o mesmo. Mudanças incompatíveis de URL ou de formato de mensagem são evitadas; caso se tornem necessárias, a URL antiga continuará servindo o comportamento anterior sob um caminho versionado. ## Documentação relacionada - [Embed Generator](https://www.resizo.in/pt/embed/) — gerador interativo que emite o trecho de iframe. - [Documentação do Embed (HTML)](https://www.resizo.in/pt/embed/docs/) — guia completo de integração com tutoriais por plataforma, componentes de framework e solução de problemas. - [Visão geral do Resizo](https://www.resizo.in/docs/overview.pt.md) — o que é o Resizo e a justificativa arquitetônica. - [Como o Resizo funciona](https://www.resizo.in/docs/how-it-works.pt.md) — pipeline de processamento no navegador e modelo de privacidade. - [Funcionalidades](https://www.resizo.in/docs/features.pt.md) — lista completa de recursos e dimensões dos presets de redes sociais.