Recommended Free Tools
WebP can reduce the bytes your site transfers for images, but the savings depend on the image and encoding settings—and smaller files alone do not guarantee a faster page. Convert representative assets, inspect the results, serve WebP with a fallback where needed, and use responsive dimensions so visitors download only the pixels they need.
What WebP changes—and what it does not
WebP is a RIFF-based image format that supports lossy and lossless compression, transparency, and animation, as specified in RFC 9649. It can replace common JPEG, PNG, and some GIF use cases, but it does not automatically optimize an entire page.
As an Amazon Associate I earn from qualifying purchases.
Google reports that lossy WebP files were 25–34% smaller than comparable JPEG files at equivalent SSIM quality, and lossless WebP files were 26% smaller than PNG files. These are reported comparisons, not guaranteed savings for every image. The actual result depends on the source, image content, encoder settings, and acceptable visual quality. See Google’s WebP overview.
Fewer transferred image bytes can reduce image download time. They do not establish a specific improvement to total page-load time or Core Web Vitals: scripts, fonts, server response, layout, and other resources also contribute.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the images and compression mode
Start with images that matter
Use your analytics or a performance audit to identify large images that are requested often or are important to the page, such as a hero image or product photography. There is no universal priority list; optimize the assets that contribute most to your pages and audience experience.
Use lossy WebP for photographs when the visual trade-off is acceptable
Lossy encoding can substantially reduce bytes, but it changes image data. Compare the output at its actual display size and look for artifacts in fine details, gradients, faces, and textures. Do not choose an encoder quality setting solely because it produces the smallest file.
Use lossless WebP when preserving source pixels matters
Lossless encoding preserves the source pixels while changing the encoding. It is a candidate for graphics or images where exact pixel preservation matters; compare file sizes rather than assuming it will always beat the original PNG.
WebP supports transparency and animation, but format support does not make every conversion appropriate. Check transparent edges against the intended background, and verify animated output in the browsers and workflows that will consume it.
Convert images with Google’s cwebp
Google documents the cwebp encoder and dwebp decoder on its WebP tools page. Install the WebP utilities using the instructions for your operating system, then convert an input file and inspect the result.
Convert one image
For a lossy conversion, run:
cwebp -q 80 photo.jpg -o photo.webpThe -q value controls lossy quality; 80 is an example starting point, not a universally correct setting. Try multiple settings on representative images, then inspect both appearance and byte size. For lossless conversion, use:
cwebp -lossless graphic.png -o graphic.webpCheck the installed tool’s help or Google’s documentation for options available in your version, especially when you need to control encoding behavior for animation or other specialized inputs.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Compare the output
On macOS or Linux, compare file sizes with ls -lh photo.jpg photo.webp; on Windows PowerShell, use Get-Item photo.jpg, photo.webp | Select-Object Name, Length. Open the WebP file in a browser or image viewer and inspect it at its intended display size. Keep the original source so you can regenerate the WebP at another size or quality without repeated lossy conversions.
Rank #3
For a repeated workflow, automate conversion in your build, publishing pipeline, CMS, or image service rather than relying on error-prone manual steps. Preserve source assets and test the generated variants before replacing production URLs.
Serve WebP with a fallback
Use picture markup for an explicit browser fallback
The browser selects the first supported source in a <picture> element. The nested <img> remains the fallback for clients that do not use the WebP source:
<picture>
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="A description of the image">
</picture>Use meaningful alternative text when the image conveys information; use an empty alt value for a purely decorative image. Keep both files available and test that each URL returns the expected image and content type.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesConsider server or CDN content negotiation
Google’s WebP FAQ describes serving WebP based on a client’s Accept request header. A server or CDN can select a supported format and return the appropriate representation. This can avoid maintaining format selection in every page’s markup, but it depends on correct server configuration and cache behavior. If a cache stores multiple negotiated formats, configure it to distinguish responses by the relevant request header. Test WebP-capable and fallback requests rather than assuming negotiation is working.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Directly using a .webp URL is simplest when your audience and downstream consumers reliably support WebP. A fallback remains useful for older or unusual clients, tooling that cannot process WebP, and images used outside your browser delivery path. Google’s overview lists native support in Chrome, Safari, Firefox, Edge, and Opera; historical minimum-version numbers can become stale, so verify current compatibility data for your actual audience instead of relying on an old version chart.
Serve responsive dimensions as well as WebP
A compact file can still waste bandwidth if it contains far more pixels than the visitor’s display needs. Google’s guidance on serving responsive images explains how to offer appropriate image dimensions. A representative pattern is:
<picture>
<source
type="image/webp"
srcset="/images/product-480.webp 480w, /images/product-960.webp 960w, /images/product-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, 50vw">
<img
src="/images/product-960.jpg"
srcset="/images/product-480.jpg 480w, /images/product-960.jpg 960w, /images/product-1440.jpg 1440w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A description of the product">
</picture>Generate dimensions that suit your layout and display density; the example widths are illustrative, not a prescription. Keep the WebP and fallback candidates aligned so a browser selecting a fallback does not receive a needlessly oversized image. Responsive variants require more generated files and markup or image-service configuration, but can avoid sending excess pixels.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallFor related implementation guidance on image downloads and modern formats, see web.dev’s image performance guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Measure the result on your site
- Record a baseline. Measure representative pages under the mobile and desktop conditions relevant to your audience. Note image transfer sizes and page-level performance separately.
- Convert a representative batch. Include the image types and content you actually use, not just one easy-to-compress sample.
- Review quality and bytes. Compare each WebP against its actual JPEG or PNG source at a visually acceptable quality. Reject conversions that create visible defects, even if they save more bytes.
- Deploy a fallback or negotiation path. Verify both WebP and fallback delivery, including content types and cache behavior where negotiation is used.
- Test responsive selection. Inspect the requested image dimensions at mobile and desktop viewport sizes and confirm the browser does not download an unnecessarily large candidate.
- Re-measure the same pages. Compare image bytes and page performance under comparable conditions. Attribute any change carefully; image format is one part of page performance, not a guaranteed Core Web Vitals improvement.
Troubleshooting common WebP problems
- The WebP file is not smaller. Some images do not compress better under your chosen settings. Compare against the real source, test an alternative mode or quality, and keep the original when conversion offers no worthwhile benefit.
- The image looks worse. Lossy compression may introduce visible artifacts. Raise the quality setting or use lossless encoding where appropriate, then compare the result at the rendered size.
- The browser shows a broken image. Check that the generated file exists at the URL in
srcsetorsrc, that the server returns the correct image response, and that your fallback path works. Test the direct URL as well as the page markup. - WebP appears to work for some visitors but not others. Check the
<picture>fallback or server negotiation path. Verify the client’s accepted formats and that any intermediary cache does not serve the wrong negotiated representation. - The page still feels slow. Confirm that visitors receive appropriately sized variants and compare actual image transfer bytes. If those improved but the page did not, other resources or rendering work may be limiting the experience.
- Transparent edges look wrong. Inspect the image against its real background and choose an encoding mode and settings that preserve the edge quality needed by the design.
Or skip the browser setup
If your immediate task is capturing a page as an image or PDF rather than changing how your own site serves images, ScreenshotNeo provides a website screenshot API and MCP server. A single request can capture a URL; consult the ScreenshotNeo API documentation for options and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response includes X-Page-Verdict and X-Billed headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up free for 1,000 screenshots a month, with no card required.
Frequently Asked Questions
Does converting an image to WebP automatically improve Core Web Vitals?
No. WebP can reduce image bytes, but the effect on Core Web Vitals depends on the page and its other performance factors.
Can WebP replace both JPEG and PNG?
WebP supports lossy and lossless compression and transparency, but whether it is a suitable replacement depends on visual requirements, compatibility, and how the image is consumed.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
