WebP vs JPG: Which Image Format Should You Use?

WebP is smaller than JPG for most website photos, and it can store transparency. JPG still has the wider audience: email clients, print shops, and older desktop tools. A WebP-only archive is a bad master, because a later edit or a client who cannot open WebP has nothing to go back to. Convert a delivery copy with the WebP converter. When the pipeline needs a JPG in the middle, use PNG to JPG, and run Compress Image if the JPG fallback is still heavy. Transparency and logos are covered in PNG versus JPG. This comparison is about page weight.

One homepage hero was 1.2 MB as a single JPG. The same crop, exported to WebP at quality 80, was 780 KB, with no visible difference on a 1440px laptop screen. PageSpeed's LCP score moved from "needs improvement" to green. The open question after that was whether every browser would show the file. Byte count and client support are both part of the choice.

What WebP and JPG are

JPEG (JPG) has been the usual web format for photographs since the 1990s. Compression is lossy: it discards data the eye rarely notices. There is no transparency channel. Cameras, editors, and email clients open JPG.

WebP is a raster format from Google. It supports lossy and lossless compression, plus an alpha channel. For photographs, encoders usually produce a smaller file than JPG at the same perceived quality.

Neither format replaces SVG, or animated GIF and animated WebP, for simple motion. This comparison is about static photos and complex raster art.

How the compression differs

JPG splits the image into 8×8 blocks, runs a discrete cosine transform, and quantizes the coefficients. Pushed hard, skies and gradients show blockiness and color banding.

WebP uses predictive coding, and it can store alpha. At the same file size, lossy WebP often holds edges and gradients better than JPG. Encoder settings and the subject still change the result.

For the tuning detail, read image compression for web and how image compression affects quality.

Side-by-side

| Factor | WebP | JPG | |--------|------|-----| | File size (photos) | Usually 25 to 35% smaller | Baseline | | Browser support (2026) | All major browsers | Universal | | Email client support | Spotty | Excellent | | Transparency | Yes (alpha) | No | | Lossless mode | Yes | No (JPEG lossless exists but is rare on the web) | | Editing generations | Fewer re-save artifacts if you keep a lossless master | Quality loss stacks each time you re-save | | EXIF/metadata | Often stripped on convert | Widely preserved |

When WebP fits

• Website heroes, blog featured images, and product galleries, where bandwidth and LCP matter
• E-commerce catalogs, where hundreds of thumbnails add up
• Photos that need transparency without the weight of a lossless PNG (test the quality first)
• CDN auto-format pipelines. Cloudflare, Imgix, and similar services can negotiate WebP

Serve it with a <picture> element and a JPG fallback while you still need both:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Team at annual meetup" width="1200" height="630">
</picture>

When JPG fits

• Email newsletters. Many clients ignore WebP
• Attachments for someone who asked for a photo and does not want a format explanation
• Print shop handoffs. Confirm the shop accepts WebP. JPG is still the safe file to send
• Social uploads. The platform re-encodes anyway. Upload a high-quality JPG or PNG according to that platform's guidance
• A legacy CMS or tool that cannot accept a WebP upload

Recommendation by use case

| Use case | Recommended format | Notes | |----------|-------------------|-------| | Website hero images | WebP + JPG fallback | Measure LCP before and after | | Email newsletters | JPG | Test in Litmus or in real clients | | E-commerce product photos | WebP primary | Keep JPG for marketplaces that require it | | Social media uploads | JPG or PNG | Follow the platform | | Logos with transparency | PNG or WebP lossless | Sharp edges sometimes favor PNG | | User-uploaded avatars | WebP after a server convert | Sanitize and resize on the server | | Archival masters | JPG at high quality, or RAW | A WebP-only archive leaves you stuck |

WebP, JPG, and Core Web Vitals

Largest Contentful Paint often traces to the hero image. Shrinking that one asset from 1.2 MB to 780 KB can move a URL from yellow to green without a CSS change. See Core Web Vitals and images for the measurement steps.

Oversized dimensions hurt either format. Resize to the display width times a device-pixel cap (usually 2×) before you spend time on the format.

Quality settings

Start lossy WebP around quality 75 to 85 for photographs. Compare at the size the page actually displays. A 400% zoom shows defects viewers will not see.

For a PNG with flat color (a screenshot or a UI), try WebP lossless. It is sometimes smaller than PNG, and sometimes not. The PNG vs JPG guide helps you pick the master format before the WebP conversion.

Converting

In the browser:

1. Open the WebP converter with the JPG or PNG source.
2. Set the quality and preview at the target dimensions.
3. Download the WebP and check it on a retina display and on a standard display.
4. If the JPG fallback is still large, run Compress Image on that copy.

Convert from copies. Keep originals in a masters/ folder or a DAM, outside the public upload directory.

PNG to JPG covers the case where the pipeline wants a JPG intermediate before WebP.

Browsers and tools in 2026

Chrome, Firefox, Safari, and Edge have supported WebP for years. Safari added full support in 2020 and later, and iOS Safari follows. The gaps are Outlook on the desktop (it varies by version), some PDF embed paths, and older GIMP installs that lack the plugin.

Check analytics. If traffic without WebP is under 0.5%, many teams drop the dual <picture> setup and serve WebP only, with a CDN that negotiates the format. Above 2%, keep the JPG fallback.

Common mistakes

Converting the only copy. A lossy WebP that you keep editing gets worse at each save. Keep the master.

Reusing one quality number across formats. WebP Q80 and JPG Q80 are not the same setting. Tune each format by looking at it.

A huge image saved as WebP. A 4000px-wide WebP is still heavy. Resize first.

WebP in email with no test. A broken image icon in Outlook costs more than the kilobytes you saved.

Converting only the full-size asset. Convert every registered CMS thumbnail size as well.

Privacy and browser processing

Vertex Solutions image tools process files in the browser when they can, so a basic conversion does not need a server upload. Unreleased product shots still belong in local processing. See browser file processing for the upload and local tradeoffs.

Limitations

WebP does not stand in for:

• SVG, for icons and logos that have to scale
• AVIF, a newer format that is sometimes 20% smaller than WebP, slower to encode, with a similar support curve
• Print CMYK. Stay in TIFF or JPG with a color profile until the shop approves another file

Look at AVIF again each year. Encoders move quickly.

Related articles

• PNG vs JPG: when to use each
• Image compression for web
• Core Web Vitals and images

What to ship

For a new web project in 2026, deliver photographs as WebP and keep JPG as the fallback or the interchange file until audience data says the fallback is unused. For email, documents, and attach-and-forget sharing, JPG remains the safest choice. Convert with the WebP converter and measure the LCP change on the pages you actually ship.