In the November issue of Recognition Review, I discussed the process for saving JPEG files from either CorelDRAW or Corel PHOTO-PAINT. If you got the impression that I’m not a big fan of JPEG, you are correct. While it is typically the best way to put a photograph on the web, it’s pretty lousy for most everything else. Sadly, it is popular, and most users don’t realize there is a better format.
The ABC of PNG
PNG Should Be Your New Favorite File Format
BY FOSTER D. COBURN III | COREL CONCEPTS
(Originally published in the January 2015 issue of Recognition Review.)
In the November issue of Recognition Review, I discussed the process for saving JPEG files from either CorelDRAW or Corel PHOTO-PAINT. If you got the impression that I’m not a big fan of JPEG, you are correct. While it is typically the best way to put a photograph on the web, it’s pretty lousy for most everything else. Sadly, it is popular, and most users don’t realize there is a better format.
The PNG format is a far superior choice for a wide variety of projects. Yes, you can also use it to put a photo on a website, though it will have a larger file size than JPEG. Once you understand the power and flexibility of the PNG format, you’ll use it more often.
BENEFITS OF PNG VS. JPEG
PNG stands for “portable network graphics” though designers often joke that it’s an acronym for “PNG, Not GIF” since it largely has replaced the need for the GIF file format.
The biggest benefit of a PNG file over JPEG is that it is not a lossy format. When you save a PNG file, it will be exactly the same when you open it. JPEG files degrade every time you save. This typically means a PNG file will take up more space on your drive, but drive space is cheap compared to permanent file degradation.
Should your graphic have larger areas of solid colors, the PNG file may be smaller than the JPEG while also looking much better. The other big advantage of PNG files is they support for transparency where JPEG has no transparency support at all. If you want your bitmap to have an irregular shape or a drop shadow with partial transparency, you’ll need to save it in PNG format. Files with transparency allow you to use the file in CorelDRAW, Microsoft Office, Adobe InDesign, and online while maintaining the transparent areas. In short, it is a format that offers a lot of flexibility!
All of the graphics for this article were supplied to Recognition Review in PNG format. When in doubt about the format to use, think PNG first.
SAVING PNG WITH TRANSPARENCY
Before we can think about saving a PNG file with transparency, the file must actually have transparent areas. If you think just saving a file with a “white box” around a graphic will make that white area transparent, it won’t.
If you have a graphic in CorelDRAW that is irregularly shaped (not a filled rectangle around it), then exporting the file to PNG format can keep the irregular shape via transparency. Should you have a drop shadow or some other feature that involves transparency, that transparency can be maintained as part of the export.
This also is true of files in Corel PHOTO-PAINT. If you already have transparency in the file, it can be maintained when you save the file to PNG format. But if you need to “cut out” the graphic, you’ll need to do that using masking tools and/or objects before you export. If you don’t see transparency on your screen, then you likely won’t get transparency when you save to PNG.
Once you have the file designed with the transparent areas you desire, select File | Export from CorelDRAW or File | Save As from Corel PHOTO-PAINT to start the process. From the dialog box that appears, choose the PNG file format and check the Selected only checkbox. It is important that you have selected what you want to export in CorelDRAW before you start the export process if you check the “Selected only” checkbox. Otherwise everything in the file will be exported, which could include items that aren’t part of the desired graphic.
This brings us to the “Export to PNG” dialog box shown in FIGURE 1. If you want transparency, it is best to select RGB Color as the Color mode, and you must check the Transparency checkbox (in the red box). Once you have those settings, you will want to keep “Anti-aliased” checked, but it is best to leave “Embed color profile” and “Interlaced” unchecked for most files. Embedding the color profile is important if the file is to be printed and the colors have to match as closely as possible. “Interlaced” is only of value for smaller files to be put on a Web page.
Transformation may be perfect if you created in the file in Corel PHOTO-PAINT to exact dimensions. It could also be perfect coming from CorelDRAW if you designed in pixels. What is important is that you do not use inches (or metric measurements); always work in pixels. The resolution isn’t terribly important if you have the perfect number of pixels.
PALETTED PNG FILES ARE SMALLER
On the quality side of things, PNG benefits from support for 24-bit color (heck, it even supports 48-bit) and the ability to save files with transparency. While those features are great, they do make files larger. PNG also allows you to save files with a limited palette (just like GIF) so that file size is smaller.
When saving a file in a paletted mode, it is very important that the file will still look good with a small number of colors. If we are talking about a photograph, the results will be lousy. However, illustrations you create in CorelDRAW or screenshot bitmaps often save to a limited palette quite well.
As an example, let’s look at a screenshot of a font’s character set as shown in FIGURE 2. If the file is saved with a 24-bit palette, the file is 43.0 KB. That is a pretty small file, but files that are downloaded thousands of times on the Internet should be as small as possible so they download faster and don’t eat up unnecessary bandwidth.
Look carefully at the file and you can see it uses a fairly low number of colors. Therefore when saving to PNG, we are going to use a few different choices in the “Export to PNG” dialog box as shown in FIGURE 3. Instead of “RGB Color (24-bit),” we’re going to select “Paletted (8-bit).” There are various choices, and I suggest you choose “Adaptive for the Color” palette. Below the palette is a drop-down where you can choose the number of colors. Ideally you want the smallest number of colors where the graphic still looks good. It is your eyes that determine what is good. For the font character chart, I felt 32 colors still looked great. The result was a 22.7 KB file—just over half the size of the original. Multiply the size difference by thousands of downloads, and you’ve got a pretty big number and the graphic still looks great.
MAKING THE RIGHT CHOICE
Going forward, look carefully at the file format you choose when you save bitmaps. JPEG can still be the best answer for photos going on the Web as long as you save the originals in a non-lossy format. Now that you’ve learned more about the PNG format, it should be the go-to format for many bitmaps you save due to its quality and flexibility. If you are worried about compatibility, you are probably using ancient software as it is rare that software made in the last decade would have issues with PNG files.
Foster D. Coburn III is the author of 13 books on CorelDRAW, the latest being CorelDRAW X6 Unleashed. He also writes the free Graphics Unleashed Blog and provides fonts, artwork and add-ons of interest to designers through the Graphics Unleashed site at www.unleash.com. Connect with Graphics Unleashed on Facebook and follow Foster on Twitter at @fostercoburn.