How to Convert Images to WebP Without Losing Quality

October 17, 2026 • NOFYI Editorial Team

Images often make a web page slow, not because the page has too many words, but because the image files are larger than they need to be. A photo that looks fine on screen can still carry far more data than a visitor will ever see. Converting images to WebP is one practical way to reduce that waste. WebP is a modern image format that can produce smaller files than JPEG or PNG for many photos and graphics, while keeping the image looking close to the original. The key is to convert with care, compare the result, and keep a fallback for browsers that cannot display WebP.

This guide explains what WebP does, how to choose a quality setting, and how to convert step by step without losing visible quality. It includes a worked example, a simple fallback approach for older browsers, and the limits of conversion. You do not need to accept a blurry image to get a smaller file, and you do not need to convert every image on a site to see a benefit. A thoughtful approach, applied to the largest images first, usually gives the best return for the least risk.

What WebP Is and Why File Size Matters

WebP is an image format developed for the web. It supports lossy compression, which discards some image data to make a smaller file, and lossless compression, which keeps all the data while still trying to reduce size. It also supports transparency, which means it can replace PNG in many cases where an image needs a transparent background. For photographs, lossy WebP is the most common choice, because photos already contain a great deal of detail that the human eye does not notice at normal viewing sizes.

File size matters because every byte must travel from a server to a visitor’s device. A large image can delay the moment when a page becomes usable, especially on a slow connection or a mobile phone. It can also use more of a visitor’s data allowance. A smaller file that looks the same is therefore a direct improvement. It is not about chasing the smallest possible number at any cost. It is about removing data that does not change what a person sees.

It also matters that quality is not only a number. Two images at the same quality setting can look different depending on the subject, the original file, and the converter used. A portrait with smooth skin may tolerate more compression than a detailed landscape with fine leaves. A graphic with sharp text may show artefacts sooner than a soft photo. That is why testing with your own images matters more than copying a setting from a tutorial without checking the result.

Choose a Quality Setting First

For most photographs, a quality setting of 80 to 85 is a good starting point for WebP. At that range, many images look very close to the original when viewed at normal size, while the file size drops substantially. A setting below about 70 often starts to show visible problems in smooth areas, such as banding in skies or blocky patches in shadows. A setting above about 90 often produces a much larger file for a difference that is hard to see without zooming in closely.

Think of quality as a trade-off, not a score to maximise. The goal is the lowest file size that still looks clean to a normal viewer. A useful habit is to export the same image at two or three settings, for example 75, 82, and 90, and compare them side by side at the size they will be displayed. If 82 looks the same as 90, choose 82 and keep the saving. If 75 shows banding in a sky, move up. Keep notes for your own site, because the best setting for a photo gallery may differ from the best setting for a small thumbnail.

For images that need transparency or very sharp edges, such as logos, icons, or diagrams, lossless WebP or a carefully chosen PNG may be better. Lossy compression can blur sharp edges and create a halo around text. If an image is mainly flat colours and crisp lines, test lossless WebP and compare its size with PNG. Sometimes WebP still wins. Sometimes PNG remains the simpler choice. The decision should follow the test, not the format name.

How to Convert Images to WebP

Start with the original image, not a copy that has already been compressed many times. Each round of lossy compression can add new artefacts, so working from the best available source gives the cleanest result. Save the original in a safe folder, and treat the WebP file as an exported version. If you later need a different size or quality, you can return to the original rather than converting a converted file again.

Next, resize before you convert when the image is larger than it will be displayed. An image that will be shown at 1200 pixels wide does not need to be 4000 pixels wide. Resizing first reduces the file size and makes the quality comparison fair. If you are unsure of the display size, check the layout of your page or choose a reasonable maximum for your site. Avoid enlarging a small image during this step, because that adds no real detail.

Then convert using a reputable tool. Many image editors, command-line tools, and online converters can export WebP. In an editor, choose Export or Save As, select WebP, and set the quality to 80 to 85 for a photograph. In a command-line tool, you will usually set the quality with a number and the input and output filenames. Whichever tool you use, keep the same workflow: original in, WebP out, original preserved.

After conversion, compare the original and the WebP at the display size. Look at faces, skin, skies, text, and edges. Zoom to 100 percent, not 400 percent, because visitors will not study the image at extreme magnification. Also check the file size. If the saving is small and the quality looks worse, try a slightly higher quality or keep the original format. If the saving is large and the image looks the same, the conversion has done its job.

Finally, replace the image on the page carefully. Update the image reference so the page loads the WebP file, and keep the original file available if you use a fallback. Test the page in a browser, on a phone, and on a slower connection if possible. Check that the image still loads, that the layout has not shifted, and that any alt text remains correct. A conversion is only finished when the live page works as well as it did before.

Worked Example: A JPG Photo at 500KB Becomes About 150KB

Imagine a blog post with a photograph saved as a JPG. The JPG is 1600 pixels wide and 500KB in size. At that size, it looks clean, but it is one of the largest files on the page. You want a smaller file without a visible loss of quality. You start with the original photo, resize it to the display width of 1200 pixels if the page shows it at that width, and export it as WebP at quality 82.

The resulting WebP file is about 150KB. That is roughly a 70 percent reduction from the original 500KB JPG. In other words, the WebP file is less than one third of the size of the JPG. You compare the two images side by side at the display size. The faces look the same, the colours look the same, and the background detail looks the same. When you zoom in closely, you might see a very small difference in a fine texture, but at normal viewing distance there is no practical loss.

This example is illustrative, not a promise. Your result will depend on the photo, the original JPG quality, the display size, and the converter. A detailed photo with a lot of texture may compress less, perhaps from 500KB to 220KB. A simpler photo with large smooth areas may compress more, perhaps to 110KB. The point is the method: choose a sensible quality, compare at display size, and measure the saving. If the saving is large and the image looks clean, keep the WebP. If not, adjust the quality or keep the original.

It also helps to record the before and after sizes for your own site. A simple note such as original JPG 500KB, WebP at quality 82 about 150KB, visual check passed, gives you a record you can reuse. Over time, you will learn which kinds of images on your site compress well and which ones need a higher quality setting. That experience is more useful than any single example.

Provide a Fallback for Older Browsers

Most modern browsers support WebP, but some older browsers do not. A fallback means the browser can use a JPG or PNG when it cannot display WebP. Without a fallback, a visitor on an older browser might see a broken image. With a fallback, the same page works for everyone, and modern browsers still get the smaller WebP file.

One common approach is the HTML picture element. It lets you list a WebP source first and a JPG or PNG source as a fallback. The browser picks the first format it supports. Another approach is to let your website platform, content delivery network, or image service handle the choice automatically. Some platforms serve WebP to browsers that support it and another format to browsers that do not, without you writing extra markup. Check what your platform already does before adding a manual fallback, so you do not duplicate work.

Whichever approach you use, test it. Test in a modern browser to confirm the WebP loads. If you can, test in an older browser or use a tool that simulates one, to confirm the fallback loads. Also check that the fallback file still exists on the server. A fallback that points to a deleted JPG is worse than no fallback at all. Keep both files until you are sure the fallback is no longer needed.

Do Not Convert Tiny Images

Tiny images, such as small icons, avatars, or decorative dots, often gain little from conversion. The file size saving may be only a few kilobytes, while the work of converting, testing, and maintaining a fallback can be larger. For very small images, the original format may already be small enough, and the risk of introducing a visible artefact can outweigh the benefit.

A practical rule is to focus on the largest images first. Sort your images by file size, or check which images load on your most visited pages, and convert those. If a tiny image is used many times on every page, it may still be worth converting, but test it carefully. If the saving is tiny and the image is already fast, leave it alone. Conversion is a tool for solving a real size problem, not a task to apply to every file without thinking.

Limitations

WebP cannot restore detail that was lost in an earlier compression. If the original JPG was already heavily compressed, converting it to WebP will not make it sharper. It can only preserve, or slightly reduce, the quality of the source. WebP also cannot fix a blurry, poorly exposed, or badly cropped photo. It is a delivery format, not an image repair tool.

WebP also adds a small amount of complexity. You may need to keep two files, test a fallback, and update your workflow. Some older tools, email clients, or social platforms may not handle WebP as well as JPG or PNG. If an image will be shared widely outside your website, check whether the destination supports WebP. For a website image, WebP is usually a good choice. For a file you send to many different systems, a JPG or PNG may still be the safer universal option.

Frequently Asked Questions

What quality should I use for WebP photos?

For most photos, start at quality 80 to 85 and compare the result with the original at display size. If the image looks clean, keep that setting. If you see banding or blocky patches, raise the quality. If the image looks the same as a higher quality version, keep the lower quality and the smaller file.

Will converting to WebP always make the file smaller?

Usually, but not always. A very small image, a simple graphic, or an image that is already well compressed may not shrink much. In some cases, a lossless WebP can be larger than a well optimised PNG. Always measure the before and after sizes and keep the version that is genuinely smaller and clean.

Do I need a fallback for WebP?

For a public website, a fallback is a sensible precaution for older browsers. Most modern browsers support WebP, but a fallback ensures that no visitor sees a broken image. Use the picture element, or rely on your platform or image service if it already serves a fallback automatically.

Can I convert a WebP back to JPG without losing quality?

You can convert a WebP to JPG, but if the WebP was lossy, the detail lost in the first conversion will not return. That is why you should keep the original file. Convert from the original whenever you need a new format, rather than converting a converted file again.

Converting to WebP is worth doing when it is done carefully. Start from the original, resize to the display size, choose quality 80 to 85 for photos, compare at normal viewing size, and provide a fallback. Focus on the largest images first, and do not convert tiny images for a negligible saving. With that habit, your pages can load faster while your images still look as good as they should.