How to Convert Images to WebP for Faster Websites
WebP delivers 25–34% smaller images than JPG at the same visual quality. This guide shows exactly how to convert, when to use WebP, and how to serve it with JPG fallback.
- Difficulty
- Intermediate
- Time
- 15 min
Last updated
FixFile.online Team
The FixFile.online editorial team — file format specialists, developers, and technical writers focused on practical file-fixing solutions.
How to Convert Images to WebP for Faster Websites
WebP is an image format developed by Google that delivers:
- 25–34% smaller than JPEG at equivalent visual quality
- 26% smaller than PNG for lossless content
- Full transparency support (unlike JPEG)
- Animation support (unlike JPEG)
- 97%+ global browser support as of 2024
Switching to WebP is the single highest-return image optimisation available for most websites.
Advertisement
Step 1: Convert Your Images to WebP
- Open WebP Converter
- Upload your JPG, PNG, or GIF image
- Set quality to 85 — this is the recommended sweet spot
- Download your WebP file
Quality guide:
| Quality | File Size | Use Case |
|---|---|---|
| 90 | Larger | Photography portfolios, editorial |
| 85 | Medium | General web use (recommended) |
| 75 | Smaller | Thumbnails, background images |
| 60 | Smallest | Low-priority decorative images |
Step 2: Verify the Output
Before replacing your original images:
- Open the WebP in Chrome (drag onto a tab)
- Compare visually with the original at 100% zoom
- Check file size — confirm the reduction is what you expected
- For images with transparency, verify the transparency is preserved
Step 3: Serve WebP With a JPG Fallback
WebP is not supported in very old browsers or some email clients. The standard HTML pattern uses <picture> to serve WebP with a fallback:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
Browsers that support WebP use the <source>; others fall back to the <img> JPG automatically.
Step 4: Update Your CMS or Server
WordPress: Install the "Converter for Media" or "ShortPixel" plugin — they convert on upload and serve WebP automatically.
Next.js: The <Image> component from next/image converts to WebP automatically. No manual steps needed.
Nginx: Add a WebP rewrite rule to serve pre-converted WebP files to supporting browsers while serving JPG to others.
Shopify: Themes using Shopify CDN serve WebP automatically — no action needed.
Step 5: Measure the Impact
After deploying WebP images:
- Run a PageSpeed Insights test before and after
- Check the "Serve images in next-gen formats" audit — it should now pass or show significant improvement
- Compare total page weight in the Network tab of Chrome DevTools
Typical outcome: 20–40% reduction in total image payload, resulting in 1–3 second faster load times on mobile connections.
When Not to Use WebP
- Email attachments — Outlook and Apple Mail do not display WebP inline; use JPG
- Very old CMS or hosting — some platforms cannot serve the
image/webpMIME type correctly - Image archival — keep original PNG/JPG masters for editing; WebP as delivery format only
Frequently asked questions
WebP produces images 25–35% smaller than JPG and 50–60% smaller than PNG at equivalent visual quality. Smaller images mean faster page loads, lower bandwidth costs, and better Core Web Vitals scores — all of which directly affect Google search ranking and user experience. Modern browsers (Chrome, Firefox, Safari 14+, Edge) all support WebP natively.
Only if you choose lossy compression and a low quality setting. At quality 80–85%, WebP is visually indistinguishable from the original JPG or PNG for most images. WebP also supports lossless compression (identical to the original at a smaller file size) and transparency (like PNG). Use lossy for photographs, lossless for screenshots and graphics with flat colours.
Use the HTML <picture> element with a JPG/PNG fallback: <picture><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="..."></picture>. Browsers that don't support WebP skip the <source> tag and load the JPG fallback. Internet Explorer is the main non-supporting browser; all other major browsers have supported WebP since 2021.
Learn more
- What Is HEIC and Should You Convert It to JPEG?
HEIC is the photo format iPhones use by default. It is technically superior to JPEG but has compatibility problems on Windows and older apps.
- Best Image Format for Print (TIFF, PSD, JPEG, or PNG?)
Sending the wrong image format to a printer causes blurry, colour-shifted, or rejected files. Here is exactly which format to use and why.
- How to Convert Multiple Images at Once (Batch Conversion Guide)
Converting one image at a time is practical for occasional tasks. When you have dozens or hundreds of images to convert, you need a batch workflow. This guide covers the most efficient approaches.
- What Is WebP? Why Google Created It and When to Use It
WebP is Google's open-source image format that outperforms both JPG and PNG. This guide explains how it works, why it matters for web performance, and where it falls short.
- JPG vs PNG vs WebP: Which Image Format Should You Choose?
The three dominant image formats each have a specific purpose. Choosing the wrong one either wastes storage or permanently destroys quality. This guide tells you exactly which to use and when.