How to Convert JPG to WebP to Speed Up Your Website

How to Convert JPG to WebP to Speed Up Your Website

WebP offers 25–35% smaller files than JPG at equal visual quality, making it one of the highest-impact performance optimizations you can implement. This guide covers conversion and correct implementation.

Why convert to WebP?

• 25–35% smaller files → lighter pages → lower LCP (Largest Contentful Paint)
• Near-universal support: Chrome, Firefox, Safari 14+, Edge, iOS 14+, Android 4.4+
• Google PageSpeed actively recommends WebP

Convert JPG to WebP — methods

Online

1. Go to KaijuConverter — JPG to WebP
2. Upload the JPG image
3. Adjust quality (80–90 for web)
4. Download the WebP

cwebp (Google's official tool)

# Install
brew install webp          # macOS
sudo apt install webp       # Ubuntu/Debian

# Convert JPG → WebP (quality 80 = good balance)
cwebp -q 80 photo.jpg -o photo.webp

# Higher quality (90)
cwebp -q 90 photo.jpg -o photo.webp

# PNG → lossless WebP
cwebp -lossless image.png -o image_lossless.webp

# Batch — all JPGs in the folder
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done

# Parallel processing (much faster)
ls *.jpg | parallel cwebp -q 85 {} -o {.}.webp

FFmpeg

# JPG → WebP
ffmpeg -i photo.jpg -c:v libwebp -quality 80 photo.webp

# PNG → lossless WebP
ffmpeg -i image.png -c:v libwebp -lossless 1 image.webp

# Batch at quality 85
for f in *.jpg; do ffmpeg -i "$f" -c:v libwebp -quality 85 "${f%.jpg}.webp"; done

Python + Pillow

from PIL import Image
import os

for filename in os.listdir('.'):
    if filename.lower().endswith(('.jpg', '.jpeg')):
        img = Image.open(filename)
        webp_name = os.path.splitext(filename)[0] + '.webp'
        img.save(webp_name, 'WEBP', quality=85, method=6)
        print(f"{filename} → {webp_name}")

Implementing WebP in HTML with fallback

<!-- <picture> element: browser picks the compatible format -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>

Older Safari (iOS 13 and earlier, Safari 13) doesn't support WebP. The <img> with JPG is the automatic fallback.

For CSS background images with WebP:

/* Using @supports */
.hero {
  background-image: url('background.jpg');
}

@supports (background-image: url('test.webp')) {
  .hero {
    background-image: url('background.webp');
  }
}

Configure Apache/Nginx to serve WebP automatically

If you have server access, Apache/Nginx can automatically serve WebP when the browser supports it — without changing your HTML:

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Nginx

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

location ~* ^/(.+)\.(png|jpe?g)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

Recommended quality by use case

With WebP correctly implemented, the image weight on your site can drop 30–40% with no perceptible visual quality change.