WebP can reduce image file sizes while preserving good visual quality, but there is no single setting that works perfectly for every image. A detailed photograph, a flat-color logo and a screenshot have very different compression needs.
The best result usually comes from choosing the right WebP mode first, then adjusting quality and dimensions for the image’s actual purpose. A picture used as a small website thumbnail can tolerate more compression than a product image displayed across a large page. A logo with transparency may need lossless compression, while a camera photo usually benefits from lossy compression.
This guide explains practical WebP recommended settings for common image types. It also covers image dimensions, transparency, metadata, quality testing and the decisions that affect loading speed.
How WebP compression works
WebP is an image format that supports both lossy and lossless compression. Compression reduces the amount of data stored in a file. Lossy compression removes some visual information to make the file smaller, while lossless compression preserves the original pixel information.
WebP can also store an alpha channel, which is the part of an image that controls transparency. This makes it suitable for logos, icons, cutout objects and other graphics that do not have a solid rectangular background.
When you convert an image to WebP, the most important choices are usually:
- Compression mode: lossy or lossless.
- Quality level: how strongly lossy compression is applied.
- Image dimensions: the width and height in pixels.
- Transparency: whether the image needs an alpha channel.
- Metadata: information such as camera details, location and color profiles.
A quality value is not a universal measure of visual quality. The same value can produce different results for a portrait, a textured landscape or a simple illustration. Treat quality numbers as starting points, not guarantees.
Recommended WebP settings at a glance
The table below gives practical starting points. The appropriate final setting depends on the original image, its display size and how much detail viewers need to see.
| Image type | Recommended mode | Starting quality | Important considerations |
|---|---|---|---|
| Photographs | Lossy | About 75 to 85 | Check faces, hair, foliage and fine textures for artifacts |
| Product photos | Lossy or near-lossless | About 80 to 90 | Use higher quality when small labels and edges matter |
| Illustrations with many colors | Lossy or lossless | About 80 to 90 | Inspect gradients, outlines and large color areas |
| Logos and icons | Lossless when exact edges matter | Not applicable for pure lossless output | Keep transparency and sharp boundaries intact |
| Screenshots | Lossless or high-quality lossy | About 85 to 95 | Text and interface lines can reveal compression quickly |
| Transparent graphics | Lossless or high-quality lossy | About 80 to 95 | Check halos around semi-transparent edges |
| Small thumbnails | Lossy | About 60 to 80 | Prioritize the final display size over the original size |
These ranges are not strict rules. A heavily textured image can remain acceptable at a lower value, while a simple graphic with text may require a higher value or lossless output.
Best WebP settings for photographs
Photographs are usually the easiest images to compress efficiently. They contain natural variations in color and texture, so moderate lossy compression often produces a much smaller file without an obvious change at normal viewing size.
As a starting point, try lossy WebP at a quality value around 75 to 85. Increase the value if the image contains fine hair, detailed foliage, fabric texture, reflections or small objects that must remain clear. Decrease it if the image is displayed as a small card, thumbnail or background where viewers will not inspect every detail.
Look closely at areas with smooth gradients, such as skies, walls and skin tones. Strong compression can create banding, block-like patterns or unnatural patches in these areas. Also inspect high-contrast edges, where halos may appear around people, buildings or text.
Do not use lossless compression automatically for photographs. It preserves every pixel, but the resulting file may be much larger than a visually similar lossy WebP. Lossless output is most useful when the original pixels must remain exact, such as during editing or archival workflows.
Recommended dimensions for photographs
Compression quality cannot compensate for unnecessary pixel dimensions. If an image is displayed at 800 pixels wide, uploading a 4,000-pixel version creates extra download and processing work. Resize the image close to its largest intended display size, while allowing for layouts that may show it slightly larger on high-density screens.
Keep the original file separately if you may need to crop or edit the photo later. The WebP version should be treated as a delivery copy for a website or application.
Best WebP settings for product images
Product images need a little more care than ordinary photographs. Shoppers may zoom in on packaging, labels, stitching, materials and small product features. A file that looks acceptable as a thumbnail may look poor on a product detail page.
Start with lossy WebP around quality 80 to 90. Use the lower part of this range when the image is shown at a moderate size and the background is simple. Use the higher part when fine text, sharp edges or surface texture influence the buying decision.
For products photographed against a plain background, inspect the outline carefully. Compression can create a faint halo or rough edge between the product and the background. If the product has transparent areas, such as glass or a mesh material, compare the WebP against the actual page background rather than viewing it only on white.
If exact color is important, use a suitable color-managed workflow and keep an original version with its color information. WebP conversion settings alone cannot correct a color mismatch caused by the source file, editing software or browser display.
Best WebP settings for logos, icons and illustrations
Logos and icons often contain flat colors, clean lines and text. These features are less forgiving than photographic detail. A small change along an edge can be more noticeable than a small change in a complex photo.
Use lossless WebP when the graphic has simple shapes, sharp lettering or brand colors that must remain exact. Lossless compression can still reduce the file size compared with an uncompressed image, although the result varies according to the source.
Lossy WebP can work well for large illustrations, decorative artwork and graphics with many colors. Start around quality 85 to 95 and inspect thin lines, diagonal edges and areas with one solid color. If the graphic contains text, lossless output is often the safer choice, especially when it will be displayed at a small size.
For icons and logos, create the image at the size or sizes actually used on the website. A tiny logo does not benefit from being exported at a very large resolution. However, high-density screens may require a larger source for a crisp display, so consider the layout and the intended rendering size.
Best WebP settings for screenshots
Screenshots combine text, interface lines, flat colors and sometimes photographic content. This mixture makes them more sensitive to compression than ordinary photos. Blurry letters and ringing around high-contrast edges can reduce their usefulness.
Use lossless WebP when the screenshot is a reference document, tutorial image or support instruction where every word must remain clear. If the screenshot is large and file size is a serious concern, try lossy WebP at about 85 to 95 and inspect it at the size readers will see on the page.
Do not judge a screenshot only by zooming in to its original dimensions. Also check whether text remains readable when the image is reduced in the article layout. If it is already difficult to read at the intended display size, increasing compression quality will not solve the problem. The screenshot may need to be cropped, resized differently or replaced with live text.
Best WebP settings for transparent images
Transparency is useful for logos, cutout products, stickers, interface elements and decorative graphics. The transparent area is stored through an alpha channel, which can contain fully transparent, fully opaque or partially transparent pixels.
For simple transparent graphics, lossless WebP is a reliable starting point. For larger images such as cutout photographs, high-quality lossy WebP may provide a better balance between file size and appearance. Begin around quality 80 to 95 and check the edges against both light and dark backgrounds.
Partially transparent edges can reveal a light or dark fringe after conversion. This is sometimes caused by the way the original image was prepared rather than by WebP itself. An object cut out against a white background may contain pale edge pixels that become visible when placed over a dark page.
Always test transparent images in their real design context. A preview on a checkerboard background is useful, but it does not show every problem that appears on a website.
Choosing a WebP quality level
Quality controls how much information lossy compression removes. A higher value generally preserves more detail and produces a larger file. A lower value generally creates a smaller file but increases the risk of visible artifacts.
Quality values are not directly comparable across every converter. Different tools may use different encoders, presets or processing methods. A value of 80 in one application may not produce exactly the same result as 80 in another application.
A practical workflow is to create several versions of the same image, such as a moderate-quality version and a high-quality version, then compare them at the final display size. Focus on the parts that matter to users, including faces, text, product edges, logos, gradients and transparency.
Choose the smallest version that still looks correct in context. There is little benefit in keeping quality extremely high when the visual difference is impossible to notice, but excessive compression can damage trust when an image looks blurred or distorted.
When to use lossless WebP
Lossless WebP is appropriate when pixel accuracy matters more than maximum compression. Common examples include:
- Logos with precise brand shapes and colors.
- Screenshots containing small text.
- Interface icons and diagrams.
- Images that will be edited or processed again.
- Graphics with hard edges and large flat-color areas.
- Transparent artwork where edge quality is critical.
Lossless does not mean that the file will always be smaller than every other format. The result depends on the image structure and the original format. It means that the WebP decoder can reproduce the stored image without the pixel changes associated with lossy compression.
Do dimensions matter more than quality?
Often, yes. An oversized image can remain heavy even with efficient compression. Resizing an image to its intended display dimensions removes pixels that the viewer will never see, while reducing quality only changes how the remaining pixels are represented.
Start by deciding where the image will appear and how large it needs to be. Then choose a WebP mode and quality level. This order prevents a common mistake: trying to solve an oversized image with increasingly aggressive compression.
Do not enlarge a small image simply to reach a target width. Upscaling can make edges soft and does not restore detail that was absent from the source.
Metadata and color information
Image metadata is extra information stored in a file, such as the camera model, capture date, GPS location, orientation and editing history. Metadata can be useful for personal archives, but most website images do not need all of it.
Removing unnecessary metadata can reduce file size and limit the exposure of private information, especially GPS location data from photographs. However, preserve information that is required by your workflow, such as orientation or a color profile, when applicable.
If colors look different after conversion, compare the source and WebP in the same browser or image viewer. Differences can come from color profiles, display settings, application behavior or the source image itself. Do not assume that changing the quality value will fix a color-management issue.
A simple workflow for converting images to WebP
- Keep the original file. Save the source separately before conversion.
- Identify the image type. Decide whether it is mainly a photo, graphic, screenshot or transparent asset.
- Set the dimensions. Resize it to suit the largest intended display size.
- Choose the compression mode. Use lossy for many photos and lossless when exact edges or text matter.
- Select a starting quality. Use the table as a practical starting point, not a fixed rule.
- Inspect the result. Check important details at the actual display size and at a closer zoom.
- Compare file size and appearance. Keep the smallest version that meets your visual requirements.
- Test the converted file in its destination. A page layout may expose issues that are not obvious in a standalone preview.
You can use the TopWebP image converter to create WebP files directly in your browser. The right settings still depend on the image, so review the output rather than relying on a preset without checking it.
Common WebP conversion mistakes
Using the same quality for every image
A single quality setting for an entire image library is convenient, but it may waste space on some files and damage others. Group images by type and importance, then create a few practical presets.
Compressing before resizing
Applying strong compression to an oversized image can produce a file that is still larger than necessary and less detailed than it should be. Resize first, then choose the compression level.
Using lossy compression for tiny text
Text, thin lines and flat color transitions can show artifacts quickly. Use lossless WebP or a higher-quality lossy setting when these elements must remain clear.
Ignoring transparency
An image may look fine against a white preview but show a fringe on the website. Test transparent graphics over the backgrounds where they will actually appear.
Judging only by file size
The smallest file is not always the best file. If important details are blurred, a modest reduction in size is not worth the visual loss. Compare both the file weight and the rendered appearance.
Frequently asked questions
What is the best WebP quality setting?
There is no universal best value. For many photographs, a lossy quality around 75 to 85 is a useful starting point. Product images, screenshots and detailed graphics may need about 85 to 95. Always inspect the result because the source image and encoder affect the outcome.
Should I use lossy or lossless WebP?
Use lossy WebP when a smaller file is the priority and minor pixel changes are acceptable, especially for photographs. Use lossless WebP when exact pixels, sharp text, simple edges or transparent artwork are more important.
Is WebP better for photographs than PNG?
WebP can often store photographs more efficiently than PNG, particularly when lossy compression is acceptable. PNG is still useful for lossless images, transparency and graphics that contain text or sharp edges. The best choice depends on the image and the required visual accuracy.
What WebP setting is best for a logo?
Lossless WebP is usually the safest choice for a logo with sharp edges, flat colors or text. If the logo is large and minor changes are acceptable, high-quality lossy WebP may also work. Check the logo on its real background before publishing it.
What WebP setting is best for screenshots?
Use lossless WebP when the screenshot contains small text or must remain an exact reference. For less critical screenshots, try lossy WebP around quality 85 to 95 and check the text and interface lines at the size used on the page.
Does WebP support transparent backgrounds?
Yes. WebP supports transparency through an alpha channel. After conversion, inspect semi-transparent edges against the backgrounds where the image will be used, because halos can appear if the source edges were prepared for a different background.
Should I resize an image before converting it to WebP?
Yes, when the original dimensions are larger than the intended display size. Resize to a practical maximum first, keep the original separately, and then choose the WebP compression mode and quality.
Why does my WebP image still have a large file size?
The image may have very large dimensions, complex detail, transparency, metadata or a high quality setting. Check the pixel dimensions first, then compare lossy and lossless output where appropriate. File size varies according to the content, so two images with the same dimensions can produce very different results.
Can I use one WebP quality setting for an entire website?
You can use a general starting preset, but it is better to adjust settings for different image groups. Photos, logos, screenshots and transparent graphics do not respond to compression in the same way. Review representative files from each group before applying a broad rule.
Use the related tool
Process your files directly in the browser, for free and without sending them to the TopWebP server.
