---
title: "Square Image Workshop: Offline Square Crop and JPG Compression"
description: An offline browser tool for square image composition, white backgrounds and compressed JPG export.
image: "https://zengliangyi.com/_astro/image-tool.Brj93LpB.png"
---

## A small square image can involve several separate jobs

Preparing a square image often means more than cropping. The subject needs positioning, empty space needs a background and the exported file may still exceed a size limit. Moving between tools makes a small task unnecessarily repetitive.

Square Image Workshop combines composition, rendering and compression in one HTML page. Download it and open it in a browser without installing an application or starting a backend.

## Compose first, then export

This diagram illustrates the composition model. The cover shows the actual editor with my profile image as sample input.

### Choose an input

PNG, JPG, WebP and GIF are supported. Output is always JPG: transparent areas are composited onto white, and GIF input does not produce animated output.

### Position and resize

Drag the image to move it. Resize with the corner handles or mouse wheel while retaining its proportions, rather than stretching the subject to fill the square. Content outside the output canvas is excluded from the composition.

### Process and download

Once the composition is ready, the tool renders the current canvas state and compresses the JPG. Editing focuses on the picture; export handles dimensions and encoding.

## Compression is more than a quality slider

The implementation targets a `950000`-byte budget and balances quality with dimensions:

- Render at the target dimensions and try a higher-quality JPG first.

- If a lower-quality result fits, search the quality range for a better result within budget.

- If even lower quality is too large, reduce dimensions and try again.

- At the minimum dimensions, return a fallback result instead of retrying indefinitely.

The goal is to preserve as much quality as possible while controlling size. Detailed textures and simple graphics compress differently. The minimum-size fallback should not be interpreted as an unconditional size guarantee.

## Why keep it as an offline page?

| Choice | Benefit | Boundary |

| --- | --- | --- |

| Single HTML file | Simple distribution and direct use | Updates require a new file |

| Local Canvas processing | No upload or server round trip | Limited by browser and device resources |

| Proportional scaling | Avoid distorted subjects | Composition remains a manual decision |

| White-background JPG | Consistent delivery format | No transparency or animation |

| Automatic compression search | Less manual parameter tuning | May reduce quality or resolution |

## A practical workflow

Choose an image, position the subject, check what is cropped at the edges and inspect the exported result. For fine text, transparent marks or animation, first decide whether a static white-background JPG is the right output.

Processing stays in the browser without uploading the image. See the [repository](https://github.com/ZengLiangYi/image-tool) for source and usage instructions.

##  More projects

[2026

### ChatCrystal

A local-first knowledge app that turns AI coding conversations into reusable notes, semantic search and MCP memory.

#TypeScript

#AI

#MCP](/en/projects/chatcrystal)[2026

### Network Error Reporter

A Chrome DevTools extension that turns failed network requests into structured Markdown and image reports.

#JavaScript

#Chrome Extension

#Developer Tools](/en/projects/network-error-reporter)[2026

### PaddleOCR-VL Document Parsing Evaluator

Evaluate Baidu Cloud document parsing by comparing reading order, layout coordinates, tables and Markdown with the source document.

#Python

#JavaScript

#Document AI](/en/projects/paddleocr-vl)

##  Have a question or an idea?

Send me a message to discuss an implementation or explore a project idea.

[Contact me](/en/contact) [All projects](/en/projects)

```json
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ZengLiangYi Blog",
  "alternateName": [
    "Zeng Liangyi",
    "ZengLiangYi",
    "zengliangyi.com"
  ],
  "url": "https://zengliangyi.com",
  "description": "曾亮懿的个人网站。记录 AI Native 探索、开发者工具与全栈产品实践。"
}
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Square Image Workshop",
  "description": "An offline browser tool for square image composition, white backgrounds and compressed JPG export.",
  "url": "https://zengliangyi.com/en/projects/image-tool/",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "codeRepository": "https://github.com/ZengLiangYi/image-tool",
  "image": "https://zengliangyi.com/_astro/image-tool.Brj93LpB.png",
  "author": {
    "@type": "Person",
    "name": "曾亮懿",
    "url": "https://zengliangyi.com"
  }
}
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://zengliangyi.com/en"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Projects",
      "item": "https://zengliangyi.com/en/projects"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Square Image Workshop",
      "item": "https://zengliangyi.com/en/projects/image-tool/"
    }
  ]
}
```