JPGVSPNG
Do not use the wrong one! Using JPG for logos makes them blurry. Using PNG for photos makes them huge. Learn when to use which.
The Verdict
These two aren't competitors; they are partners. **Use JPG for Photos** (camera shots). **Use PNG for Graphics** (logos, text, screenshots). Mixing them up is the #1 web design mistake.
Photographs
Winner: JPG
JPG is designed for chaotic, real-world color data. It compresses photos beautifully. PNG tries to save every pixel perfectly, making photo file sizes massive (10MB+).
Text & Lines
Winner: PNG
JPG hates sharp edges. It smears text with 'artifacts'. PNG keeps text crisp and sharp. Never save a screenshot of text as a JPG.
Transparency
Winner: PNG
JPG needs a background. PNG can be transparent. If you need a logo overlay, you have no choice but to use PNG (or WebP).