A practical guide to converting PNG files into smaller, faster WebP images with free browser, desktop, and command-line tools. Primary tag: Image Optimization Additional tags: WebP, Web Performance, Web Development, Ghost CMS Meta title: Convert PNG to WebP Free: 4 Easy Tools Meta description: Learn how to convert PNG images to WebP for free with Squoosh, XnConvert, cwebp, and ImageMagick, including batch commands and recommended settings. Feature image concept: A clean split-screen illustration showing a large PNG file becoming a smaller WebP file, with a browser window and speed indicator. Blue, white, and dark-gray technology palette. No company logos or text inside the image. Feature image alt text: PNG to WebP image conversion workflow using free optimization tools.
When I recently updated my portfolio website, I replaced several large PNG background images with WebP files. The goal was simple: keep the images looking sharp while reducing the amount of data visitors have to download.
That raised a practical question many website owners eventually run into: What is the easiest free way to convert PNG files to WebP?
The good news is that you do not need Photoshop, a paid optimization service, or a complicated build system. You can convert a single image in a browser, process an entire folder with a desktop app, or automate the job from the command line.
This guide covers four useful options:
- Squoosh for individual images
- XnConvert for visual batch processing
- Google's
cwebpfor a lightweight command-line workflow - ImageMagick for advanced conversion and automation
What is WebP?
WebP is a web-focused image format developed by Google. It supports both lossy and lossless compression, transparency, and animation.
Google reports that lossless WebP images are, on average, 26% smaller than comparable PNG files. Actual savings depend on the source image and the settings used, but the practical benefit is straightforward: smaller images can reduce page weight and improve loading speed.
WebP is supported by current versions of Chrome, Edge, Firefox, Safari, and Opera. It is a safe default for most modern websites.
PNG versus WebP
| Feature | PNG | WebP |
|---|---|---|
| Compression | Lossless | Lossy or lossless |
| Transparency | Yes | Yes |
| Typical website file size | Larger | Usually smaller |
| Best use | Source artwork, precise screenshots, archival copies | Website photos, backgrounds, thumbnails, and optimized graphics |
| Browser support | Universal | All major current browsers |
WebP does not automatically win in every situation. A small, flat graphic or screenshot may occasionally be smaller or clearer as a PNG. Always compare the exported file with the original before replacing it.
Important: Renamingimage.pngtoimage.webpdoes not convert the image. The file must be processed by an image encoder.
Quick recommendation
| If you need to... | Use... |
| Convert one or two images and compare quality visually | Squoosh |
| Convert a folder without using a terminal | XnConvert |
| Add conversion to a script or repeatable workflow | cwebp |
| Resize, rename, optimize, and convert images in bulk | ImageMagick |
For most people, I recommend starting with Squoosh. For ten or more images, XnConvert is usually faster. Developers and system administrators will probably prefer cwebp or ImageMagick.
Option 1: Squoosh — best for individual images
Squoosh is a free browser-based image optimizer. It provides a side-by-side preview, making it easy to see how compression affects image quality before downloading the result.
Squoosh processes images locally in the browser, so the files do not leave your device. That makes it a useful option for internal screenshots or other images you do not want to upload to a third-party conversion service.
How to convert a PNG with Squoosh
- Open squoosh.app.
- Drag your PNG file into the browser window.
- Open the compression format menu on the right.
- Select WebP.
- Start with a quality setting between 80 and 85.
- Use the comparison slider to inspect text, edges, gradients, and fine details.
- Resize the image if its pixel dimensions are larger than the website needs.
- Download the optimized
.webpfile.
Squoosh is especially helpful when visual quality matters more than processing speed. I use it when I want to tune a hero image or background individually.
Option 2: XnConvert — best visual batch converter
XnConvert is a cross-platform batch image converter for Windows, macOS, and Linux. It can convert, resize, crop, rename, and compress many images in one operation.
It is free for private, educational, and nonprofit use. XnView requires a license when it is used in a company, so business users should review its current licensing terms before deploying it as a workplace standard.
How to batch-convert PNG files with XnConvert
- Install and open XnConvert.
- Under Input, add the PNG files or an entire folder.
- Under Actions, add Resize if the source files are oversized.
- Open the Output tab.
- Select WebP as the output format.
- Open the format settings and set quality to approximately 82.
- Choose a separate output folder so the original PNG files remain untouched.
- Run the conversion.
One advantage of XnConvert is reusable presets. For example, you can save a preset for 1920-pixel website backgrounds and another for 1400-pixel blog images.
Option 3: Google cwebp — best lightweight command-line tool
Google provides an official encoder named cwebp. It accepts PNG, JPEG, TIFF, and other supported inputs and provides direct control over quality, resizing, metadata, and lossless output.
Install cwebp on macOS
With Homebrew installed, run:
brew install webpGoogle also provides precompiled WebP utilities for Windows, macOS, and Linux.
Convert one PNG file
cwebp -q 82 image.png -o image.webpThe -q option sets lossy quality from 0 to 100. Higher values retain more detail but produce larger files.
Convert an image and resize it
This example limits the output to 1920 pixels wide while preserving the aspect ratio:
cwebp -q 82 -resize 1920 0 image.png -o image.webpConvert every PNG in a folder
On macOS or Linux:
for file in *.png; do
cwebp -q 82 "$file" -o "${file%.png}.webp"
donePreserve exact image data with lossless WebP
For a logo, interface graphic, or screenshot with fine text, try lossless mode:
cwebp -lossless -q 100 interface.png -o interface.webpLossless output is not guaranteed to be smaller than every PNG. Compare the results before publishing.
Option 4: ImageMagick — best for advanced automation
ImageMagick is an open-source image-processing suite that supports more than 200 formats. It is useful when conversion is only one part of a larger workflow involving resizing, cropping, metadata removal, or automated folder processing.
Install ImageMagick on macOS
brew install imagemagickConvert one PNG to WebP
magick image.png -quality 82 image.webpBatch-convert PNG files into a separate folder
mkdir -p webp
magick mogrify -path webp -format webp -quality 82 *.pngThe original PNG files remain in place, and the converted files are written to the webp folder.
Resize and convert in one command
magick image.png -resize "1920x1920>" -strip -quality 82 image.webpThis command:
- Limits the image to 1920 pixels in either dimension
- Prevents smaller images from being enlarged
- Removes unnecessary metadata
- Exports the result at quality 82
ImageMagick offers many additional WebP encoding controls, but a resize plus a quality value is enough for most website work.
Recommended WebP settings for websites
There is no single setting that works for every image. These are practical starting points:
| Image type | Suggested maximum size | Starting mode or quality |
| Blog content image | 1400–1600px wide | Lossy, quality 80–82 |
| Full-width hero or background | 1920–2000px wide | Lossy, quality 80–85 |
| Photograph or illustration | Size it to its display area | Lossy, quality 78–85 |
| Screenshot with small text | Keep native display size | Quality 88–92 or lossless |
| Logo or transparent UI graphic | Use SVG when available | Lossless WebP or PNG |
Treat these as starting points, not fixed rules. A quality setting of 82 may look excellent for a photograph but soften small interface text in a screenshot.
For large website backgrounds, I generally aim for under 300–500 KB. For normal article images, I try to stay under 150–250 KB when the image can still look clean at the intended display size.
Using WebP images in Ghost CMS
Ghost image cards accept .WEBP files directly. According to the Ghost editor documentation, uploaded images are also optimized with lossless compression and made responsive for different device sizes.
That means you can:
- Convert and resize the source image before uploading.
- Add it with an Image card or drag it directly into the editor.
- Add descriptive alt text for accessibility and image search.
- Select the appropriate normal, wide, or full display width.
Ghost's automatic optimization is useful, but it is still worth preparing oversized source files before uploading. Doing so gives you control over the initial dimensions and compression quality while keeping your media library more manageable.
For a Ghost feature image, I normally start around 1600 to 2000 pixels wide, export at WebP quality 80 to 85, and verify that important content is not placed too close to the edges where a theme may crop it.
Final quality checklist
Before replacing a PNG on a live website, check the following:
- The WebP dimensions match the actual display requirement.
- Text, logos, and sharp edges remain clear at 100% zoom.
- Transparency still looks correct against the website background.
- The WebP file is meaningfully smaller than the PNG.
- The HTML or CSS points to the new
.webpfilename. - The browser successfully loads the image after deployment.
- The original high-quality PNG is preserved as a source file.
Which tool should you choose?
Use Squoosh when you want the easiest quality comparison for a few images. Use XnConvert when you want a visual interface for an entire folder. Choose cwebp for a focused, scriptable encoder, and choose ImageMagick when image conversion is part of a broader automated workflow.
For my own portfolio background images, a quality setting around 82 and a maximum width near 1920 pixels provides a useful balance between visual quality and download size. The exact result varies, so the most important step is still the simplest one: compare the optimized image with the original before publishing it.
Smaller images are not the only part of website performance, but they are one of the easiest improvements to make—and WebP gives you a practical way to make that improvement without sacrificing the look of your site.