← All articles 7 min read

How to Convert JPG to WebP (3 Free Methods)

WebP produces files 25-35% smaller than JPG at the same visual quality. For websites, that translates directly into faster page loads, better Core Web Vitals scores, and lower bandwidth costs. Every major browser supports WebP — Chrome, Firefox, Safari, Edge, and all Chromium-based browsers.

This guide covers three methods for converting JPG to WebP: a zero-install browser tool, Google's official cwebp CLI, and the Sharp library for Node.js build pipelines. Pick the one that fits your workflow.

For a detailed comparison of when to use WebP vs other modern formats, see PNG vs WebP: When to Use Each Format and WebP vs AVIF: Which Is Better?.

Why Convert JPG to WebP?

JPG has been the standard web image format for decades. It does a good job compressing photographs, but WebP does it better — Google developed it specifically for web delivery, using more efficient compression algorithms (VP8-based for lossy, a custom algorithm for lossless).

Feature JPG (JPEG) WebP
Lossy compression Yes (DCT-based) Yes (VP8-based, ~30% smaller)
Lossless compression No Yes
Transparency No Yes (alpha channel)
Animation No Yes (like GIF but much smaller)
Browser support (2026) Universal 98%+ (all modern browsers)
Typical photo (4000×3000) 2.5-4 MB at quality 85 1.8-2.8 MB at quality 85
Metadata (EXIF) Full support Supported
HDR Limited Supported

When NOT to convert: If you're archiving photos for long-term storage, keep JPG — it's the most universally supported format. WebP's advantage is delivery size, not archival permanence. Also consider AVIF for even better compression if your target browsers support it.

For more on format selection, see Best Image Format for the Web.

Method 1 — Pixotter Online Converter (No Install)

Pixotter's JPG-to-WebP converter runs entirely in your browser using WebAssembly. Your images never leave your device.

Steps

  1. Open Pixotter's Convert tool.
  2. Drop your JPG images onto the page. Batch processing is supported — drop dozens at once.
  3. Set output format to WebP.
  4. Adjust quality if needed (default 80 works well for most web images).
  5. Click Convert and download your WebP files.

The conversion runs in milliseconds using libvips compiled to WebAssembly. Processing happens locally — no server upload, no file size cap, no account needed.

Best for: Quick conversions, non-technical users, and situations where you don't want to install anything. Works on any OS with a modern browser.

Method 2 — cwebp CLI (BSD 3-Clause)

cwebp is Google's official command-line WebP encoder, part of the libwebp package. It gives you precise control over quality, compression effort, and preprocessing. Licensed under BSD 3-Clause.

Install

Convert a Single File

cwebp -q 80 input.jpg -o output.webp

Lossless Conversion

cwebp -lossless input.jpg -o output.webp

Lossless WebP produces pixel-identical output. File sizes will be larger than lossy, but smaller than PNG. Useful when you need exact pixel fidelity (screenshots, diagrams, pixel art).

Fine-Tune Compression

cwebp -q 80 -m 6 -sharp_yuv -metadata all input.jpg -o output.webp

Batch Convert All JPGs in a Folder

for f in *.jpg; do
  cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

Check File Size Savings

for f in *.jpg; do
  webp="${f%.jpg}.webp"
  if [ -f "$webp" ]; then
    jpg_size=$(stat -f%z "$f" 2>/dev/null || stat --printf="%s" "$f")
    webp_size=$(stat -f%z "$webp" 2>/dev/null || stat --printf="%s" "$webp")
    savings=$(( (jpg_size - webp_size) * 100 / jpg_size ))
    echo "$f: $savings% smaller"
  fi
done

Best for: Developers who want command-line control, CI/CD integration, and maximum compression tuning.

Method 3 — Sharp for Node.js (Apache 2.0)

Sharp 0.33 is a high-performance Node.js image processing library built on libvips. It's the standard choice for server-side and build-pipeline image conversion in the JavaScript ecosystem. Licensed under Apache 2.0.

Install

npm install [email protected]

Convert a Single File

const sharp = require('sharp');

await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

Batch Convert With Quality Control

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images';
const outputDir = './images-webp';

fs.mkdirSync(outputDir, { recursive: true });

const files = fs.readdirSync(inputDir).filter(f => /\.jpe?g$/i.test(f));

for (const file of files) {
  await sharp(path.join(inputDir, file))
    .webp({ quality: 80, effort: 6 })
    .toFile(path.join(outputDir, file.replace(/\.jpe?g$/i, '.webp')));
  
  console.log(`Converted: ${file}`);
}

Build Pipeline Integration

Vite

Use vite-plugin-image-optimizer to automatically convert images during build:

// vite.config.js
import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    ViteImageOptimizer({
      jpg: { quality: 80 },
      webp: { quality: 80, effort: 6 }
    })
  ]
});

Next.js

Next.js 14+ handles WebP conversion automatically through its built-in Image component:

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={800}
    />
  );
}

Next.js serves WebP to browsers that support it via content negotiation. No manual conversion needed.

Webpack

Use image-minimizer-webpack-plugin with Sharp:

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              webp: { quality: 80 }
            }
          }
        }
      })
    ]
  }
};

Best for: Web developers integrating image optimization into their build pipeline. Sharp is fast, well-maintained, and handles high-throughput conversion.

JPG vs WebP — File Size and Quality Comparison

Real-world compression comparison for a 4000×3000 photograph:

Quality Setting JPG File Size WebP File Size WebP Savings
Low (q60) 580 KB 390 KB 33% smaller
Medium (q75) 920 KB 640 KB 30% smaller
Default (q80/85) 1.3 MB 880 KB 32% smaller
High (q90) 2.1 MB 1.5 MB 29% smaller
Very high (q95) 3.4 MB 2.5 MB 26% smaller

The savings are consistent across quality levels: WebP produces files roughly 25-35% smaller than equivalent-quality JPG. The visual difference between JPG quality 85 and WebP quality 80 is negligible for web delivery.

Browser Support for WebP (2026)

Browser WebP Support Since
Chrome 2014 (v23)
Firefox 2019 (v65)
Safari 2020 (v14, macOS Big Sur)
Edge 2018 (v18)
Opera 2014 (v12.1)
Samsung Internet 2016 (v4)
iOS Safari 2020 (iOS 14)

As of 2026, WebP support is 98%+ globally. The only browsers that don't support it are IE11 (end of life June 2022) and very old versions of Safari (pre-14). For these edge cases, serve JPG as a fallback using the <picture> element:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

FAQ

Is WebP better than JPG? For web delivery, yes. WebP produces 25-35% smaller files at equivalent visual quality, supports transparency and animation, and has near-universal browser support. For archival storage, JPG is more universally supported and has a longer track record. For more on format selection, see Best Image Format for the Web.

Does converting JPG to WebP lose quality? Lossy WebP conversion involves recompression, so there is a small generational loss. Converting JPG quality 85 to WebP quality 80 produces output that's visually indistinguishable from the JPG in virtually all cases. Use lossless WebP (-lossless flag in cwebp) if you need zero quality loss.

Should I convert all my website images to WebP? For photographs and complex images: yes, WebP is the clear winner over JPG for web delivery. For simple graphics, icons, and diagrams: consider SVG (vector) or PNG (lossless raster). For the newest devices and browsers, AVIF offers even better compression than WebP — see WebP vs AVIF.

Can I convert WebP back to JPG? Yes. See How to Convert WebP to JPG. Note that converting WebP→JPG→WebP causes multiple generations of lossy compression. Keep your original JPG sources and convert directly from those.

What WebP quality setting should I use? 80 for general web use. This matches JPG quality 85 visually while producing smaller files. Use 90+ for hero images and photography portfolios. Use 70-75 for thumbnails and background images where file size matters more than pixel-level quality.

Does WebP support EXIF metadata? Yes. WebP supports EXIF, IPTC, and XMP metadata. By default, cwebp strips metadata (saving bytes for web delivery). Use -metadata all to preserve it, or -metadata exif to preserve only EXIF data.

Is AVIF better than WebP? AVIF offers 20-30% better compression than WebP for photographs, but it encodes much slower and has lower browser support (93% vs 98%). Use WebP for broad compatibility, AVIF when your audience uses modern browsers. See WebP vs AVIF: Which Is Better? for the full comparison.

Also try: Compress Images