Image Converter

What This Tool Does

This image converter handles every stage of a typical developer image workflow: format conversion, lossy and lossless compression, canvas resizing, DPI metadata embedding, bit-depth promotion, and alpha-channel management. All processing runs in your browser using the Canvas API, WebAssembly decoders, and a pure-JS GIF encoder. No file is ever sent to a server, and the only size limit is your device's available RAM.

Supported input formats include every common raster format: PNG, JPEG, WebP, AVIF, GIF, BMP, TIFF, ICO, and HEIC/HEIF (from iPhone cameras). Output covers PNG, JPEG, WebP, AVIF, GIF, BMP, TIFF, and ICO, covering the full spectrum from legacy compatibility to modern web delivery.

Choosing the Right Format

Quality and Compression

The quality slider controls the encoder's perceptual quality target for lossy formats (JPEG, WebP, AVIF). It maps to the quality parameter of the browser's HTMLCanvasElement.toBlob() API, which accepts a value from 0.0 (smallest file, worst quality) to 1.0 (largest file, best quality). The default of 85% is the widely accepted sweet spot for web delivery.

Quality affects different codecs differently. JPEG uses Discrete Cosine Transform quantisation tables; lower quality coarsens the tables, introducing block artefacts in high-frequency areas (edges, text). WebP uses VP8/VP8L transforms; its artefacts tend to be blurrier rather than blocky. AVIF uses AV1's perceptual quality model, which preserves fine texture better at low bitrates than either JPEG or WebP.

For lossless formats (PNG, TIFF, BMP, ICO), the quality setting has no effect because the output is always a bit-perfect reproduction of the input pixels.

DPI, PPI, and Resolution Metadata

DPI (dots per inch) and PPI (pixels per inch) are often used interchangeably in digital contexts. They describe the intended output resolution: how many pixels should map to one physical inch when the image is printed or rendered at its "natural" size. The pixel grid itself is unchanged; the only thing modified is the metadata tag that instructs printers and design tools about the intended output scale.

Common values: 72 ppi was the original Mac screen resolution and remains the web default. 96 ppi is the Windows screen baseline. 150 ppi is minimum acceptable for print. 300 ppi is the professional print standard, producing sharp results on high-quality paper at a standard viewing distance.

This tool embeds DPI into PNG files as a pHYs chunk (pixels per metre, unit type 1), into JPEG files by writing or patching the JFIF APP0 segment, and into BMP files via the XPelsPerMeter and YPelsPerMeter fields of the BITMAPINFOHEADER. WebP, AVIF, and GIF do not have standardised DPI metadata fields at this time.

Bit Depth

Bit depth determines how many distinct values each colour channel can represent. At 8-bit per channel (the default for all formats), each of the R, G, B, and A channels has 256 steps, giving a 24-bit RGB or 32-bit RGBA colour space. This is more than sufficient for most web and photography workflows.

16-bit per channel (available for PNG and TIFF) provides 65,536 steps per channel. This extra precision matters when editing images through multiple rounds of exposure adjustment, colour grading, or compositing, as it prevents banding and tonal posterisation from accumulated rounding errors. Cameras that shoot RAW produce 12-bit or 14-bit data, which is stored in 16-bit containers for processing.

This tool promotes 8-bit canvas data to 16-bit using the standard expansion formula v16 = v8 × 257 (equivalent to replicating the byte into both the high and low positions of the 16-bit word), which preserves the full visual range. The 16-bit PNG encoder in this tool uses a custom chunk writer with CompressionStream for standard zlib-wrapped DEFLATE, compatible with all PNG-capable applications.

Transparency and Alpha Channels

The Preserve Alpha mode passes the input image's alpha channel through to the output without modification. This is only meaningful for formats that support transparency: PNG (full 8 or 16-bit alpha), WebP (full alpha), AVIF (full alpha), TIFF (associative or unassociated alpha), ICO (full 32-bit RGBA via PNG compression), and GIF (binary transparency, where one palette index is designated as transparent).

The Flatten mode composites the image over a solid background colour before encoding. This is required when converting to JPEG or BMP, which do not support alpha channels. It is also useful when preparing images for platforms that mishandle transparency (certain CMSes, older email clients, or PDF generators).

The background colour picker accepts any hex colour. Common choices: #ffffff (white) for documents and print, #000000 (black) for video frames and dark UI, and #f0f0f0 for neutral grey card-style presentation.

HEIC / HEIF Input

HEIC (High Efficiency Image Container) is the default format on iPhones since iOS 11. It uses HEVC (H.265) compression, typically producing files half the size of equivalent-quality JPEGs while preserving HDR, depth maps, and live photo metadata. The catch: HEIC is not natively supported by most web applications or Windows by default.

This tool decodes HEIC and HEIF files using heic2any, a client-side WebAssembly wrapper around libheif. Decoding happens entirely in your browser; no HEIC file is ever sent to a server. After decoding, you can convert to any supported output format: WebP for web delivery, JPEG for maximum compatibility, or PNG for lossless preservation.

Resizing and Scaling

The resize feature uses the browser's drawImage() API with a 2D canvas context. Modern browsers apply high-quality downsampling (typically bilinear or bicubic interpolation) when scaling images down, producing results comparable to desktop applications for most use cases.

By Pixels mode lets you set exact output dimensions with an optional aspect ratio lock. When the lock is engaged, changing either width or height recalculates the other dimension to maintain the original proportions. By Percentage mode scales both axes by the same factor, from 1% (thumbnail) to 400% (upscale).

Combining resize with format conversion is the most common developer workflow: e.g., take a HEIC from an iPhone, resize to 1200 px wide, convert to WebP at quality 82, and embed 72 ppi for web delivery, all in a single pass.

Privacy and Client-Side Architecture

Every operation in this tool (format decoding, canvas rendering, format encoding, DPI injection, palette quantisation) executes within your browser's JavaScript sandbox. No image data, no pixel values, no file names, no metadata is transmitted to any server. The page loads static assets (HTML, CSS, JavaScript, WASM) once, then operates entirely offline.

The technical stack: Astro for static site generation, Tailwind CSS v4 for styling, the Canvas 2D API for image rendering and encoding, heic2any (WebAssembly) for HEIC decoding, UTIF for TIFF decoding and encoding, gifenc for GIF encoding with median-cut quantisation, and custom TypeScript encoders for BMP, ICO, and 16-bit PNG with zlib compression via the CompressionStream API.