EN

WebP & Image Converter Reactive – Documentation

 Overview

The WebP & Image Converter Reactive component allows you to convert and compress images directly in OutSystems Reactive applications.
It works fully on the client side (JavaScript), ensuring fast performance without server overhead.

Supported features:

• Convert any uploaded image to WebP.

• Choose between lossy or lossless compression.

• Select from multiple quality presets (Ultra Low → Lossless).

• View original vs converted image size (bytes and formatted text).

• Download the optimized image.

 How It Works

1. Upload Image – Select the image you want to convert.

2. Choose Compression – Pick the WebP compression level (Ultra Low, Low, Medium, High, Maximum, or Lossless).

3. Convert Image – Generate the optimized WebP image.

4. Download Image – Save the converted file locally.

 Quality Levels

Screenshots

Initial Interface

The user interface provides sections for uploading, selecting compression, converting, and downloading.

Selecting Quality Compression

Users can choose compression levels from Ultra Low to Lossless.

Conversion Result (Lossless Example)

Example of converting a large JPEG image to WebP Lossless, with significant size reduction while keeping quality.

Original vs Converted Image

Side-by-side comparison of the original file and the WebP converted file with optimized size.

Benefits of Using WebP

• Smaller file sizes → 25–35% smaller than JPEG/PNG.

• Faster page loads → Improves UX and Core Web Vitals.

• Transparency support → Replaces PNG with reduced size.

• Animation support → Replaces GIFs with smaller, higher-quality files.

• Flexible compression → Lossy or Lossless, depending on the use case.

Use Cases

• Optimize uploaded images before storing.

• Improve web performance by serving lighter images.

• Provide downloadable previews in smaller sizes.

• Guarantee high-quality visuals with reduced storage costs.
  
  

• PT

WebP & Image Converter Reactive – Documentação

 Visão Geral

O WebP & Image Converter Reactive permite converter e comprimir imagens diretamente em aplicações Reactive do OutSystems.
Funciona totalmente no lado do cliente (JavaScript), garantindo alto desempenho sem sobrecarregar o servidor.

Funcionalidades:

• Converter qualquer imagem carregada para WebP.

• Escolher entre compressão com perdas (lossy) ou sem perdas (lossless).

• Selecionar entre vários níveis de qualidade (Ultra Low → Lossless).

• Visualizar imagem original vs imagem convertida com os respetivos tamanhos (bytes e texto formatado).

• Fazer download da imagem otimizada.

Como Funciona

1. Upload Image – Carregar a imagem a ser convertida.

2. Compression – Selecionar o nível de compressão do WebP (Ultra Low, Low, Medium, High, Maximum, ou Lossless).

3. Convert Image – Converter a imagem para WebP com a compressão escolhida.

4. Download Image – Guardar a imagem convertida no dispositivo.

 Níveis de Qualidade

 Capturas de Ecrã

Interface Inicial

Interface com opções para carregar, selecionar compressão, converter e descarregar imagens.

Seleção de Compressão

Menu para escolher o nível de compressão entre Ultra Low e Lossless.

Exemplo de Conversão (Lossless)

Conversão de uma imagem JPEG grande para WebP Lossless, reduzindo o tamanho mantendo a qualidade.

Comparação Imagem Original vs Convertida

Visualização lado a lado da imagem original e da versão convertida em WebP.

Benefícios do WebP

• Ficheiros mais leves → até 35% menores que JPEG/PNG.

• Carregamento mais rápido → melhora a experiência do utilizador e Core Web Vitals.

• Suporte a transparência → substitui PNG com menor tamanho.

• Suporte a animações → substitui GIF com melhor qualidade e menor peso.

• Compressão flexível → modo com perdas ou sem perdas conforme a necessidade.

 Casos de Uso

• Otimizar imagens antes de guardar no servidor.

• Melhorar o desempenho de aplicações web ao servir imagens mais leves.

• Gerar pré-visualizações otimizadas para download.

• Garantir imagens de alta qualidade com menor custo de armazenamento.