How to Convert Images Between PNG, JPEG, WebP, and AVIF in the Browser
Resize outputs for CDN budgets, pick lossy vs lossless trade-offs, and preview quality sliders — without uploading originals to a sketchy converter site.
More utilities that pair well with this guide:
Why this matters
Marketing ships hero banners as multi-megabyte PNGs because nobody remembered WebP fallbacks. Developers attach BMP screenshots to GitHub issues bloating clones. E-commerce ops require JPEG under 200 KB while designers insist on alpha transparency — cue manual hops through Photoshop. A browser-local converter keeps NDAs intact and loops tight while experimenting with format matrices across breakpoints.
Three real scenarios
Batch-export AVIF/WebP variants from PNG masters while tuning quality per breakpoint.
Measurable LCP wins
Drop Illustrator-exported PNG, emit JPEG comps when transparency is unnecessary.
Fast turnaround
Downscale width and compress aggressively before uploading ticket attachments.
fewer bounce backs
Walkthrough
Open Image Converter.
Upload source raster(s)
PNG, JPEG, WebP, AVIF, GIF (first frame), BMP — drag from Finder or Explorer.
Pick target format
Choose container + codec aligned with your CDN policy (modern stacks prefer WebP/AVIF with JPEG fallback).
Adjust dimensions
Maintain aspect ratio presets or specify max edge lengths for responsive srcsets.
Tune quality or lossless toggles
JPEG/WebP quality sliders trade size vs artifacts — zoom previews when judging halos around text.
Download converted files
Rename consistently (
hero@2x.webp) before committing to your static asset pipeline.
Power tips
- Pair with compression when you only need smaller JPEG/WebP without format hops — see Image Compressor.
- Keep masters lossless (PNG/AVIF lossless) in Git LFS; derive lossy variants in CI referencing this workflow during prototyping.
- Mind alpha: JPEG cannot preserve transparency — pick PNG/WebP/AVIF when overlays demand it.
Common pitfalls
Common mistake
Double compression damage
Re-encoding already lossy JPEGs accumulates blockiness — start from raw exports whenever possible.
Common mistake
Color profile stripping
Some browsers assume sRGB after conversion — proof brand-critical photography on calibrated monitors if ICC profiles matter.
Common mistake
Animated GIF expectations
Only the first frame exports unless you choose an animation-aware pipeline elsewhere — verify motion requirements upfront.
When this is the wrong tool
- Vector to raster at scale: prefer headless Inkscape or
rsvg-convertin CI for deterministic SVG exports (see SVG to PNG tutorial). - RAW photo development: darktable/Lightroom deliver lens corrections beyond quick raster transforms.
- Batch thousands nightly: schedule server-side
ffmpeg/magickjobs with checksum auditing.
FAQ
Do uploads leave my laptop?
No — decoding and encoding run via browser APIs; disconnect Wi-Fi to sanity-check air-gapped workflows.
Why do AVIF exports look different on Safari?
Verify decoder versions — preview in target browsers when subtle grain structure influences brand acceptance.
Can I preserve EXIF metadata?
Depends on destination format and tool settings — audit privacy implications before retaining GPS tags.
Next steps
- Strip or edit sensitive EXIF using the EXIF editor tutorial.
- Build ICO favicons after vector cleanup via SVG to ICO.
- Merge storyboards into PDFs using Image to PDF.