Pixelfix: Remove the black edges on scaled images


#1

Pixelfix

Pixelfix-1

Pixelfix changes the color of transparent pixels to match the color of the nearest non-transparent pixel. Transparent pixels stay transparent, but when resized and blended with non-transparent pixels they won’t cause dark borders.

How it works

Here are screenshots of images in Roblox that have been scaled down, showing with/without Pixelfix and with/without transparency:
Pixelfix-2

Since the transparent pixels are no longer black, they no longer make edges of the image black when resized.

How to use

The ideal way to use Pixelfix is to make an executable file and either drag images to it or use the “Send To” functionality of Windows.

You can grab pre-built executable files from the Github for Pixelfix.

Alternatively, you can build your own by...
  1. Downloading Node JS
  2. Downloading the git repo
  3. Running npm install in the repo directory
  4. Installing pkg using npm install -g pkg
  5. Running pkg with pkg -o pixelfix -t node10-win-x64,node10-win-x86,node10-macos-x64,node10-linux-x64 .\index.js

Once you have a pixelfix executable, you can drag images onto it to fix them. The fixed images are saved over the existing images.

You can also add a shortcut to your Send To menu:

Instructions for Send To menu
  1. Open shell:sendto in the File Explorer
  2. This will open up the Send To directory, where you can place a shortcut to pixelfix

Side notes

I wrote this in Node JS because it was super easy and I used this technique in a previous project. Something written in a more lightweight, low level language like Rust would be ideal, but would also take more time. Anyone is free to take up the idea and rewrite it if you don’t like Node!

You don’t have to package Pixelfix up as an exe to use it. You can use it from the shell with node, but it’s not near as convenient.

Related threads

Here’s a fix by Quenty, but it requires multiple steps per image through Gimp or Photoshop.

You can find a ton of threads about it at this search, such as this thread I made:


Prompt user to load/save file from plugin
Image masking problems on circular UI
Black Outline Around Transparent Decals
#2

Thank you for this! I feel that this would be very helpful to other users who encounter this problem!


#3

This is great, thank you! Didn’t realise what I didn’t have until I have it :wink:


#4

Awesome!


#5

How do I drag the image to execute file on Mac? Don’t think it works like in Windows


#6

I haven’t tested this on Mac. Pixelfix should work on Mac though, since Node JS and the exe packager work for Mac. If it doesn’t work then the source is available for you to fix it up; I don’t have a mac to test this on.

Assuming the steps needed to run it are the same as on Linux, you need to:

  1. Make it executable. You can probably find this in the file properties for pixelfix-macos-x64.
  2. Try dragging a file to pixelfix-macos-x64

In other words, make it executable then run it with your image file as the first argument. On Windows, exe files are executable by default and dragging onto an exe file is a shortcut for running it with the file as the first argument.


#7

I’ve been having problems with black or white pixels around transparent images for ages and the other solutions just don’t seem convenient. Thanks for the easy way to fix them.


#8

Agreed. I wrote this guide not too long ago for a relatively quicker way but ideally one does not have to interact with GIMP or any other editing program to do something so simple.