JPGs Can’t Handle Transparency, So Save As PNG Instead

The title of this post says everything.

JPGs Can’t Handle Transparency, So Use A PNG Instead

Earlier today I got lost in the details while using The GIMP to create a couple icons for a new WordPress theme. I kept seeing this colored background for an icon that I knew just wasn’t there. I could see that the image had only one layer and no background layer in the layers dialog of The GIMP, but every time I saved the image and viewed the result in my browser I saw the colored background.

This drove me mad until I spotted the obvious mistake. I had been saving the file that I wanted to have a transparent background as a jpg file. Since jpg files can’t handle transparency The GIMP tries to accommodate by exporting the file as a .jpg. Unfortunately, the current background color is used to fill in the transparent parts of the image, so you end up with a non-transparent image.

To make a transparent image or an image with a transparent background, save the file as a png file. PNG files can handle transparency, so once I saved my image as a .png the colored background went away.

One caveat here is that image files with the extension .png are not recognized by older browsers so the colored background will show through and the image won’t be transparent.