Images make a website more attractive, but large files can slow pages down. This is especially noticeable on mobile devices and slow connections.
One way to optimize graphics is to use the WebP format. This article explains what it is, how to convert JPG and PNG to WebP, and how to avoid losing more quality than necessary.
What is WebP?
WebP is an image format designed for efficient storage of graphics on the web. It supports lossy and lossless compression, as well as transparency.
Depending on the image, the settings and the source format, WebP can produce a smaller file than JPG or PNG. The result is not always the same, though: complex photos, simple illustrations and images with a transparent background compress differently.
Why convert images to WebP?
Converting images can help in several situations:
- Websites and blogs. Smaller files can reduce the amount of data a visitor has to download.
- Online stores. Optimizing product photos helps reduce page weight.
- Mobile users. Smaller images need less data.
- Publications and portfolios. Optimized graphics take up less disk space.
The WebP format alone does not guarantee a fast site. Speed also depends on image dimensions in pixels, caching, page code and server speed.
How to convert JPG or PNG to WebP
Step 1. Choose an image
Find the file you want to optimize. It can be a JPG photo, a PNG illustration or another supported image.
Keep the original in case you need it for further editing.
Step 2. Open an image converter
Use the KiwiLab Image Converter if the format you need is among the supported ones.
Choose a file on your device and check that its format was detected correctly.
Step 3. Choose WebP
If the converter supports WebP, set it as the output format. If there is a quality setting, start with a medium or high value and then compare the result with the original.
For photos you can try lossy compression. For graphics with transparency or sharp edges, check that the details you need are preserved.
Step 4. Download the result
Save the converted file and compare its size with the original.
For example, if the original image was 800 KB and the new one is 300 KB, the file got 62.5% smaller. This is only an example calculation, not a guaranteed result.
Step 5. Check the quality
Zoom in and check fine details, outlines, text and color gradients. If visible artifacts appear, convert again with a higher quality setting.
How to make an image even smaller
The format is only one way to optimize.
Reduce the resolution. If the image will be shown in a 600-pixel-wide block, a 4000-pixel original may be more than you need.
Choose the format by image type. For photos, WebP or JPEG often work well. For graphics with transparency you can use PNG or WebP. For logos and icons, consider SVG if it suits the image.
Do not compress repeatedly. Re-saving a photo with lossy compression again and again can degrade its quality.
Check the mobile view. Do not load full-size graphics on a phone if the page can show an optimized version of the right size.
Is WebP always better than JPG and PNG?
No. The choice depends on what the image is for.
| Image type | What to consider |
|---|---|
| Photo | WebP or JPEG |
| Illustration with transparency | WebP or PNG |
| Logo with sharp lines | SVG or a suitable raster format |
| Graphics for further editing | Keep the original in the working format |
Also consider compatibility with the programs and systems where you plan to use the file.
Image optimization checklist
Tick the steps you have done: the summary shows what is left before you publish.
Conclusion
WebP can help reduce image size for websites without a noticeable loss of quality. For the best result, choose a suitable format, check the compression settings and compare the finished file with the original.
More useful file tools are available in the KiwiLab tool catalog.