PNG (Portable Network Graphics) are great, you should always prefer them over GIFs or JPGs whenever the format suits the image. PNG works best when there are no blurs, faded colors or generally if there are mostly one-colored areas.

A screenshot is probably the best example of an image where PNGs work really good. You’ll get a pretty lossless and sharp screenshot when you use PNGs. Whenever there is a picture out of a camera like the right example above you should use JPG, it will be much smaller and you won’t notice the different compression.

The big problem of PNG is it’s size, out of the box PNGs are pretty big. Luckily there are a few options on how to compress PNG files, which I will show you here.

1. Browser-Beginner: The not every-day-solution

This one is so easy it almost doesn’t need an explanation. Fire up your browser and head over to TinyPNG. Drag and Drop the image onto the hungry panda, done. Well you need to download the file afterwards. It does not get easier than this.

Disadvantage: The workflow is slow for a whole set of pictures, you can’t download the whole set after compression.

Performance: 329KB reduced to 145KB (–56%)

Will pointed out an alternative png compressor by giftofspeed.com in the comments. This service performs even a little bit better.

Performance: 329KB reduced to 139KB (-58%)

2. Automator-Hero: TinyPNG for every day!

Update: Thanks to a comment from Ingo the service now also works with JPG files. I’ve updated the script.

Especially when you start dealing with many files the browser-solution quickly becomes tedious. But we can automate that whole process so you’ll not have to open the browser by using Mac Automator.

Update: Somebody made an automator workflow that you can download and install just by double clicking it. When you’ll use it the first time it will ask you for your TinyPNG API Key that you can request here. Try this first, if you can’t get it to work, follow the steps below.

I made a short video for you to follow along, the steps are explained below:

1. Fire up Automator (CMD + SPACE, “automator”, ENTER)
2. File -> New, Select “Service”.
3. In the search field search for “run shell script”, drag the item to the right area.
4. Setup like this:
   1. “Service receives selected” = “image files”
   2. “in” = “finder”
   3. “Shell” = “/bin/bash/”
   4. “Pass input” = “as arguments”
5. Paste the following code into the text field below (delete the example code before)

for f in "$@"
do

   echo $f | while IFS= read file
   do
        filename=$(basename $file)
        ext=$(echo ${filename##*.} | tr "[:upper:]" "[:lower:]")
        if [ -f $file ]
        then
            if ( [ $ext == "png" ] || [ $ext == "jpg" ] || [ $ext == "jpeg" ] )
            then
                JSON=`curl -i --user api:APIKEY --data-binary @$file https://api.tinypng.com/shrink 2>/dev/null  `
                URL=${JSON/*url\":\"/}
                URL=${URL/\"*/}

                curl $URL>${file} 2>/dev/null
            fi
        fi
    done

done

afplay /System/Library/Sounds/Submarine.aiff

6. Request a API Key from TinyPNG
7. Click the Link in the Email TinyPNG sends you.
8. Copy the API Key and replace it in the code fragment where it states APIKEY.
9. File -> Save!
10. Name the service how you want it to show up in the context menu. (Example: Compress PNGs).
11. Done! Right click on an image file in the finder an hit “Compress PNGs” to let the magic happen!

Disadvantage: You’re limited to 500 files per month, although I’ve found this to be quite a lot.

Performance: 329KB reduced to 145KB (–56%) – it’s the same service as before.

3. The Designer-Pro: PNG Compression in Photoshop

This example comes last because not everyone uses Photoshop. Also the 2. solution is quite handy even if you have Photoshop. Getting this one to work is really quite easy. Download the Photoshop Plugin on GitHub and follow the instructions on how to install and use it!

Disadvantage: Not quite as small compression as TinyPNG, but there is no limit for the usage!

Performance: 328KB reduced to 170KB (–48%)