Browser Preview

What it does

Browser Preview shows how an image will look in a web browser under the influence of various kinds of compression and computer monitors.

How to install

To use this software, you need a paint program which accepts standard Photoshop 3.0 plugins.

Just put the plug-in filter into the folder where your paint program expects to find it. If you have Photoshop, the folder is Photoshop:Plugins:Filters or Photoshop:Plug-ins. You must restart Photoshop before it will notice the new plug-in. It will appear in the menus as Filters->Flaming Pear->Browser Preview.

Most other paint programs follow a similar scheme.

If you have Paint Shop Pro: you have to create a new folder, put the plug-in filter into it, and then tell PSP to look there. In PSP's menus, choose File-> Preferences->General Program Preferences (PSP versions 5 and 6) or File->Preferences->File Locations (PSP version 7). Next, click the Plug-in Filters tab. Use a "Browse" button to choose the folder. The plugin will appear in the menus as Image->Plug-in Filters->Flaming Pear->Browser Preview.

Controls

Do you ever wonder what your graphics are going to look like on another computer? Do you spend lots of time transferring graphics to different platforms so that you can verify their quality?

Boy, do we have a filter for you!

The Browser Preview filter shows you how a graphic will look in any browser or platform. Before you save it to a GIF or JPEG file.

The following paragraphs describe the interface. More detailed information (and tips on reducing the size of your graphics) are presented in the primer.

When you invoke Browser Preview, a dialog box will appear:

Main controls
If you just want to see some effects quickly, click the dice button until you see something you like; then click OK. Using the dice is the easiest way to use Browser Preview. If you want to hand-tune your own effects, it helps to learn the controls, which are explained below.		dice

Main controls
Previews There are two previews. The one on the left is a "before" and the one on the right is an "after", like those pictures that show people losing weight. The difference here being that the picture probably looks worse after losing a few kilobytes. The preview on the right (the "browser preview") is affected by the graphics settings (GIF or JPEG) as well as the browser settings (Macintosh or Windows). Either preview can be dragged to a new location within the current selection. .		preview of GIF appearance
Platform There are many different ways a person can view your web page. They might be on a Mac or they might be on a PC. They may have a really hot graphics card or they may be plodding along in 256 colors. The controls to the right of the browser preview allow you to check many different browser configurations without having to leave your paint program or adjust your display settings. Monitors connected to a Macintosh typically display images brighter than a monitor connected to a Windows machine. The amount of difference varies, so the popup menu lets you check it out for various hypothetical monitors. .		brighter dimmer a JPEG viewed at 256 colors
No compression If you want to check an existing GIF or JPEG graphic, set the preview mode to no compression. This will display the graphic as it would appear in the browser. If you want to display a GIF file, you will need to switch the image mode to RGB before you can start the filter.
The bar graphs The two bar graphs show how much the original was compressed. The numbers to the right of the graph show the size of the graphic as a percentage of the original 24-bit data. An estimate of the file size is shown below the bar graph. If you move the preview to another part of the selection, the bar graphs are reset. If you switch to the other graphic (GIF or JPEG) the graphs will be recalculated.
JPEG controls When you click on the JPEG radio button, two things happen. First, the original image is compressed and displayed in the Browser window. Then a graph showing the amount of compression is displayed. The most important setting is the Quality. This set the amount of compression for the preview. By default, the quality settings are the same as those used in Photoshop. The Based on image checkbox examines the data in the image and sets the quality accordingly. This often leads to smaller files. The lowest value (zero) will give you the smallest graphic. Photoshop defaults to a setting equivalent to 80. You can normally get acceptable results with values between 30 and 50.		JPEG
GIF controls You can also click on the GIF radio button. The image is compressed and displayed in the browser window. A bar graph is also generated. The controls for a GIF graphic are: • Palette • Colors • Dither • Web Safe The Palette settings allow you to pick the colors that will be used in the graphic. The palette choices are: • System (Macintosh) • System (Windows) • Web • Black & White • Adaptive The first three palettes all use 256 colors and will create an 8-bit GIF file. The state of the Web Safe checkbox is updated to remind you that the Web and Black & White palettes both use the 216 web safe colors. The Dither checkbox dithers the image using the colors of the current palette. Dithering an image will improve the quality of the graphic at the expense of increased size. Watch the graph and the browser preview as you adjust this control. When you select the Adaptive palette, you can select any number of Colors. Your colors setting plays a big part in determining how large your file will be. Fewer colors = smaller files. The graph is updated when you change the number of colors so you can see how the number of colors affects the image size. Of course, the browser preview is updated to show you how the colors will look on-screen. Smaller files = less beauty. It's important to note that the Adaptive palette created by Browser Preview is different than the one created by Photoshop. It does not shift Web Safe colors, even if the Web Safe control is turned off. If you've got a FF33CC in your original image, it will be set as FF33CC in the palette (assuming you have enough colors to do so). When you are using the adaptive palette, you can also adjust the Web Safe checkbox. The original image is checked to see how many web safe colors are used and the most popular colors are put into the palette. The Wider range checkbox will shift the colors to a more even range of values. The Wider range checkbox is also used if you aren't using Web Safe colors. When it is selected, the colors are chosen by the intensity at which your eye sees them. Otherwise, the numerical values of the colors are used. Normally, the colors of the entire selection are used when the adaptive palette is being created. If you enable the Preview Only checkbox, only the colors in the current preview are used. This is useful for seeing how many colors there are in a small part of the image. The checkbox is reset when you scroll the preview to another part of the image.		colors from preview only colors from whole selection no dither
OK button If you are working with GIF compression, you can use the OK button to apply the current palette to the Photoshop selection. Why would you want to do this? One word: touch-up When reducing graphics for the web, there are many times when you'd like to get rid of a couple of stray pixels. If you apply the palette before saving the image, you can clean up these pixels. Make sure to use the eyedropper tool to select colors (so that you stay within the palette.) It's also important to avoid using anti-aliased tools like the brush (use the pencil instead.)

Other controls
Load preset Browser Preview comes with some presets, which are files containing settings. To load one, click this button and browse for a preset file. Save preset When you make an effect you like, click this button to save the settings in a file.  Undo backs up one step. OK  Applies the effect to your image. Cancel  Dismisses the filter, and leaves the image unchanged.		dice load preset (top) and save preset   undo

Version History Version 1.0 March 2003 The first release in this form. The Furbo Filters were orginally developed by Craig Hockenberry. This software is based in part on the work of the Independent JPEG Group. It is also based in part on the gd 1.2 library of the Quest Protein Database Center, Cold Spring Harbor Labs.

Questions

Answers to common technical questions appear on the support page.

For bug reports and technical questions about the software, please write to support@flamingpear.com .