<image-convert>

A drag-and-drop image format converter with EXIF stripping and auto-detection

Quick Start

Installation

The converter is included in the @profpowell/image-editor package:

npm install @profpowell/image-editor

Import the Converter

<script type="module"> import '@profpowell/image-editor/convert' </script> <image-convert></image-convert>

Or via CDN:

<script type="module" src="https://unpkg.com/@profpowell/image-editor/dist/image-convert.js"></script>

Features

Format Conversion

Convert between PNG, JPEG, WebP, and AVIF (when browser supports it).

EXIF Stripping

Automatically strip EXIF metadata for privacy. Toggle with the strip-metadata attribute.

Format Detection

Detects input format via magic bytes, not just file extension. Shows source and output info.

Quality Control

Adjustable quality slider for lossy formats with live file size estimation.

Demos

Default Converter

Drop an image or click to select. Choose output format and quality, then download.

<image-convert></image-convert>

WebP Output with Metadata Stripping

Pre-configured to output WebP at 80% quality with EXIF metadata stripped.

<image-convert format="webp" quality="0.8" strip-metadata></image-convert>

Dark Mode

<image-convert mode="dark"></image-convert>

API Reference

Attributes

Attribute Type Default Description
mode 'light' | 'dark' auto Theme mode. Auto-detects page-level dark mode when omitted.
format 'png' | 'jpeg' | 'webp' | 'avif' 'png' Default output format. AVIF availability is auto-detected.
quality number (0–1) 0.85 Export quality for lossy formats (JPEG/WebP/AVIF).
strip-metadata boolean true Strip EXIF metadata from converted images.
accept string 'image/*' Accepted file types for the file picker.

Events

Event Detail Fires when
convert-complete { format, quality, size } Conversion and download completes

CSS Custom Properties

Property Description
--image-convert-bg Component background
--image-convert-border-color Border color
--image-convert-accent-color Accent/primary color

Related

The <image-convert> component is a companion to the full <image-editor> component. Use the editor for cropping, rotating, filtering, and resizing. Use the converter for quick format changes and metadata stripping.