Using PNG or GIF Graphics in ePublisherPro 9.3
This is a companion page to:
http://wiki.webworks.com/HelpCenter/Tips/BestQualityGraphics, "Getting Quality Graphics in Your ePublisher Output"
This page discusses some ideas for using .gif or .png graphics in an ePublisherPro 9.3 project. This page is not intended to be comprehensive but it is based on experience. The examples should be sufficient for you to apply these ideas to your project.
Because Size Matters
Both .gif and .png (discussed in more detail later) are sensible alternatives to Joint Photographic Experts Group (.jpg) format for on-line help, especially if file size is critical.
In a recent project, Engineering complained that the size of our help file (about 3MB) was close to half the size of the entire client installer (7MB). Because the client installer is downloaded from a server, it was feared that the inclusion of our help file would be a bandwidth bottleneck. We had been doing all of our screen captures in .gif format but converting them to .jpg in the help, so it made sense to try to output to .gif instead.
We found that our 3MB help file was less than 2MB if we used .gif graphics in the help output as opposed to .jpg. (As it turned out, there were many redundant or since-replaced images in the help output and eliminating those brought the help image down to an acceptable size. What follows is the result of our investigation of this issue.)
About JPG, GIF, and PNG
- Joint Photographic Experts Group (.jpg or .jpeg) is a good file format for photographs because, although it's compressed, it has a large color palette and it is ideally suited for images in which there are gradual variations of colors. However, .jpg is relatively large and it's not suited for screen captures because there tend to be artifacts (spots of color where there shouldn't be any color.)
- Graphics Interchange Format (.gif, sometimes referred to as Compuserve .gif) was developed to help remedy this situation. First, .gif images use a reduced color palette (256 colors). Second, the .gif compression algorithm is better suited to screen captures because it tends to eliminate gradual variations in colors. My understanding of this is not good but what I think happens is that in a .gif image, if a particular color (like white) is repeated, the value is recorded once and multiplied many times. In .jpg, by contrast, the value is repeated for every pixel. That's part of the reason why you get artifacts on .jpg but not on .gif images.
- The Portable Network Graphics (.png) format is intended to be a better replacement for .gif because it's at least as flexible, uses a larger color palette (up to 24-bit color compared to 256 colors for .gif), and doesn't require licensing. Note: licensing usually applies to using images in code, not to use in documentation.
Color bit depth, or color depth, refers to how many shades of colors can be represented. An 8-bit image can display 2 to the 8th power = 256 shades of color. A 24-bit image can display 2 to the 24th power = 16 million shades of color.
Notes for using .gif and .png graphics
To use .gif or .png graphics in an ePublisher Pro project, you need to be aware of the following:
.png transparency is not supported by Internet Explorer 6. Graphic transparency means that if you place an oval shape on top of a square shape, for example, that the edges of the oval aren't white. For example, suppose the oval is filled with red. Without transparency, draw a rectangle around the oval with each edge of the rectangle intersecting one point of the oval ... and fill the rectangle with white. In effect, without transparency, every shape is a rectangle, partly filled with the color you intended it to be filled with and partly filled with white. With transparency, the oval is an oval with no white behind it.
If you edit the .gif or .png graphic before importing it into FrameMaker, make sure you save it with an adaquate color palette. In the example that follows, I discuss the right and wrong ways of how to save a graphic using Adobe Illustrator CS3.
As discussed in the Wiki article cited earlier, if you use FrameMaker callouts in your .gif or .png graphic, WebWorks will re-rasterize the graphic and you might not be happy with the results.
For more information about .png, see:
http://en.wikipedia.org/wiki/Portable_Network_Graphics
Assumptions and Caveats
This page is written with the following in mind:
I tested this with ePublisher Pro 2008.1 (which is 9.3 with the Spring 2008 patch applied) and source documents authored in FrameMaker 7.2.
The output format is assumed to be WebWorks Help 5.0. If you use a different output format, different options might be available; however, the same principles should apply.
I added callouts to .gif and .png graphics using Adobe Illustrator CS3. Other graphics programs have different options for saving .png files but again, the same principles should apply. Later, I'll explain why FrameMaker callouts are problematic.
I found that some of the options for importing the graphic into FrameMaker discussed in the Wiki page shown at the beginning of this page to be unnecessary but your mileage might vary (YMMV) so be sure to thoroughly test what is on this page in your project.
ePublisherPro Project Settings
This section discusses how to set up your ePublisherPro project for .gif or .png graphics. Consider this as one example; there might well be other ways to do it.
- Start ePublisherPro and open your project.
Click View > Style Designer.
In the center pane, click Graphic Styles.
- Click the name of the graphic style to modify. Make sure you also modify the [Prototype] graphic style to use the same settings because settings for other graphic styles inherit from [Prototype]. The other graphic style I modify is Default. Depending on how your project is set up, you might need to modify different, or additional, graphic styles as well.
Click the Options tab.
- On the Options tab page, select the following:
- PNG
Option |
Choice |
Description |
By reference graphics |
Enabled |
This option and the next option were suggested by Quadralay support and by the WWP-Users user group. This option prevents WebWorks from re-rasterizing the graphic unless it has been changed after importing it (notably, by adding FrameMaker callouts to it). Graphics are moved to your Output/images folder with their original file names. |
By reference graphics use document dimensions |
Disabled |
This option and the preceding option were suggested by Quadralay support and by the WWP-Users user group. Enabled means that the graphic will re-rasterized and copied to your Output/images directory. The graphic is scaled the same as you scaled it in FrameMaker. The scaling is done in the <img> tag in the HTML code. This setting causes the graphic to be re-rasterized, which usually results in a poorer-quality image. Disabled means the graphic is copied to the Output/images folder without scaling, and the image is not re-rasterized. This means that if you have graphic that measures 70" (5096 pixels) wide, it displays in the help at 5096 pixels. Look in the HTML to confirm that the graphic dimensions are specified at its original size. If you use this setting, make sure the graphic is properly sized in its native format before you import it in FrameMaker. |
Color bit depth |
24 |
Because .png graphics support up to 24-bit, this is the default and recommended choice. If you know that all of your .png graphics use a different bit depth, make a different choice. (Bit depth refers to the number of shades of colors that can be shown by the graphic. A value of 24 means that a graphic can show 2^24 = 16 million shades of color.) |
Format |
PNG |
But obviously.... |
Generate Output |
Enabled |
But obviously.... |
Output file extension |
.png |
I don't know of a reason to make a different choice. |
- GIF
Option |
Choice |
Description |
By reference graphics |
Enabled |
This option and the next option were suggested by Quadralay support and by the WWP-Users user group. See preceding table for a description. |
By reference graphics use document dimensions |
Disabled |
This option and the preceding option were suggested by Quadralay support and by the WWP-Users user group. See preceding table for a description. |
Color bit depth |
8 |
.gif graphics are inherently 8 bit (that is, 256 colors). |
Format |
GIF |
But obviously.... |
Generate Output |
Enabled |
But obviously.... |
Output file extension |
.gif |
I don't know of a reason to make a different choice. |
On the Options tab page, make any other changes required and save the project.
Editing the Graphic
Suppose that before you import the graphic ito FrameMaker, you need to edit it because at least one of the following is true:
You add FrameMaker callouts. As discussed in the Wiki page cited at the beginning, FrameMaker callouts will cause the graphic to be re-rasterized and the results are usually not good. If the graphic is in the frame by itself without callouts, the options settings you made in the preceding section are ignored and the graphic is moved directly into your Output folder.
- You remove company-specific details, like host names or IP addresses.
- Something changed and it's easier to edit the graphic than to recapture it.
The following example uses Adobe Illustrator CS3. Consult the documentation provided with the graphic application you use for specific details. If you're hopelessly confused, e-mail me at: steven.johnson@bluecoat.com and I'll try to help.
To save the graphic in Adobe Illustrator CS3 (with handwaving about earlier CSx versions):
- Make your edits in Illustrator. It doesn't matter what format you use (.ai, .eps, .png).
Save the graphic; click File > Save For Web [& Devices]. In pre-CS versions of Illustrator, I believe you click File > Export instead.
In the Save For Web [& Devices] dialog box, on the right side, make the following choices:
- PNG
Option |
Choice |
Description |
Preset list |
By default, this is None on my system. If you already defined a preset for PNG output, select it. |
The other options that display in this area of the dialog box depend on your choice for the Preset list. This list and the other lists and fields in this area of the dialog box determine how the graphic is output. |
(other options) |
If you select PNG-24, you have only two options. |
This option means the output format is PNG and the color bit depth is 24 (that is, 16 million shades of color). This is the recommended output format. Select the Transparency check box to make the image background transparent. You must select this check box to put this graphic on top of another object that must show through the graphic from the bottom. Select the Interlaced check box to cause this graphic to load faster in a Web browser. Using some magic I don't understand, an interlaced graphic partially loads in the Web browser immediately after the user requests the page. The graphic starts blurry and blocky and fills in detail as the page loads. If you clear the check box, the graphic doesn't display on the Web page until the page has fully loaded. |
(other options) |
If you select PNG-8, you have options for the color reduction algorithm and the dither algorithm. |
This option means the output format is PNG and the color bit depth is 8 (that is, 256 colors). From the color reduction algorithm list, click Perceptual, Adaptive, or Selective. Do not select Restrictive (Web) because that results in poor-quality image. For more information about these options, consult the Illustrator on-line help. From the dither reduction algorithm list, click No Dither. Dither is basically intentionally inflicted noise so you don't want that. |
(other options) |
|
For information about all other options on the Save For Web [& Devices] dialog box, consult the Illustrator on-line help. |
- GIF
Option |
Choice |
Description |
Preset list |
By default, this is None on my system. If you already defined a preset for GIF output, select it. |
The other options that display in this area of the dialog box depend on your choice for the Preset list. This list and the other lists and fields in this area of the dialog box determine how the graphic is output. |
Optimized file format list |
GIF |
From the color reduction algorithm list, click Perceptual, Adaptive, or Selective. Do not select Restrictive (Web) because that results in poor-quality image. For more information about these options, consult the Illustrator on-line help. From the dither reduction algorithm list, click No Dither. Dither is basically intentionally inflicted noise so you don't want that. Select the Transparency check box to make the image background transparent. You must select this check box to put this graphic on top of another object that must show through the graphic from the bottom. Select the Interlaced check box to cause this graphic to load faster in a Web browser. Using some magic I don't understand, an interlaced graphic partially loads in the Web browser immediately after the user requests the page. The graphic starts blurry and blocky and fills in detail as the page loads. If you clear the check box, the graphic doesn't display on the Web page until the page has fully loaded. |
(other options) |
|
For information about all other options on the Save For Web [& Devices] dialog box, consult the Illustrator on-line help. |
Follow the prompts on your screen to save the .gif or .png graphic.
Finishing Up
To finish up and test the output:
In FrameMaker, click File > Import > File.
At the bottom of the dialog box, click Import by Reference.
- Locate the graphic to import.
Click Import.
In the Imported Graphic Scaling dialog box, select an appropriate value. Tip: if you enter in the Custom dpi field the same dpi at which the graphic was saved, it imports at 1:1. In other words, if a graphic is 4" x 5" at 72 dpi and you enter 72 in the Custom dpi field, the graphic is 4" x 5" after you import it.
Delete all graphics from the Output/help-project-name/images folder in your help output.
- After importing the graphics, generate your help project.
- If any graphics still look bad, verify all of the following:
- There are no Frame callouts in the graphic frame.
- Try changing the "by reference" options in the ePublisherPro project for your graphic styles. Change them from Enabled to Disabled or vice versa and generate the project again.
- You saved the graphic with the correct color reduction options.
You didn't distort the graphic when you imported it into FrameMaker.
If all else fails, try the tips in the Wiki page cited at the beginning of this page.