Guide · Image Tools

How to Compress and Resize Images with Squoosh

Resize images with Squoosh to get a smaller JPEG or WebP at the width your page needs. You'll need one image and a current browser. Plan a few minutes for the adjustments, plus encoding time that varies with the file and device. This walkthrough covers dimensions, quality, and the final download checks.

A landscape picture in a sizing frame beside a smaller copy and a WebP sheet.
On this page

Before you start #

Keep your original file as the master and treat the compressed image as a web export. Decide the output width and accepted format before opening Squoosh. For the example below, a 3000 × 2000 photo becomes a 1200 × 800 image.

Squoosh edits one image at a time. If you need a folder processed together, the free image-compressor shortlist has batch choices. The Squoosh directory profile has quick facts and the current tool link.

Resize images with Squoosh in seven steps #

1. Open the image in Squoosh

Go to the official app and drag your JPEG or PNG onto the drop area. On a phone, use the page's image selector. Start with the direct file picker if Android's Share action opens Squoosh without bringing the image along; the known-problems section below covers that failure.

You should see the picture in the comparison view, with Edit and Compress controls. Each side can have its own settings. Choose one side for the web export and keep your attention on its controls and file-size readout throughout the steps.

2. Set the width and preserve the proportions

Under Edit, enable Resize. Leave Maintain aspect ratio enabled, then enter the target Width. Squoosh adjusts Height to match. In our example, entering 1200 for a 3000 × 2000 photo gives a height of 800. (Resize controls)

Choose dimensions for the place where the picture will appear. A wide article image and a small product card don't need the same export. If your design uses a 600-pixel-wide image with a double-resolution asset, 1200 pixels is a sensible working width. Check the actual design requirement before using that number everywhere.

The resized image should keep its proportions. If faces look stretched, check Maintain aspect ratio and the two dimension fields before changing compression quality.

3. Leave the resize method at Lanczos3 to start

The Method menu includes Lanczos3, the default resize method. I'd begin there for a photo and inspect the edges after resizing. You can try another method if the result looks wrong, but changing every resize option at once makes it harder to work out what improved the image.

The resize panel also contains Premultiply alpha channel and Linear RGB. Leave those at their starting settings for this photo example. First get the dimensions right; then choose the export format. Small lettering and hard-edged artwork deserve a closer preview than a large area of ordinary photo detail.

4. Choose WebP, MozJPEG, or OxiPNG

Under Compress, open the encoder menu. Choose WebP for a web image when your destination accepts it. Choose MozJPEG when the upload requires JPEG. Choose OxiPNG when you need a PNG export with lossless optimization. (Encoder controls)

I'd use WebP for this photo example and MozJPEG for a JPEG-only form. For a logo with transparency, keep to an alpha-supporting format such as PNG or WebP. JPEG can't preserve a transparent background.

A format change can make the file larger, so compare the output size after the encoder finishes. Don't assume an export is smaller because its format is newer. The Squoosh vs TinyPNG comparison explains when manual format choices earn the extra effort.

5. Adjust Quality while watching the detail

For WebP or MozJPEG, use Quality to change the compression. I'd start at 75, inspect the result, and move it up or down. The same quality number in two encoders doesn't promise the same result.

Look first at the part of the picture that carries the information: a product label, a face, fabric texture, or small lettering. If it becomes smeared or blocky, raise quality. If it still looks good and the file is too large for your destination, lower it a little and inspect again.

For OxiPNG, you'll see Effort instead of a photo-style quality decision. Leave Reduce palette off when your goal is to preserve the PNG's colors. Increasing optimization effort doesn't justify losing time to a browser error; Safari users should read the fix below.

6. Inspect the preview at the size that matters

Drag the divider across the image to compare the edited result with the other side. Check close detail, then judge how it looks at the intended display size. A tiny defect visible only under heavy zoom may be less important than a blurry label a reader will actually need to read.

For transparent artwork, use Toggle background to check the edge against different preview backgrounds. Look for dark halos around pale objects and rough edges around lettering.

Wait for processing to finish after each change. Read the size on the side you're planning to download. The percentage saving helps you compare attempts, but your destination's file limit and the visible result should decide whether this export is finished.

7. Download the edited side and check the exported file

Use Download beside the output size for the edited side. Both sides have download controls, so match the control to the settings you changed. If you've chosen WebP, the exported file should have the .webp extension; MozJPEG produces a JPEG.

Open the exported image and verify its dimensions, format, and file size. For our example, the target is 1200 × 800, with readable detail in the important part of the photo. If your upload has a strict size ceiling, check the file's size before sending it. A preview that looks right doesn't prove the export meets the form's requirements.

Known problems and the fixes #

Safari OxiPNG crashes at higher Effort settings

A January 2026 report described an out-of-bounds memory error with OxiPNG at Effort 2 or higher in Safari 26.2, even on a 736 × 458 image. Effort 1 worked. Lower it to 1 and let the PNG finish processing before downloading. (Squoosh #1458)

Android Share opens an empty Squoosh window

September 2026 reports described installed Squoosh opening without the shared image in Chrome on Android. The Chromium report confirms that selecting the same picture through Squoosh's own file picker works. Open Squoosh directly and choose the file there. (Squoosh #1503, Chromium report)

Chromium marked a fix verified, but reports on Android 13 continued through October 6. Use the direct picker if sharing still fails after updating Chrome.

Troubleshooting #

ProblemLikely causeWhat to change
Picture looks stretchedWidth and height were changed independentlyEnable Maintain aspect ratio, then set one dimension
Photo detail looks blocky or smearedLossy quality is too low for the detailRaise Quality and compare the important area
Logo has a solid backgroundJPEG export can't preserve alphaChoose PNG or WebP and check with Toggle background
Download has unexpected dimensionsYou downloaded the other side or missed the resize settingMatch Download to the edited side and check Resize
OxiPNG shows a memory error in SafariHigher Effort triggers the reported failureUse Effort 1
Android sharing opens no pictureChrome's share-target delivery dropped the fileOpen Squoosh directly and select the image inside the app

Variations for other image jobs #

Get below a 100 KB upload limit

Set the smallest dimensions the destination actually needs, then adjust Quality until the output-size readout is below its limit and the detail still reads well. Leave a little room below a hard ceiling. If the image can't meet the target without looking poor, reduce dimensions further if the upload rules allow it. Changing the filename won't change its encoding.

Choose OxiPNG or WebP, check the edge with Toggle background, and inspect the exported image over the background where you'll use it. For a lossless WebP export, enable Lossless. If you need a batch of transparent images with automatic settings, compare TinyPNG before editing them one by one.

Resize a whole folder

Move the job to a batch tool. Caesium is a local desktop choice for JPEG, PNG, WebP, and TIFF photos. Choose the output dimensions and review a representative image before using the settings across the folder. The best free image compression tools list explains the alternatives and their free allowances.

Completion checklist #

  • The width and height match the image's place on the page.
  • Proportions look right.
  • The upload destination accepts the exported format.
  • Lettering, edges, and photo detail are readable.
  • Transparency behaves correctly where the image will appear.
  • The downloaded file comes from the side you edited.
  • The file meets any upload-size limit.

Next steps #

Use the Squoosh vs TinyPNG comparison to decide whether your next job needs manual control or an automatic batch. If the files keep arriving in folders, choose a desktop or integrated option from the image-compressor shortlist.

Sources #

C
Chris McClureCo-founder & Editor, WebIndexly

Chris McClure is a tech blogger and co-founder of WebIndexly, with a strong interest in SEO, web architecture, user experience and the technologies that shape the modern web. He focuses on making complex technical topics easier to understand and more useful for developers, creators and businesses…