hello!
A Developer's Guide to Images February 26, 2013

I’ve regularly received questions from developer friends who are a bit baffled with images and the somewhat confusing formats. I’ve also heard from various developers that they hate receiving a PSD with no instructions and having to wade through the overwhelming options of Photoshop. This short guide is aimed at explaining the basics of image formats and giving you some simple rules that you can apply everyday when you are actually trying to save images from Photoshop.

Part 1: Getting Familiar with JPG & PNG

There are basically two types of images you will use when coding - PNGs and JPGs. Between these two we will be able cover the gamut of any web or mobile app. Obligatory pun: check.

JPGs are for Photos.

If you have a photo it should be a JPG format. This part is pretty simple. JPGs do not support transparency and are lossy, meaning that while saving the photo through Photoshop the color information of some pixels will be approximated from the color information of surrounding pixels and result in some artifacts and fuzziness. This is generally great for photos because the fuzziness will get masked by the complexity/variations of color and luminance in photos while simultaneously keeping file sizes low.

PNGs are for Graphics.

Generally, any graphic (icon, interface element, texture, etc.) you have will be a PNG, unfortunately this isn’t as clear of a rule as with JPGs, as we’ll touch on later. They are lossless, meaning all of the color information for every pixel is retained. This is both good and bad - good because you are guaranteed to have crisp and clean graphics, bad because this often results in larger file sizes when you have a lot of colors (AKA a large gamut).

What About GIFs?

Don’t use GIFs, they are an old standard that has been replaced by PNG. Except they have the ability to support animation, so they aren’t going anywhere, but for the average web or mobile app this isn’t applicable.1

Alpha & Color-Depth of PNGs

There are two main components to a PNG - the color information and the alpha (AKA opacity or transparency). Both color and alpha information can have different bit-depths which are independent of each other and can be swapped to meet your needs. First, What are they and what are your needs?

Color can be one of two main bit depths: 8 and 24. PNG-8 gives you max 256 indexed colors and PNG-24 gives you 16 million non-indexed colors. What are indexed and non-indexed colors? It has to do with the file structure of the colors. Both PNG-8 and PNG-24 save the color information as 24-bits (8 Red, 8 Green, 8 Blue). The difference is that with indexed files (PNG-8) this color information is saved in a separate area called the palette and each pixel has 8-bits that reference one of those colors.

Non-indexed (aka, truecolor) color means that the information for each pixel is the 24-bits of color information.

Since the color information is stored separately in the palette, reducing the number of colors in your PNG-8 files makes a noticeable impact on file size. The numbers of colors you can have in a PNG-8 image can be anything from 2-256, below is a selection:2

The key here is getting a grasp of the tradeoff between loss of quality and improvements in file sizes as you restrict the colors. This is also a great example of why photos should be JPGs—the file size is comparable to the PNG-8 with 256 colors, but the quality superior.

Alpha can be one of two states:

1-bit: either a pixel is 100% opaque or 100% transparent (this is the only transparency GIFs support)

8-bit: each pixel can have a value of see-through-ness ranging from 0 (transparent) to 255 (opaque).3

This leads us to the question—which alpha should be used? As a general rule if you have a graphic that is going to only show up against one solid color or has pixel-sharp edges you should use 1-bit, this is actually not very common. If you have a graphic that has any sort of softness/fading/gradation in the transparency you will need an 8-bit alpha layer. Below is a chart that demonstrates what to expect with the different alpha layers.

You might have noticed the Matte Color from above. If you try to save an image with a range of transparency (for example the 50% opacity circle behind the binoculars) coupled with only 1-bit alpha or no alpha channel then Photoshop needs figure out how to make all the colors fully opaque. The solution is to put a solid color behind the image in order to make pixels either 100% opaque or 100% transparent. This often leads to a halo effect around your image, which can be nasty ugly unless your image is only going to live ontop of your matte color. This leads us to the question, what else should I be aware of when exporting from Photoshop?

Part 2: Saving Images from Photoshop

At some point you’re probably going to need to crack open Photoshop either when a designer hands you a PSD file or when you’re working on your own project and there isn’t a designer yet.4 But there are a ton of settings in Photoshop that get extremely overwhelming, so I’ll do my best to explain what you should pay attention to and the rest you can ignore.

Preparing to Save

This is not the most orthodox method, but it works for me and it is pretty straightforward.5 Essentially, you want to isolate each image in a new file and have no padding around the graphic and then save it. Here is the quick step by step:

  1. Select all the layers that comprise the single graphic you are cutting
  2. Copy Merged alt+⌘+e creates a new layer with all of your layers merged together. This is better than simply Merge Layer>Merge Layers | ⌘+e because it does not destroy any of the design you are working with. If your image changes appearence in this step its likely that your blending modes are causing this. Masking is probably your solution: A Complete Beginner’s Guide to Masking in Photoshop
  3. Select all Select>All | ⌘+a
  4. Cut Edit>Cut | ⌘+x
  5. New Document File>New | ⌘+n Photoshop automatically fills in the dimensions of the graphic you just cut, but change the Background Contents to Transparent.
  6. Paste Edit>Paste| ⌘+v
  7. Save for Web File>Save for Web | shift+alt+⌘+s
Now you’ve got the file completely isolated and ready to save.

Save for Web

By now you should have a good idea of when you will want to use PNG or JPG; however, in some cases the best format is unclear. For example, an illustration that doesn’t need any transparency might look fine as both a PNG-8 or a JPG—Save for Web helps you make this decision by giving you the file size of each format. Whichever format has the smallest file size while still being an acceptable quality will be the best choice. Remember though, if you need any transparency then you’ll want to use a PNG. Below is what you should see once you open up Save for Web:

What to pay attention to: JPG

Quality is up to your tastes—you’ll just need to move the slider around to see what looks acceptable while not being an overly large file. I’ve found that the sweet spot is 60-85. Beyond 85 you can’t tell the difference except in file size and below 60 things start to look bad. Definitely don’t go below 51 otherwise photoshop starts to implement an additional compression technique that really destroys quality.6

Progressive means that the JPG is downloaded in chunks and after only a little of the image has downloaded it will be displayed full size, but blurry. As more of the file is download the image will rerender with a higher degree of clarity. Without progressive JPGs need to completely download before displaying, leaving a glaring open space on your page. Having something there, even if it is a chunky and blurry version, is a better experience. I always use progressive and it generally doesn’t impact files ize much, but keep an eye on the file size in case.

Convert to sRGB - keep checked for both JPG and PNG. sRGB is the standard color space of web/monitors/printers/etc, keep checked for all .7

Metadata - unless these are photos that you want to make sure retain copyright information, I leave this at none.

Embed Color Profile - uncheck. this information gets ignored by browsers.

PNG-8

Colors - If you cut down on the colors the file size will shrink, but, for example, if you lowered the colors to 128 when there are only 120 colors it won’t make a difference on the file size. Remember, number of colors can be anything from 2-256, not just the options they give you—its an editable drop down.

Transparency - check if there is any transparency to the image, will only be 1-bit transparency.

Web Snap - remember when we had to use websafe colors only...haha, leave at 0%.

Interlaced - same idea as progressive for jpgs but for PNGs, check it.

Dithering is the process of adding noise between colors and really useful when working with limited palettes like in PNG-8's. You can see in the buttons that with the same amount of color we get much smoother gradients and defined details. Just leave dithering slammed at 100%.

PNG-24

Transparency - check if there is any transparency to the image, will be 8-bit alpha.

Everything else follow the same guidelines provided for PNG-8s.

PNG-8 + 8-bit Alpha

Here is the frustrating part of all of this, Photoshop doesn’t support the export of indexed PNGs coupled with 8-bit Alpha layers, which conveniently is the most useful combination for web images. Luckily, there is a free Mac app ImageAlpha that has a great GUI for converting these. I’m sure many of you would prefer to use the command line...and you can use PNGQuant...but I highly recommend you use a GUI. By trying out different numbers of colors to find the lowest acceptable quality you can really shave down the file sizes. Be sure to export files from Photoshop as PNG-24 before converting them otherwise you won’t get the alpha channel. Both of these options also allow you to make PNGs with alpha that degrade nicely in IE6.8

Optimization

This only applies images destine for the web and for the most part only PNGs as the gains for JPGs are negligible.9 Once you have your files exported the last step is to run them through an image optimizer. There are a ton of options for achieving this, and as I feel most comfortable with GUIs, I use ImageOptim. The command line alternative is PNGCrush. Mostly what the optimization is doing is stripping unneccessary metadata. Below you can see the gains from using optimization on various files:

Look at the savings with The Wiki Game icon in particular - we shaved 75% of the file size! That said, look closely at the pixels and you will see the dithering. Whether this acceptable or not is up to you. Also, coupled with sprites you can see how powerful this becomes.

The End.

I hope this has helped clear up any confusion you've had about images. I'd just like to note that I'm using Photoshop CS6 and the settings may be slightly different on other versions. Now go make beautiful images that are super fast to load...

Discuss this post on Hacker News

or tweet @chapolito


  1. There are actually some really cool things being done with animated GIFs called Cinemagraphs, check out: http://en.wikipedia.org/wiki/Cinemagraph
  2. PNG supports color depths up to 48-bits (aka deep color) providing you billions of different colors; however, the vast majority of consumer monitors and screens do not support more than 24-bit, so this is, for the most part, useless to us. Also note that the terms indexed and paletted can be used interchangeably.
  3. You may at times see a reference to a 32-bit PNG, this is because they are counting the 8-bit alpha with the color, commonly referred to as RGBA (8 Red, 8 Green, 8 Blue, 8 Alpha).
  4. It really bugs me when I hear of designers handing off PSD files to developers, this is the designer’s responsibility. Laziness is no excuse, we are the ones that generally have a better understanding of image formats and especially the settings of Photoshop. Its like cooking a gourmet meal and then serving it in a plastic bowl. Additionally, it forces designers to think more about how a site is going to be built, which I see too little of.
  5. There is the slice tool specifically for cutting up images, but I find it a bit frustrating to use and not very applicable for today’s sites.
  6. Flip between 50 and 51 and you will be able to see the difference. 1-50 quality use what is called chroma sub-sampling, dive deeper: http://www.impulseadventure.com/photo/chroma-subsampling.html
  7. Without converting you will be saving in Adobe RGB which is a larger spectrum but is kind of useless unless you have a special monitor or printer. Adobe RGB images will display certain reds and cyans as muddy on a normal screen.
  8. Kornel Lesiński (same dude who made ImageOptim & ImageAlpha) wrote a great article that touched on browser compatibility in more detail: http://calendar.perfplanet.com/2010/png-that-works/
  9. Bjango wrote a clear article on the way iOS makes image compression virtually useless. http://bjango.com/articles/pngcompression/