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 for source and usage instructions.