WEBP vs JPG
Choose between performance-oriented WEBP and universally friendly JPG with a clear decision framework.
Key takeaway
Rule of thumb: Prefer WEBP for modern web delivery; prefer JPG for email, forms, and unpredictable recipients. Use <picture> when you need both.
Comparison table
| Topic | WEBP | JPG |
|---|---|---|
| Web efficiency | Often strong | Reliable, sometimes heavier |
| Compatibility | Great in modern browsers | Near-universal |
| Transparency | Yes | No |
| Email/legacy | Can fail | Safer |
| Resaving photos | Lossy possible | Generational loss |
Why sites push WEBP
Repeated product and article images multiply small byte differences into LCP and bandwidth impact. WEBP frequently matches perceived sharpness at lower weight than JPG, but you should measure on your real templates rather than assuming a fixed savings number.
Where JPG still rules
- Unknown recipient devices
- Attachment-first communication
- JPG-only upload allow-lists
- Print shops and older CMS tools
Transparency
If you need alpha, JPG is out. Use WEBP or PNG. Straight photos usually do not need alpha.
Conversion directions
- JPG → WEBP: lighten pages
- WEBP → JPG: restore compatibility
- HEIC → WEBP/JPG: publish iPhone masters
Conversion re-encodes. A bad JPG does not become detailed again as WEBP—remaster from a better source when you can.
Fallback pattern
Serve WEBP to modern clients and JPG to exceptions via <picture>, unless a platform forces a single format.
Checklist
- Is the consumer a browser or a random file opener?
- Do you need transparency?
- What is the upload cap?
- Do you have cache-busting when replacing assets?
Storefront and content defaults
Many commerce stacks lead with WEBP and keep JPG fallbacks. Marketplace rules that allow only JPG override preference. If you run both a owned store and third-party markets, keep a high-quality master and derive per channel. Newsletters and press kits usually want JPG even when the article page uses WEBP.
A fair comparison loop
- Match resolution
- Export several qualities for each format
- Zoom on phone and laptop displays
- Pick the smallest acceptable setting
- Roll out on top-traffic templates first
Do not globalize a single hero win. Track total bytes and broken-attachment complaints together.
Email and chat traps
WEBP that works on the site can blank out in mail clients. Support teams save time by standardizing external attachments as JPG while still using WEBP on the web. Split roles: WEBP for pages, JPG for exchange.
Cost and risk framing
WEBP pays off in bandwidth and speed; JPG pays off in fewer support failures. High-traffic media surfaces lean WEBP; attachment-heavy workflows lean JPG. Monitor decode failures and “won’t open” tickets during rollout. Keep masters; derive WEBP for web. Bundle JPG↔WEBP tools with a one-line policy for onboarding.
Defaults by content type
Heroes: WEBP + JPG fallback. Newsletter/support attachments: JPG. Text-heavy UI: quality headroom or PNG. Pin the table in chat and amend dated exceptions. Review rework minutes from broken attachments, not only byte savings.
Final selection sentence
Optimize pages with WEBP; exchange files with JPG; keep masters; measure samples instead of arguing percentages. If you need both, design fallbacks deliberately. Wire your CMS components so authors cannot accidentally publish a 4000px JPG into a mobile hero slot while the performance team thinks everything is WEBP. Process beats preference.
Revisit the decision quarterly with fresh top-URL image weights. Traffic mix and template design change, and a choice that was correct last year can quietly regress when a new homepage module ships oversized media. Make the comparison a scheduled habit, not a one-off debate.
Appendix for content ops
Authors should not choose codecs ad hoc. Give them a component that picks WEBP for the page and keeps JPG for downloadable press assets. Document which surfaces are “page only” versus “file attachment” so nobody pastes a WEBP into an email template that blanks out in Outlook.
Related tools
FAQ
What should ecommerce use?
WEBP when the platform allows; JPG when it does not.
Does WEBP→JPG increase size?
Often yes—you are buying compatibility.
What about email?
JPG is usually safer.
How do I pick quality?
Compare at real display size; no universal number.
What about animation?
JPG is still; animated WEBP needs specialized handling.