PixelNest Image Compressor Template

Compress batches of images without uploading them. Drop files or a whole folder, or paste from the clipboard, and PixelNest encodes them with WebAssembly codecs in background workers. Choose the Web, Social, Email, or Lossless preset, or set the output format and either a quality or a target file size, then resize, crop to a fixed ratio, and name files with a pattern. Any image can have its own settings. Compare the original and compressed versions with a draggable divider and zoom, then download one image or all of them as a ZIP. Metadata, including location, is removed, and the only thing saved is a running total of space saved on the device. Built with Layerwise, React, and TanStack Start.

Use PixelNest to shrink photos and screenshots for websites, social posts, or email without uploading them. It runs in the browser with nothing to sign in to, so open the live demo and drop in a few of your own images.

• Batch compression of JPEG, PNG, WebP, and AVIF files up to 50 MB each, added by drag and drop, folder, or paste, with WebAssembly encoders in background workers.
• Web, Social, Email, and Lossless presets, plus format, quality or a target size, resizing, ratio crops, file name patterns, and settings for individual images.
• A before-and-after compare view with zoom, single downloads, a ZIP of the whole batch, and a running total of space saved on the device.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start with the presets: decide which sizes and formats your audience needs and change those first. Keep encoding in the web workers so large batches do not freeze the page, and keep images off the network if you tell users their files stay on their device.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Remember my last settings and file name pattern between visits, and let me save the current settings as a named preset that appears after Web, Social, Email, and Lossless. Store presets in this browser only, let me rename and delete them, and leave the built-in presets unchanged.

• Add a large photo with the Web preset; its row should show the new dimensions and quality, such as 3840×2160 → 2048×1152 · WebP q80, and the percentage saved.
• Switch Compression to Fit under size and choose 100; every row should be at most 100 KB or show “Can’t reach 100 KB, smallest shown”. Then open Compare and drag the divider at Fit and 100%.
• Open Image settings on one row and pick another format; the row should show Custom and the Settings panel 1 image has own settings until you choose Apply to all. Then choose Download all and check the file names in the ZIP.

The compressor has no account pages, but the project keeps the starter’s database and sign-in server for a later feature such as presets that follow a user between devices. Metadata is always removed, iPhone HEIC photos are not accepted, and the largest batch depends on the device’s memory.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build an Image Compressor with AIBuild a browser image compressor in Layerwise. Keep files on the device, choose formats and presets, run encoders in workers, fit images under a size limit, test, and publish.