How to Use WebP Instead of JPG on Websites
Images are the largest part of most web pages. Replacing JPG with WebP is one of the highest-impact changes you can make to page speed — and it takes minutes to start.
Why images dominate page weight
On a typical webpage, images account for 50–70% of total transferred bytes. The HTTP Archive's Web Almanac consistently shows images as the largest resource type on most pages. A photography blog or e-commerce product page can easily have 5–20MB of images before any optimization.
Google's Lighthouse audit “Serve images in next-gen formats” flags this directly. When you still serve JPG, Lighthouse estimates the savings from switching to WebP and marks it as an opportunity. On image-heavy pages, this is often the single largest improvement available.
The actual file size difference
Google's WebP study showed WebP is 25–34% smaller than JPEG at equivalent visual quality. A 400KB product photo becomes roughly 265–300KB as WebP. For a page with 15 product images, that is 1.5–2MB saved per page load — which meaningfully reduces time to load on mobile and slower connections.
Converting your JPGs to WebP
For one-off conversions, the JPG to WebP converter on this page handles it in seconds. Drop the file, set quality to 85%, download. For bulk conversions across a whole site:
- WordPress: plugins like Imagify, ShortPixel, or WebP Express convert and serve WebP automatically
- Cloudflare: Polish feature converts and caches WebP at the CDN level with no code changes
- Command line: Google's
cwebptool:cwebp -q 85 input.jpg -o output.webp - Next.js / Astro: built-in image optimization serves WebP automatically via the
Imagecomponent
Serving WebP with a JPG fallback
WebP support is above 95% globally, but if you need to cover the remaining browsers, the <picture> element handles it cleanly:
<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Description" width="800" height="600"> </picture>
Modern browsers load the WebP. Browsers without WebP support fall back to the JPG. No JavaScript, no server-side logic needed.
What quality to use
Quality 85% is the standard recommendation for most web images. At this setting, the visual difference from the original is imperceptible to most viewers while file sizes are 30–40% smaller. For hero images where you want pixel-perfect quality, use 90%. For thumbnails and small previews, 75–80% is fine.
Convert JPG to WebP free
Drop your JPG, set quality to 85%, download a smaller WebP. Runs in your browser.
Use JPG to WebP Converter →Frequently asked questions
Does replacing JPG with WebP improve page speed?
Yes. WebP files are 25–34% smaller than JPEG at equivalent quality. Smaller images transfer faster, which reduces Time to First Byte for images, improves Largest Contentful Paint (LCP), and lowers total page weight. On image-heavy pages, switching to WebP can reduce total image payload by hundreds of kilobytes to several megabytes.
Will WebP affect my Google rankings?
Indirectly, yes. Google uses Core Web Vitals as a ranking factor, and LCP is heavily influenced by image load times. Switching to WebP improves LCP on pages where images are the largest contentful element. Google Lighthouse also specifically flags non-WebP images as an improvement opportunity.
What if some users have browsers that don't support WebP?
WebP browser support is above 95% globally. For the remaining browsers, you can use the HTML picture element to serve WebP to supported browsers and fall back to JPG for others: <picture><source srcset='image.webp' type='image/webp'><img src='image.jpg' alt='...'></picture>. Most CDNs and image services also handle this automatically.
How do I convert my existing JPG images to WebP?
For individual images, use the JPG to WebP converter on this page — drop the file, set quality (85% is recommended), download the WebP. For bulk conversion of a website, tools like Squoosh CLI, ImageMagick, or cwebp (Google's command-line tool) can process entire directories. Most modern CMS platforms including WordPress have WebP conversion plugins.
What quality setting should I use for WebP on websites?
Quality 80–85% is the standard recommendation for most web images. At this setting, the output is visually indistinguishable from the original for most viewers while achieving maximum file size savings. For hero images and photography where detail matters, use 85–90%. For thumbnails and previews, 70–80% is acceptable.
Do I need to rename my image files when switching to WebP?
Yes — WebP files use the .webp extension. You will need to update the src attributes in your HTML or templates to point to the new .webp files. If you use a CMS, the plugin or built-in WebP support usually handles this automatically. If using the picture element approach, you reference both files explicitly in the markup.