Exporting an identical image from different design tools results in different file sizes. Why? What can be done to optimise them to reduce downloading time and disk space?
To test, we can use an image that is a single pixel. A 1×1 white pixel PNG shows the efficiency of how various tools package their exports, and if metadata or additonal data chunks are included. Here’s how the various tools and common export methods rank. Sizes are in bytes and smaller is better.
Photoshop’s save as weighs in at 18183 bytes, using the default settings. Removing the ICC profile brings it down to 14994 bytes. It is saving lots of non-image data, which is ideal for photos and in many other situations, but is a bad idea for production assets in software. If we used this method to save the UI images for iStat Menus, it would add approximately 17 MB to the app’s size with no benefit and no visual difference.
Affinity Designer’s default exports are a bit heavy, too.
The graph is easier to read with Photoshop’s save as and Affinity Designer’s default settings removed.
We’re now looking at more reasonable sizes. Only 113 bytes separates the best and worst. You can also see that the differences are minor enough that this isn’t a reason to choose a design tool — all are acceptable. This exploration is more about curiousity than anything else. Curiosity, and determining the best settings to use.
Running the files through ImageOptim helps a lot, but the results still vary. ImageOptim is shown in red, lossy compression disabled.
Photoshop contains a lot of different ways to export PNGs. The most recent additions, Export As and Quick Export as PNG, are incredibly tidy. 68 bytes is pretty much as good as you’re going to get for a 1×1 pixel white PNG.
Generator exported PNGs contain a lot of unneeded additional chunks. What purpose does storing date modified, background colour and physical size have? To my knowledge, they’re not used on any popular platform. We’re only talking about 113 bytes per image, so it’s not too bad though.
If you’re using save for web, you’ll probably want to disable Embed Color Profile and set Metadata to None — they serve no purpose for user interface images (there are exceptions, but they are rare).
If you’d like your Sketch-generated PNGs to be 3 bytes smaller, disable save for web.
Save for web includes a gamma chunk, which is actually 3 bytes longer than the sRGB chunk in the non-save for web version.
Affinity Designer #
With some settings tweaks, Affinity Designer’s exported file sizes are okay.
The default export settings in Affinity Designer include 3400 or so bytes that aren’t needed for user interface images (iTXt, iCCP, pHYs and other chunks).
Clicking More in the export sheet opens some important additional options. The pixel format can be set to 8-bit, ICC profiles can be disabled and metadata can be removed.
There isn’t much of a story to tell with Illustrator’s PNG exports — the file sizes are average and there isn’t really anything that can be done to improve them.
Including “Software” and “Adobe Imageready” as text in the PNGs doesn’t help.
Wide and deep colour #
It’s entirely possible some UI assets may require 16-bits per channel, or require an embeded ICC profile, especially for wide gamut support or in cases where non-sRGB assets are needed.
However, in 2016, almost all platforms and devices assume that images with no ICC profile are sRGB, and it is exceptionally rare to need to embed an sRGB profile or other profile, for web or user interface images.
PNG8 is great #
The indexed colour, PNG8 versions of the images above are all larger than their PNG24, RGBA counterparts. That is because in this extreme example of a 1×1 pixel image, the information to descibe the colour palette is larger than the image data itself. In most cases, if you only need 256 or less unique colours, an indexed colour image will be smaller.
This article isn’t intended to be a conversation about using PNGs vs SVGs vs drawing in code. That’s an entirely different and interesting topic. Just know that many websites, iOS apps, Android apps, and macOS apps use PNGs extensively or exclusively, so optimising them is a good thing.
InspectPNG was used for the analysis above. PNG files were saved using Photoshop CC 2015.5.0, Illustrator CC 2015.3, Sketch 39.1 (31720), and Affinity Designer 1.4.2. It is possible future versions will improve PNG export.
Published 1 August 2016.