I use a fairly boring rule for image formats: JPG for photos, PNG for screenshots and graphics, and WebP when the file is staying on a website. The details matter when transparency, compatibility or file size becomes the deciding factor.
JPG: photos, and almost nothing else
JPG and JPEG refer to the same format. Its compression removes subtle color shifts and fine texture. A photo saved as JPG can be a tenth the size of its PNG version with little visible difference at a normal quality setting.
The same trick fails badly on anything with hard edges. Text, logos, screenshots, and diagrams come out of JPG compression with fuzzy halos around the edges; those smudgy artifacts you've seen around letters in a meme that's been reshared too many times. JPG also has no transparency: anything transparent gets flattened onto a solid background.
Use JPG for: photos you'll email, post or archive, where file size matters more than pixel-perfect fidelity.
PNG: exact pixels and transparency
PNG uses lossless compression and preserves every pixel. It also supports full alpha transparency. Use it for logos, icons, screenshots, and graphics placed over unknown backgrounds.
Detailed photos produce very large PNG files. Exporting a camera photo as PNG can make it five to twenty times larger than a JPG even though the two look the same on screen.
Use PNG for: screenshots, logos, graphics with text, and anything that needs a transparent background.
WebP: the modern default for the web
WebP supports lossy compression, lossless compression, and transparency. At similar visual quality, its lossy files are often 25–35% smaller than JPG. Current browsers support it.
WebP support is less consistent outside browsers. Some desktop software, corporate tools, print workflows, and upload forms still reject it. JPG and PNG remain safer when a file has to move between unfamiliar systems.
Use WebP for: images on your own website, where you control what displays them and want the smallest files.
SVG: shapes, not pixels
SVG stores drawing instructions such as lines, curves, and fills instead of a grid of pixels. A vector logo stays crisp at any size and can remain small. Photos placed inside an SVG are still pixel images and gain no scaling benefit.
Use SVG for: logos, icons, and illustrations that were created as vector art.
HEIC and AVIF compatibility
HEIC is what iPhones shoot by default, and AVIF is an emerging web format. Support remains uneven. Keep the original, then make a JPG or PNG copy when the file needs broad compatibility. The HEIC guide covers conversion and iPhone settings.
The short version
- Photograph going anywhere unpredictable → JPG at 80–90% quality.
- Screenshot, logo or anything with text → PNG.
- Needs a transparent background → PNG (or WebP if it stays on the web).
- Image for your own website → WebP.
- Vector logo or icon → keep it SVG as the master copy.
- Not sure → JPG for photos, PNG for everything else. You'll be right nearly every time.
Converting between formats
Converting a compressed JPG into PNG does not restore lost detail. It creates a larger file containing the same image. Keep the highest-quality original and convert copies from it.
If you want to try this hands-on, the image format converter on this site converts between PNG, JPG, WebP, and SVG entirely in your browser, and the resize & compress tool lets you watch how the quality slider changes file size in real time.