DEV Community

OnePassApps
OnePassApps

Posted on

Trim a PNG in the Browser: Remove Transparent Edges Without Uploading It

Most icon exports arrive with a canvas bigger than the artwork. You open the PNG, see a band of transparent pixels around your logo, and that padding is baked into the file.

Trimming it by hand means a round trip through an image editor, which is exactly what you were trying to avoid when you picked a tool that runs in your browser.

I work on OnePassApps. The Icon Studio has a Trim / padding tab that removes the transparent edges from a PNG inside your browser tab. No upload, no queue, no account.

https://app.onepassapps.com/studios/icons?utm_source=devto&utm_medium=post&utm_campaign=icon-trim-pad-launch&utm_content=icon-studio-link

What the tab does

Icon Studio has eight tool tabs: SVG to PNG, PNG to ICO, Favicon pack, App icons, Resize set, Optimize SVG, Recolour SVG, and Trim / padding.

Trim / padding works on a PNG and shows three steps on the panel:

  • 01 Source - "No PNG yet. Drop one on the stage or browse for it. PNG up to 24 MiB and 12,000 px a side."
  • 02 Transparent bounds - the Operation picker. The panel heads it with "Trim the transparent edges or add even padding once a PNG is open." The first operation is "Trim transparent edges", and its own description reads: "Remove the empty space around your icon. A fully transparent image becomes a 1 × 1 PNG."
  • 03 Result - "A trimmed or padded PNG with its new dimensions."

One detail worth knowing before you start: this tab wants a raster image. Drop an SVG on it and the stage refuses it with "Needs a PNG". If what you have is an SVG, the SVG to PNG tab in the same studio turns it into a PNG first.

Running it on a real file

I tried it on a 400 x 400 PNG holding a rounded square in the middle, with transparent margins on all four sides. The artwork itself was 201 pixels wide. The source stage showed:

probe-trim.png
PNG · 400 × 400 · 1.4 KiB
Enter fullscreen mode Exit fullscreen mode

One click on "Create PNG" and the result panel read:

Ready
Before
1.4 KiB PNG
After
2.5 KiB PNG
Dimensions
201 × 201 px
File name
probe-trim-trimmed.png
Created in 0.3 s
Enter fullscreen mode Exit fullscreen mode

with the line under it: "PNG created at 201 × 201."

The 201 x 201 is the honest measurement. The artwork was 201 pixels wide, so the trimmed file matches the artwork instead of rounding up to a tidy number.

Why the file got bigger

The trimmed PNG is larger than the original, 2.5 KiB against 1.4 KiB, even though it now has a quarter of the pixels. That is normal for this kind of image: a wide band of transparent margin compresses to almost nothing, so cropping it away leaves the same real pixels in a much smaller canvas. Trimming is about the visible bounds of the image, not about the byte count.

If you need the file to be smaller as well, the Image Studio has a Compress tool that shrinks a JPEG, PNG or WebP in the same browser tab.

The padding option

The same panel can add even transparent padding instead of removing it. That is the direction you want when a platform expects a fixed square canvas and your icon sits tight against the edges.

What stays local

"Processing stays in this browser." is printed under the stage, and the studio header says files stay in your active browser tab. The PNG is decoded, cropped and re-encoded in the tab, so there is no upload step to watch for and no file to wait on.

The Standard plan is free right now: $0 / month, 100,000 credits every 30 days, no end date set, no card required.

If you want the rest of the studio walked through - converting an SVG to PNG, building a favicon pack, resizing an icon set - the guides cover those too.

https://app.onepassapps.com/guides?utm_source=devto&utm_medium=post&utm_campaign=icon-trim-pad-launch&utm_content=guides-link

I work on OnePassApps, so this is me telling you about a tool I ship. Drop one of your own PNGs on it and see what falls off the edges.

Top comments (0)