Raster images in the browser
A raster image is a grid of pixels plus metadata: width, height, color channels, and a container format that decides how those pixels are stored. JPEG, PNG, and WebP are the three formats most web and product workflows still juggle. Each trades compression, color fidelity, transparency, and decoder support differently. This family converts, resizes, inspects, and samples colors entirely in the browser using canvas decode/encode paths—no server upload of your file bytes.
To convert a photo into a smaller WebP payload without leaving the machine, start with From JPG to WEBP.
Why format choice still matters
JPEG stores photographic content efficiently with lossy compression. It has no alpha channel. Re-encoding at lower quality always discards more information; JPEG → PNG does not restore detail lost earlier—it only wraps currently decoded pixels in a lossless container.
PNG stores pixels losslessly and supports transparency. It suits UI, screenshots, and hard edges; photographic PNGs are often much larger than JPEG or WebP equivalents.
WebP offers lossy and lossless modes and typically smaller files for similar visual quality in modern browsers. Many CMS and email clients still prefer JPEG; hence WebP → JPG remains common.
Choosing a path is about the next consumer: a legacy CMS, a size limit, a design system that expects PNG with alpha, or a performance budget that favors WebP.
Decode → canvas → encode
Client-side converters share a pipeline: read a local File, decode to a bitmap, draw onto a canvas at the desired size, export with a target MIME type and optional quality, then download without sending pixels to a remote API.
Quality sliders apply to lossy targets (JPEG, lossy WebP). PNG export is lossless for the canvas buffer. When converting PNG or WebP with transparency to JPEG (or opaque WebP), transparent regions are typically composited onto a solid background—expect changes around soft alpha edges.
Subtools in this family
- From JPG to WEBP — lossy WebP from JPEG with adjustable quality.
- From PNG to WEBP — shrink screenshots or graphics; alpha flattened on the lossy path.
- From WEBP to JPG — decode WebP for pipelines that only accept JPEG.
- From PNG to JPG — PNG → JPEG with quality control; transparency flattened.
- From JPG to PNG — wrap decoded JPEG pixels in a PNG container.
- Resize by width or height — scale JPEG, PNG, or WebP while preserving aspect ratio.
- Get image info — dimensions, aspect ratio, MIME type, file size, megapixels.
- Dominant colors — frequent colors as hex/RGB swatches for palettes and CSS.
Resize, metadata, and color sampling
Specifying only width or only height and letting the other follow avoids stretching. Downscaling helps web performance; upscaling invents pixels and never recovers true optical detail.
File size on disk and decoded megapixels answer different questions—compression ratio is orthogonal to pixel count. Get image info surfaces those fields together. Canvas paths are a pixel pipeline, not a full EXIF archive: orientation may be applied for display, but rich tags rarely round-trip into exports.
Palette extraction counts or clusters colors after optional downsampling. Use Dominant colors for CSS-ready hints; refine in a design tool when brand accuracy matters. sRGB assumptions and JPEG chroma subsampling bias which bins win.
Quality, privacy, and limits
Every lossy encode can introduce artifacts. Prefer a master (PNG or high-quality WebP/JPEG) and one delivery encode—avoid JPEG ↔ WebP ↔ JPEG chains. Quality 1–100 is encoder-dependent; WebP 80 is not numerically identical to JPEG 80.
Decode and encode run in the page, so sensitive screenshots need not leave the device—but extensions, screen sharing, and downloads can still expose content.
Limitations: very large megapixel images can exhaust tab memory; expect RGB JPEG/PNG/WebP, not CMYK TIFF or animated multi-frame pipelines; no soft-proofing suite.
Summary
Image conversion on the web is a decode–draw–encode loop constrained by container capabilities and by the browser engine. This hub groups format bridges, resize, inspection, and color sampling that run locally in the browser. Match source and destination formats, preserve aspect ratio when scaling, avoid repeated lossy generations, and keep masters separate from delivery encodes.