Development work includes plenty of tasks outside the code editor. A few focused browser utilities can help you prepare assets and explain how a system fits together, without adding a large toolchain.

The shortlist, at a glance

ToolWorth considering for
01. SquooshOptimizing image assets
02. ExcalidrawSketching a system
03. PhotopeaAn occasional asset edit
PICK 01 / Optimizing image assets

1. Squoosh ↗

Use Squoosh to compare compression settings before shipping an image. Its side-by-side workflow helps you judge the trade-off between file size and visual quality.

Keep in mind

Review the result at the size it will actually appear; aggressive compression can introduce artifacts.

Explore Squoosh ↗Official source: squoosh.app ↗
PICK 02 / Sketching a system

2. Excalidraw ↗

Use a whiteboard to explain a request flow or think through an interface before implementation. A simple diagram often makes a technical discussion easier to follow.

Keep in mind

Keep diagrams up to date as the implementation changes.

Explore Excalidraw ↗Official source: excalidraw.com ↗
PICK 03 / An occasional asset edit

3. Photopea ↗

For a layered design file or a quick image adjustment, Photopea provides a browser-based editor with PSD support and local file processing.

Keep in mind

Large files depend on the performance and memory available on your device.

Explore Photopea ↗Official source: www.photopea.com ↗
THE TAKEAWAY

Start with the job you need to do.

Choose the option whose main purpose matches your next task. Try a small, representative project before bringing it into your everyday workflow, and check the provider’s current features and pricing.

About this guide

This is an editorial shortlist based on published product information, not a hands-on benchmark. Features and availability may change. Reference: Squoosh official website ↗