JPGs and PNGs are both compressed file formats. I tend to use each of them exclusively for the web. But there are occasions when you might need to send a high-resolution JPG to a someone who will convert it to a TIFF, PDF, or PSD format for print purposes. Digital cameras, for instance, save the file in JPG format.
JPGs are terrific for continuous tone images, such as photographs of people, places, and things, as well as scans of artwork. The images have a full range of color or shades of black that extend out to the edge of a rectangular or square shape. If you’re using the JPG for print, make sure the resolution is at least 300 ppi. If it is intended for the web, the resolution can be reduced to 72 ppi.
You make the switch to a PNG file when you want a transparent background behind an image that has an irregular shape. Logos, for example, are often comprised of graphics with unusual shapes. JPGs fill the background with a color. PNGs leave the background empty and allow for transparency.
Masking the Background in Photoshop
When you open a logo that’s been saved as a JPG, the shape will sit inside a rectangle with a white background. You need to mask out the background in order to retain the transparency around the shape. If you simply SAVE AS a PNG, the white background will still be there in the PNG file. So, here’s what to do to get rid of the background:
- Select the magic wand tool.
- In the top control bar, go to Sample Size and select 3×3 average.
- Tolerance setting can be 32 to start. Adjust if necessary (if the magic wand tool selects more or fewer pixels than you need).
- Click on the white background to select it.
- Double-click the background layer to allow editing.
- Hit the DELETE key on your keyboard. The checkerboard background indicates that the pixels have been deleted and the selected area is now transparent.
NOTE: If you want to do “non-destructive” editing, inverse the selection (SELECT > INVERSE) and create a layer mask instead (LAYER > LAYER MASK > REVEAL SELECTION). With masks, you don’t permanently eliminate the pixels you’ve selected; you can modify the mask and thus fine-tune the selection.
Save For Web
The FILE Menu > SAVE AS option is not the best way to save a file for the web because it doesn’t optimize the image very well. You get better results when using the legacy SAVE FOR WEB setting, which provides many more configuration features.
- FILE Menu > EXPORT > SAVE FOR WEB (Legacy).
- In the Preset Dropdown Menu, select PNG-24, which gives a nice range of color.
- Select the box next to Transparency.
- Click the SAVE button.
- Use the same name as the original JPG or whatever your naming convention is.
- FORMAT: Image Only.
- SETTINGS: Default.
- Click the SAVE button.
If you prefer, you can watch the video tutorial I made that shows you how to change a JPG file to a PNG file (and explains why you would want to do that):