Every developer ends up converting images sooner or later: a HEIC photo that won't upload, a PNG that's too heavy for a landing page, an SVG that needs to live inside a CSS file. Opening a desktop editor for a 10-second job is overkill.
This post covers the formats and encodings that matter, and links to free browser tools for each task.
Which format should you use?
| Format | Best for | Key trait |
|---|---|---|
| JPG | Photos | Lossy compression, small files |
| PNG | Screenshots, graphics, transparency | Lossless |
| WebP | Web delivery | Efficient compression |
| AVIF | Modern web delivery | Strong compression |
| GIF | Simple animations | Limited colors |
| SVG | Logos, icons, diagrams | Vector, scales infinitely |
| HEIC/HEIF | Phone photos | Efficient storage, poor compatibility |
| TIFF / BMP | Print, scanning, legacy workflows | High quality / simple bitmap |
Rule of thumb: photos → JPG/WebP/AVIF, graphics with transparency → PNG/WebP, icons and logos → SVG.
Gotcha: PNG → JPG and transparency
JPG has no alpha channel, so transparent areas need a background color during conversion. If your converted logo suddenly has a black box around it, this is why.
Also, converting between lossy and lossless formats changes file size and can change quality. Converting a JPG to PNG won't restore detail that compression already removed.
Base64 vs Data URI (they're not the same thing)
- Base64 is an encoding: it turns binary data into text.
- A Data URI is a complete URI that embeds the data directly, usually with a media type and Base64 payload:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="inline image" />
Inlining small images this way saves an HTTP request. It's handy for tiny icons, email templates, and API payloads, but it bloats HTML/CSS for large images, so keep it to small assets.
For SVG you can often skip Base64 and use a URL-encoded Data URI, which is smaller and stays readable:
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E");
}
The toolkit
I use Noloii's free Image Conversion tools for these quick jobs. They run in the browser, with no signup:
- Image to Base64 and Base64 to Image
- Image ↔ Data URI
- SVG to Data URI
- General Image Converter (JPG, PNG, WebP, AVIF, GIF, SVG, BMP, HEIC, HEIF, TIFF)
- JPG to PNG, PNG to JPG, WebP to JPG
- Image to PDF
- Color Picker and Grayscale converter
- Passport Photo Maker and Visa Photo Maker (always double-check the official requirements for your country)
Quick workflows
- Ship a faster site: convert hero JPG/PNG files to WebP or AVIF.
- Fix a failed upload: convert HEIC to JPG, or WebP to JPG for apps that don't accept WebP.
- Inline a small icon: SVG → Data URI → paste into CSS.
- Debug an API response: paste a Base64 string into Base64 → Image to see what it actually contains.
Wrap-up
Picking the right format and encoding is a small decision that affects page speed, compatibility, and file size. If you have a conversion workflow I missed, or a format you'd like to see supported, tell me in the comments.
Full collection: noloii.com/tools/image-conversion
Top comments (0)