A self-contained, offline image converter delivered as one HTML file. Open it in a modern browser, select or drop image files, resize and convert them to WebP, then copy the resulting Base64 data URL or download the WebP file. No installation, build step, server, CDN, or network connection is required.
Open the hosted converter:
https://ttomohisa.github.io/image-to-webp-base64/image-to-webp-base64.html
Your images stay in your browser. Nothing is uploaded.
Images often need to be resized, converted to WebP, or embedded as a Base64 data URL while working in restricted environments, on a local machine, or during quick front-end prototyping. This tool is designed for that job.
- Single-file distribution — copy one HTML file anywhere
- Offline and private — selected images stay in your browser
- No runtime dependencies — scripts and styles are embedded; no CDN is used
- Multiple files — process one or more images in one action
- Immediate output — preview, inspect, copy, or download each converted result
- Open local image files using the file picker or drag and drop
- Convert images to WebP in the browser using the Canvas API
- Configure WebP quality from 0 to 100; default: 85
- Resize proportionally from 1% to 100%
- Choose 100%, 75%, 50%, 25%, or 10% resize presets
- Preview the converted WebP image
- See original and output dimensions, original size, WebP size, and Base64 data-URL size
- Copy the complete
data:image/webp;base64,...value to the clipboard - Download each output as a
.webpfile - Work with multiple images without uploading or persisting them
- Use keyboard-accessible file selection and visible focus states
- Download
image-to-webp-base64.htmlfrom this repository. - Open it in a current Chromium-based browser, Firefox, or Safari.
- Set the WebP quality and resize percentage if needed.
- Choose one or more image files, or drag them into the drop area.
- For each result, use Copy Base64 or Download WebP.
There is no upload. Selected files and generated results remain local to the current browser session.
The app reads each local image into the browser, draws it to an in-memory canvas at the chosen dimensions, and encodes that canvas as WebP. It then produces a Base64 data URL, not just the Base64 payload.
data:image/webp;base64,UklGR...
This full value can be assigned directly to an HTML img element's src, a CSS url(...), or another field that accepts data URLs. The Base64 form is generally larger than the WebP binary because of encoding overhead, so use the downloaded .webp file when a binary asset is preferable.
Settings apply when files are added. Change a setting and add the image again to create a separate result with the new settings. The source file is not modified.
| Capability | Requirement |
|---|---|
| Local file selection and drag/drop | Modern browser with the File API |
| Image resizing and WebP conversion | Canvas API with canvas.toBlob(..., 'image/webp') support |
| Base64 output | FileReader API |
| One-click clipboard copy | Clipboard API; a legacy in-page fallback is included where possible |
| Network | Not required; the tool is designed to run offline |
Support for individual source formats depends on what the browser can decode. Common browser-supported image formats work best. If the browser cannot decode an input image or cannot encode WebP, the app shows an error for that item.
- The application has no upload endpoint, analytics, tracking, CDN, or external library dependency.
- Files are processed in browser memory and are discarded when the page is reloaded or closed.
- A restrictive Content Security Policy blocks network connections (
default-src 'none'); only inline styles/scripts and localdata:/blob:image URLs are permitted. - Do not treat local-only processing as a substitute for your organization's security policy when handling sensitive images.
The distributable is deliberately a single HTML file. If you modify it directly, keep these principles intact:
- Do not add external CDN, analytics, or network dependencies.
- Keep the Content Security Policy restrictive and retain the offline design.
- Test image selection and drag-and-drop flows.
- Test quality and resize settings with PNG, JPEG, transparent images, very small images, and multiple files.
- Verify both clipboard copy and WebP download in the browsers you intend to support.
Copyright (c) 2026 Tomohisa Takagi
This project is licensed under the MIT License.
None. This tool uses browser-standard APIs only and bundles no third-party code or assets.
Bug reports and pull requests are welcome. When reporting a conversion issue, please remove sensitive data and provide a minimal, non-confidential reproduction image where possible.