How to Convert Images to WebP for Better Web Performance

Why Convert to WebP?

WebP was designed specifically for the web. Google's own data shows that WebP images are on average 25–34% smaller than comparable JPEG files and 26% smaller than PNG files, all at equivalent visual quality.

That translates directly into faster page loads, lower bandwidth costs, and better Core Web Vitals scores. For a page with ten images, switching to WebP could save a megabyte or more per page view.

---

Browser Support in 2025

WebP is supported by:

• Chrome 17+ (2012)
• Firefox 65+ (2019)
• Safari 14+ (2020)
• Edge 18+
• All modern mobile browsers

According to caniuse.com, global WebP support exceeds 96% as of 2025. In practice, the only users who won't see WebP are those on very old devices — a negligible edge case for most websites.

---

Converting with FreeTinyImage

The Convert tool handles JPEG → WebP, PNG → WebP, and all other format combinations:

1. Go to the Convert page.
2. Drop your image onto the upload area (JPEG, PNG, GIF, or AVIF accepted).
3. Choose WebP from the format selector.
4. Set quality — 80 is recommended for photographs, 90 for images with text or sharp edges.
5. Click Convert & Download.

Your file is converted server-side using the industry-standard sharp library, which is based on libvips. The result is a properly encoded WebP file with accurate colour profiles.

---

Choosing the Right Quality Setting

WebP quality works on a 1–100 scale, similar to JPEG:

Quality	Result
90–100	Nearly lossless; use for product images requiring fine detail
75–85	Excellent for most photos; typical savings of 30–40% vs original JPEG
60–75	Good for thumbnails and background images
Below 60	Noticeable quality loss; rarely recommended

A key advantage of WebP: its compression is generally more efficient than JPEG at any given quality number, meaning WebP at quality 80 looks comparable to JPEG at quality 90 but at a smaller file size.

---

Serving WebP on Your Website

Once you have WebP files, there are several ways to serve them:

HTML picture element (recommended)

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

This serves WebP to supporting browsers and falls back to JPEG for older ones.

Next.js (automatic)

Next.js automatically converts and serves WebP (or AVIF) when you use the built-in <Image> component — no manual conversion needed for new projects.

Nginx

location ~* .jpg$ {
  add_header Vary Accept;
  try_files $uri.webp $uri =404;
}

This serves a pre-generated .webp file when the browser sends Accept: image/webp.

WordPress

The Imagify or ShortPixel plugins convert and serve WebP automatically. No code changes required.

---

Batch Converting a Folder

If you have a large number of images to convert, the most efficient approach is a command-line tool. With sharp installed via npm:

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

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

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

fs.readdirSync(inputDir)
  .filter(f => /\.(jpe?g|png)$/i.test(f))
  .forEach(file => {
    const name = path.parse(file).name
    sharp(path.join(inputDir, file))
      .webp({ quality: 80 })
      .toFile(path.join(outputDir, name + '.webp'))
  })

---

Frequently Asked Questions

Will converting to WebP affect my image quality? At quality 80+, the difference is imperceptible to the human eye. Always do a final side-by-side comparison at 100% zoom.

Should I delete my original JPEG/PNG files? Keep the originals. WebP support, while wide, isn't universal, and you may need originals for print, social sharing, or future format conversions.

Does WebP support transparent backgrounds? Yes. WebP supports full alpha-channel transparency, just like PNG. When converting a PNG with a transparent background, the transparency is preserved in the WebP output.

Is AVIF better than WebP? AVIF offers even better compression (typically 40–50% smaller than JPEG) but encodes more slowly and has slightly lower browser support. For most sites in 2025, WebP remains the safer choice.