Image converter (WebP/Base64)

Convert images to WebP/JPEG/PNG and extract data URIs.

Select an image or drag & drop here

Two jobs come up constantly in web work: turning a heavy PNG into a WebP that loads faster, and embedding a small icon directly in a stylesheet so it costs no extra request. This tool does both from the same file. Drop an image in, pick a format, and either download the converted file or copy it as a data URI.

How it works

Choosing an output format

WebP is the default because it produces the smallest file for almost any kind of image and is supported by every current browser. JPEG is the safe choice when a file has to be opened by older software or uploaded to a service that rejects WebP. PNG is for images that need transparency or perfectly sharp edges — logos, diagrams, screenshots of text.

Converting a transparent PNG to JPEG is the one conversion that changes your image visibly: JPEG has no alpha channel, so anything transparent is filled with solid colour. Convert to WebP instead if you need the transparency preserved.

The quality slider

Quality applies to JPEG and WebP only, since PNG is lossless. The default of 85% keeps compression artefacts out of sight for most photographs. Push it toward 60% when file size matters more than fine detail, and above 90% only when the image will be edited or zoomed later — the returns get very small while the file grows quickly.

Converting from one lossy format to another re-encodes the picture, adding a second round of loss. Start from the highest-quality original you have rather than from a file that has already been squeezed.

Copying a Base64 data URI

Copy data URI puts the whole image on your clipboard as a text string beginning data:image/webp;base64,.... You can paste that anywhere a URL is expected:

<img src="data:image/webp;base64,...">
background-image: url(data:image/png;base64,...) in CSS
An <img> tag inside an HTML email or a static report that must work without external files

Base64 encoding inflates the data by roughly a third, so it is a trade, not a free win: one fewer network request in exchange for a larger, uncacheable payload inside your HTML or CSS. It pays off for small assets — icons, tiny logos, placeholder thumbnails, generally under about 5 KB. For photographs it is the wrong tool; link to a real file.

Everything stays local

Decoding, re-encoding and Base64 conversion all happen in your browser. The file is never uploaded, so it is safe to convert internal screenshots and unreleased artwork.

Terms explained

Data URI: A way of writing a whole file inside a URL as text, in the form data:image/png;base64,AAAA... Browsers treat it exactly like a link to an image file.
Base64: A text encoding that represents binary data using 64 printable characters. It makes the data about 33% larger but lets it travel inside HTML, CSS or JSON.
WebP: A modern image format that supports both transparency and lossy compression, typically producing files noticeably smaller than an equivalent JPEG or PNG.
Alpha channel: The per-pixel transparency information in a PNG or WebP. JPEG has no alpha channel, so transparent areas become solid when you convert to it.
Quality: A 0–100 setting controlling how much detail lossy formats discard. Higher means a larger file with fewer visible artefacts.

Frequently asked questions

When should I embed an image as a data URI instead of linking to it?

Use a data URI for small assets — icons, a tiny logo, a spacer — where saving one HTTP request outweighs the bigger file. Avoid it for photographs, because Base64 adds about a third to the size and the embedded copy cannot be cached separately from the page.

Why did my transparent background turn white or black after converting?

You converted to JPEG, which has no alpha channel and must fill transparent pixels with a solid colour. Choose WebP or PNG if the transparency has to survive.

Is WebP safe to use on a live website?

Yes. Every current version of Chrome, Firefox, Safari and Edge decodes WebP. If you must support very old browsers, serve WebP through a picture element with a JPEG or PNG fallback.

Does converting the same image repeatedly damage it?

Between lossy formats, yes — each JPEG or WebP pass discards a little more detail, and the losses accumulate. Converting to PNG is lossless, but it will not restore quality that an earlier pass already removed.

Are my files sent to a server?

No. The image is decoded and re-encoded inside your browser, and the data URI is generated locally. Nothing is uploaded at any point.