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:

  1. Squoosh for individual images
  2. XnConvert for visual batch processing
  3. Google's cwebp for a lightweight command-line workflow
  4. 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

FeaturePNGWebP
CompressionLosslessLossy or lossless
TransparencyYesYes
Typical website file sizeLargerUsually smaller
Best useSource artwork, precise screenshots, archival copiesWebsite photos, backgrounds, thumbnails, and optimized graphics
Browser supportUniversalAll 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: Renaming image.png to image.webp does 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 visuallySquoosh
Convert a folder without using a terminalXnConvert
Add conversion to a script or repeatable workflowcwebp
Resize, rename, optimize, and convert images in bulkImageMagick

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

  1. Open squoosh.app.
  2. Drag your PNG file into the browser window.
  3. Open the compression format menu on the right.
  4. Select WebP.
  5. Start with a quality setting between 80 and 85.
  6. Use the comparison slider to inspect text, edges, gradients, and fine details.
  7. Resize the image if its pixel dimensions are larger than the website needs.
  8. Download the optimized .webp file.

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

  1. Install and open XnConvert.
  2. Under Input, add the PNG files or an entire folder.
  3. Under Actions, add Resize if the source files are oversized.
  4. Open the Output tab.
  5. Select WebP as the output format.
  6. Open the format settings and set quality to approximately 82.
  7. Choose a separate output folder so the original PNG files remain untouched.
  8. 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 webp

Google also provides precompiled WebP utilities for Windows, macOS, and Linux.

Convert one PNG file

cwebp -q 82 image.png -o image.webp

The -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.webp

Convert every PNG in a folder

On macOS or Linux:

for file in *.png; do
  cwebp -q 82 "$file" -o "${file%.png}.webp"
done

Preserve 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.webp

Lossless 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 imagemagick

Convert one PNG to WebP

magick image.png -quality 82 image.webp

Batch-convert PNG files into a separate folder

mkdir -p webp
magick mogrify -path webp -format webp -quality 82 *.png

The 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.webp

This 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.

There is no single setting that works for every image. These are practical starting points:

Image typeSuggested maximum sizeStarting mode or quality
Blog content image1400–1600px wideLossy, quality 80–82
Full-width hero or background1920–2000px wideLossy, quality 80–85
Photograph or illustrationSize it to its display areaLossy, quality 78–85
Screenshot with small textKeep native display sizeQuality 88–92 or lossless
Logo or transparent UI graphicUse SVG when availableLossless 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:

  1. Convert and resize the source image before uploading.
  2. Add it with an Image card or drag it directly into the editor.
  3. Add descriptive alt text for accessibility and image search.
  4. 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 .webp filename.
  • 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.

Official resources