Using TinyPNG to Reduce Image File Sizes

Steve Caplin

1

Exporting a PNG file from Photoshop with transparency is a key requirement if you want to place images on a colored or textured background in your website. Photoshop CC 2015 introduced the option of saving an 8-bit PNG with true transparency using its Export feature. This results in a much smaller size than exporting 24-bit PNG files; for web delivery, 24-bit images are unnecessarily wasteful.

Users of older versions of Photoshop, however, don’t have this option. Instead of the new Export command they have to use the Save for Web dialog, which does offer the option of an 8-bit file – but this comes with a bitmap alpha channel, producing hard-edged cutouts. Here’s an example of a 16-bit and an 8-bit PNG side by side, exported via Photoshop’s Save for Web dialog, in which you can see that the 8-bit version is unusable:

For users of older versions of Photoshop, this was an insurmountable problem: either you’d end up with vast sizes for the cutout images on your website, or you’d have to put up with ugly cutouts.

TinyPNG (tinypng.com) offers a solution to this problem. Drag a 24-bit PNG file into the site and, in a couple of seconds, it will return an 8-bit version, but with a full 8-bit alpha channel.

In this example, the 24-bit shopping cart image weighed in at 172.8k for a 300-pixel image; after processing by TinyPNG, that size came down to just 41k, with no discernible loss in quality:

TinyPNG and WordPress

As well as using the free web service, you can choose to install the WordPress plug-in. This can be set to process images either as they’re imported into the site, or in the background (although this can result in issues with other image plug-ins). This takes a few extra seconds, but results in dramatically reduced file sizes.

The plug-in allows you to output a variety of image sizes, and you can select those you want to create. You’re can process up to 500 free conversions a month, but bear in mind that each size you choose counts as an additional conversion. If you’re going to want to process more images than this you can upgrade to a paid account, for which you’re charged just under a cent for each of the next 500 images, and one fifth of a cent after 10,000 images.

TinyPNG and Photoshop

If you’re using Photoshop CS5, CS6 or even Photoshop CC, you can buy the TinyPNG plug-in that will allow you to export 8-bit PNG images directly. This costs $50, and means you can bypass the web process to export as many images as you want at no extra cost.

The Photoshop plugin currently allows users to specify the size of the resulting image as a percentage, rather than in pixel dimensions. This means that if you want to save a file at, say, exactly 300 pixels wide, there will be necessarily some hit-and-miss approximation before you hit on the right percentage:

The plug-in also has the disadvantage that it doesn’t automatically convert spaces to hyphens, as Photoshop does, which means you have to change them manually to make the file web-friendly.

TinyPNG and JPEG files

TinyPNG can also compress JPEG files, producing a modest reduction in size for those already saved for the web – around 10% to 15%, in our tests. But if you’re building a website using images from a variety of external sources, it’s useful to be able to shrink them all down to a reasonable size using the settings in the WordPress plug-in, without having to process each one in Photoshop first: you can set the maximum size at which you want to use the image, replacing the original as it’s imported.