Large images are one of the easiest things to fix on a slow page, and one of the easiest to ignore. Kwebby's Image Optimizer re-encodes JPG, PNG and WebP files in your browser. You choose JPEG, WebP or PNG as the output, set a quality level, drop in one file or many, and see the before and after size of each. This guide explains what the tool does, what it leaves out, and how to get a smaller file without a visible drop in quality.
Key Takeaways
- Kwebby's Image Optimizer re-encodes images in your browser as JPEG, WebP or PNG. Nothing is uploaded.
- The Quality slider runs from 10% to 100% in steps of 5% and starts at 80%. It has no effect on PNG output.
- Each file row shows the original size, the new size and the percentage saved, with a Save button. A banner shows the total saved.
- The tool keeps the original pixel dimensions. It compresses and does not resize, so shrink oversized photos first.
- Format and quality apply to files you add afterwards. Set them before you add the images.
- Saving as JPEG fills transparent areas with white, and PNG output can be larger than the original.
What Is the Kwebby Image Optimizer?
Kwebby's Image Optimizer is a free online tool that shrinks image files by re-encoding them in your browser. Drop in JPG, PNG or WebP files, pick JPEG, WebP or PNG as the Output Format, set the Quality slider, and the tool shows each file's new size and the percentage saved. Click Save to download the optimized copy.
Optimizing an image means storing the same picture in fewer bytes. Lossy formats such as JPEG and WebP do it by discarding detail the eye is unlikely to miss, and the Quality setting decides how much. Lossless PNG keeps every pixel and gets smaller only when the picture has large flat areas. The aim is the smallest file that still looks right at the size it is shown.
Key Features and How It Works
Three output formats
The Output Format menu has three choices, and JPEG is selected by default:
| Option | Label in the tool | Best for |
|---|---|---|
| JPEG | JPEG (best compression) | Photographs and images without transparency |
| WebP | WebP (modern, smallest) | Web pages, when you want the smallest files |
| PNG | PNG (lossless) | Screenshots, logos and graphics with sharp edges or transparency |
Google reports that lossy WebP images are 25 to 34 percent smaller than comparable JPEG images at an equivalent SSIM quality index, and that lossless WebP is 26 percent smaller than PNG, in its WebP documentation. Results vary by image, so use the per-file figures in the tool as your guide.
Quality slider
The Quality label shows the current value, such as "Quality: 80%". The slider moves from 10% to 100% in 5% steps. When PNG is selected the slider is disabled and the label adds "(n/a for PNG)", because PNG output is lossless.
Several files at once
The drop area reads "Click or drag images here", with a hint that lists JPG, PNG and WebP and says multiple files are supported. You can click it to pick files or drag a batch onto it. Each file gets its own row with a thumbnail, its name, "original → new" sizes in KB or MB and the format it was saved in. A green "-N%" shows the saving. If the new file is larger, an amber "+N%" appears instead. A green banner reads "✓ Total saved" with the combined saving and the number of images. It counts only files that got smaller.
If you add a file with the same name as one already in the list, the new result replaces the old row.
Save
The Save button on each row downloads the optimized copy, named after the original with "-optimized" added, such as photo-optimized.jpg. The file extension matches the format the file was actually encoded in, so changing the Output Format menu later does not mislabel a file that is already in the list. To get a different format, change the menu and add the file again.
Done in your browser
The page reads each file, redraws it on a canvas at its original size, and saves it again in the format you chose. That all happens on your device. Saved files do not carry the original EXIF block, which holds camera details and sometimes location. In a test in Chrome, a JPEG with an EXIF tag came out of the same process with none.
Why Optimizing Images Matters
Images are often the largest thing a visitor waits for. Largest Contentful Paint, one of the Core Web Vitals, measures how long the biggest visible image, text block or video takes to appear. web.dev's guide to LCP treats 2.5 seconds or less as good, measured at the 75th percentile of page loads. When the biggest element is a photo, its file size is a direct part of that time.
Size also depends on dimensions. Lighthouse's Properly size images audit says a page should never serve images larger than the version shown on screen, because the extra bytes only slow the load. Compression and sensible dimensions work together, and this tool handles the first part.
How to Use the Image Optimizer
- Choose an Output Format. Pick JPEG (best compression) for photos, WebP (modern, smallest) for the smallest web files, or PNG (lossless) for graphics that need transparency.
- Set the Quality. Drag the slider. Start at the default of 80%. It is unavailable for PNG.
- Add your images. Click "Click or drag images here", or drag files onto it. You can add several at once.
- Read the results. Check the new size and the percentage on each row, and the "Total saved" banner.
- Click Save. Download the optimized copy of each file you want to keep.
- Run it again if needed. Change the format or quality, then add the files again. A file with the same name replaces its earlier row.
Best Practices for Optimizing Images
Resize large photos first
The tool does not change pixel dimensions. A 4000 pixel wide camera photo stays 4000 pixels wide, however small the file gets. Reduce the dimensions to what your layout shows before you compress. Kwebby's Online Image Editor lists resizing to exact pixel dimensions among its features.
Match the format to the picture
Use JPEG or WebP for photographs and PNG for flat graphics, logos and screenshots with text. Saving a screenshot as JPEG can leave fuzzy edges around letters, while saving a photograph as PNG usually gives a very large file.
Start near the default and step down
The Lighthouse Efficiently encode images audit uses a quality level of 85 as its benchmark for JPEG. This tool starts at 80. Lower the slider in steps of 5, look at the result at the size you will display it, and stop when you notice a loss. Add the file again after each change, because existing rows do not update.
Expect a white background in JPEG
JPEG has no transparent pixels. A PNG or WebP with a clear background saved as JPEG gets a white background, because the tool paints the canvas white before it draws the image. Keep PNG or WebP when transparency matters.
Watch for "+" results
An amber "+N%" means the new file is larger. It happens most with PNG output on photographs, and with images that were already compressed hard. Skip those files, or try another format.
Check that the browser could encode the format
Browsers must support PNG output, and many also support JPEG and WebP. MDN's reference for canvas toDataURL says that a format the browser does not support falls back to PNG. When that happens, the tool labels the row PNG, shows a note that your browser could not encode the format you picked, and saves the file with a .png extension.
Keep your originals
Compression is lossy, and the saved copy has no EXIF data. Store the untouched originals somewhere safe and upload the optimized copies.
Common mistakes to avoid
- Expecting existing rows to change format when you switch the Output Format menu. Add the file again instead.
- Compressing a huge photo without resizing it first.
- Saving a transparent logo as JPEG.
- Lowering quality until the image looks blocky.
Common Use Cases
- Blog and article images. Shrink screenshots and photos before you upload them.
- Product photos. Compress a batch of shop images in one pass.
- Speed audits. Fix an image warning raised by a page speed test.
- Email and chat attachments. Make a photo small enough to send.
- Format conversion. Turn PNG screenshots into JPEG or WebP.
Related Kwebby Tools
- Image Crop Tool trims an image to a chosen ratio before you compress it.
- Online Image Editor lists cropping and resizing among its editing features.
- Page Speed Checker measures a page after you replace its images.
- Image to Base64 turns a small optimized image into a string you can embed in code.
- Favicon Generator makes site icons from an image.
- Free Image Tools Online lists the other image utilities on Kwebby.
Frequently Asked Questions (FAQs)
What does an image optimizer do?
An image optimizer reduces the file size of a picture so it loads faster. It re-saves the image in a more compact form, usually by lowering quality slightly or by switching to a more efficient format. Kwebby's tool does this in your browser and shows the saving for each file.
What quality setting should I use?
Start with 80%, the tool's default, and lower it in small steps until you see a difference. The Lighthouse audit for efficient image encoding uses a quality level of 85 as its benchmark for JPEG. Photos that will be shown small can often go lower than photos shown full width.
Which format is best, JPEG, WebP or PNG?
Use JPEG or WebP for photographs and PNG for logos, screenshots and anything with transparency. Google reports lossy WebP files are 25 to 34 percent smaller than comparable JPEGs. JPEG works everywhere, so it is the safe choice when you are unsure.
Does optimizing images help SEO?
Indirectly. Smaller images load faster, which helps Largest Contentful Paint and the experience of visitors on slow connections. Compression alone does not lift rankings, so treat it as part of general page speed work.
Are my images uploaded to a server?
No. The page reads the files and processes them with the browser's canvas on your device. Nothing is sent to Kwebby.
Why did my file get bigger?
The format or quality you chose produced more bytes than the original used. PNG output on a photograph is the usual cause, and so is a very high quality setting on a file that was already compressed. Choose JPEG or WebP, lower the quality, or keep the original.
Final Thoughts
Image optimization pays off when you pick the right format, resize first and compress second. Kwebby's Image Optimizer gives you three output formats, a simple quality slider and a clear before and after size for every file. Set the format and quality before you add your images, check the percentage on each row, and keep the originals. For your next step, replace one heavy image on a slow page, then test the result with the Page Speed Checker.