Guides › Images and graphics

Compress images for a website: WebP explained

Last updated 10 October 2026 · Written by Souren Das

Images are usually the heaviest part of a web page. A blog post with five phone photos straight from the camera can weigh 15 MB, which is slow on a mobile connection and costly for readers on limited data plans. This guide explains what WebP is, when to use it instead of JPEG or PNG, how large a web image actually needs to be, and how to resize and convert images in your browser with Image Optimizer.

What WebP is

WebP is an image format Google introduced in 2010. It can store photos with lossy compression, like JPEG, and graphics with lossless compression and transparency, like PNG. For the same visual quality, a WebP photo is usually noticeably smaller than a JPEG. Google's own comparison study reported lossy WebP files roughly 25 to 34 percent smaller than JPEG at similar quality. Your results depend on the image, which is why Image Optimizer shows the actual size before and after rather than promising a figure.

All current major browsers display WebP, including Chrome, Edge, Firefox, and Safari on iPhone and Mac. Most website builders and content systems now accept WebP uploads.

When to use which format

WebP: the default choice for photos and most graphics on a modern website.
JPEG: when the destination does not accept WebP, such as some older content systems, email newsletters, or upload forms. Also when someone will download and edit the file in older software.
PNG: screenshots with small text, diagrams, and images where every pixel must be exact. PNG is lossless, so it is larger.
SVG: logos and icons that were drawn as vectors. They stay sharp at any size and are often tiny. See SVG vs PNG.

How big should a web image be?

Size in pixels matters more than format. A photo from a modern phone is 4000 pixels wide or more. Most blog layouts show images at 700 to 1200 pixels wide. Sending 4000 pixels to show 1000 wastes about 94 percent of the pixels.

A practical rule: make the image about the width it is displayed at, or up to twice that if you want it crisp on high-density phone and laptop screens. For a content column 800 pixels wide, 1200 to 1600 pixels is plenty. A full-width banner might need 1920 to 2400 pixels. A thumbnail in a card grid might need only 400 to 600.

To find the display width, right-click the image on your site, choose Inspect, and look at its rendered size, or ask your theme's documentation.

Step by step with Image Optimizer

Open Image Optimizer.
Work out the scale. Divide the width you want by the image's current width. For a 4000-pixel photo you want at 1600 pixels, that is 1600 ÷ 4000 = 40 percent.
Set Dimensions Scaling to that value. The slider goes from 100 down to 25 percent in steps of 5.
Set Output Format to WebP (Best).
Leave Visual Quality at 75 percent to start.
Drop your images on Select or Drop Images to Compress. Each card shows the original size, the new size, the saving, and the new pixel dimensions.
Open a result and look at it at 100 percent zoom. Check faces, fine textures, and any text. If it looks good, try a lower quality; if you see blocky patches or smeared edges, go back up.
Press Save on a single image or Download All.

Changing a setting re-processes every image in the list from the original file, so you can try values freely without stacking losses.

Quality settings that usually work

For photos on a website, quality between 65 and 80 percent is usually indistinguishable from the original at normal viewing size. Hero images that fill the screen may deserve 80 or more. Background images behind text can go lower, around 55 to 65. These are starting points, not rules. Trust your eyes on your own images.

The quality slider only affects WebP and JPEG. For PNG, only the scale changes the size.

Common mistakes

Converting a tiny, already-compressed JPEG to WebP and expecting miracles. Re-encoding a heavily compressed image can even make it slightly bigger. Start from the best original you have.
Uploading the original "just in case". Many site builders resize images for display, but some still serve the original to some visitors. Upload the size you need.
Using WebP where it is not accepted. Some email clients and older systems will not show WebP. Use JPEG there.
Losing transparency. JPEG has no transparency, so transparent areas become white when you choose JPEG. Use WebP or PNG for logos with transparent backgrounds.
Forgetting alt text. Smaller files help speed; descriptive alt text helps people using screen readers and helps search engines understand the image. Add it in your site editor.

Beyond file size

Once your images are the right size and format, two other habits help page speed. Set width and height on images in your HTML (most builders do this for you) so the page does not jump while loading. And use lazy loading for images further down the page, which most modern themes enable by default with the loading="lazy" attribute. Image Optimizer does not do these for you; they are settings in your site.

Privacy

Image Optimizer decodes and re-encodes each image on a canvas in your browser tab. FileTools Kit does not run an upload API for these images. Re-encoding also strips embedded metadata such as camera model and GPS coordinates, which is useful before publishing photos taken at home.

FAQ

Does WebP hurt SEO?

No. Search engines index WebP images. Faster pages are generally better for visitors, which is what search engines try to reward.

Should I convert all my old JPEGs?

Only if you have the originals. Converting an already compressed JPEG adds a second round of loss. For new uploads, start with WebP.

What about AVIF?

AVIF is a newer format that can be smaller still. Image Optimizer exports WebP, JPEG, and PNG only.

Why are my PNG screenshots still large?

PNG is lossless. Try WebP at 80 to 90 percent quality, which usually keeps text readable at a fraction of the size.

Written by Souren Das, FileTools Kit, Bengaluru. Last updated 10 October 2026. Spotted a mistake or a step that does not match the tool? Email support@filetoolskit.com and I will fix it. See how tools and guides are tested.