[Up] [Next]

How to Convert Maple Plots into Web Images: Part 1

An important part of using Maple to prepare materials for World Wide Web distribution is learning how to properly convert Maple plots into bitmap image files and then integrate those images effectively into Web pages. First, some background[2] on the two most common types of bitmap image files (GIF and JPEG) that can be viewed in Web browsers.

GIF

The Graphic Interchange Format (GIF) is a bitmapped graphic file format developed by CompuServe in the 1980s. In the 1990s this format was adopted as one of the main supported graphics formats for Web browsers because of its popularity and efficiency. Much of that popularity vanished almost overnight when Unisys and CompuServe announced[1] in December 1994 that, due to a previous copyright held by Unisys on the compression technology used in GIF files, all commercial software companies incorporating GIF support in their (as of 1995) new products would be required to pay licensing fees. This created an immediate and immense furor, and though CompuServe later announced its intention to try and come up with a new and improved copyright-free GIF format, the damage was done and many software companies began dropping GIF support from their products. This is why you will find that the GIF output support previously available in Maple V Release 3 is now gone from Maple V Release 4.

GIF files store pixels as 8-bit values that index a 24-bit colour palette containing at most 256 entries. The collection of pixels representing the image are then compressed using a lossless compressed scheme called LZW (for Lempel Zev Welch). Lossless compression means that the pixels are stored more efficiently but in a way that perfectly preserves the image content. How efficient the compresson actually is depends on how variable the pixel values are: the more homogeneous the image, the greater the degree of compression. All of this means that GIF files are most effective for storing modest-size images with low noise content and a relatively small number of distinct colours: not unreasonable expectations for many Web images.

There is an easy way to save Maple plots as GIF images with Maple V Release 3. All you need to do is use the Maple plotdevice routine to specify the form of output file (whose name should end in ".gif" so Web servers and browsers will know what format the file is in) to be generated and the size of the bitmap you want to produce:

    plotsetup(gif, plotoutput=`sinplot.gif`,
        plotoptions=`height=216,width=288`);
    plot3d(sin(x*y),x=-Pi..Pi,y=-Pi..Pi,
        style=patch,scaling=constrained);

To restore Maple V Release 3 to displaying plots normally without generating a GIF file:

    plotsetup(x11);

If you use MVR3 on a Macintosh or Windows machine, replace the name "x11" with "mac" or "win", respectively.

There are some limitations to the GIF output that can be generated by MVR3. The four most important limitations for you to be aware of are:

  1. You can't specify the palette that the GIF file will contain.
  2. Text rasterization (for objects like axes labels) is generally of poor quality.
  3. There are a variety of GIF extensions (like background transparency) that the Maple gif plot device doesn't support.
  4. Some Maple plot options (like line thickness) have no effect when generating GIF output.

JPEG

JPEG graphics files are based on compression schemes developed by the Joint Photographic Experts Group[3] for storing full-colour photographs. JPEG images can store more colours than GIF files, since each pixel is represented by its own colour value, and that colour representation can be chosen to suite the colour model most appropriate for a given application (eg: 24-bit colour values for RGB images, or 32-bit colour values for CMYK images). All this colour information and typically large photographic image size could result in enormous file sizes, so the JPEG schemes deal with this problem by implementing a form of lossy compression. When producing the JPEG file corresponding to an image, you can specify how much image degradation you are willing to accept to improve compression; as the quality of the image is reduced, the ability to compress non-homogeneous (particularly smooth-transition and noisy) pixel content increases.

An important limitation of JPEG that you must keep in mind is that since it was designed to deal with the characteristics of scanned photographs, it doesn't always deal well with the sharp edges and strong contrasts typical of many computer-generated images. Unusual distortions of an image are called compression artifacts, and are more likely to appear as more lossy degrees of compression are chosen.

Saving Maple plots as JPEG files (whose name should end in ".jpg") with Maple V Release 4 is almost as easy as producing GIF images was in MVR3. The only difficulty comes from the need to work around a minor bug in the current release of MVR4 that prevents the plotdevice command from easily finding the jpeg plot device driver:

    eval(plotsetup):
    `plotsetup/devices`[jpeg]:=[jpeg,`plot.jpg`,[],[],``]:
    plotsetup(jpeg, plotoutput=`sinplot.jpg`,
        plotoptions=`height=216,width=288`);
    plot3d(sin(x*y),x=-Pi..Pi,y=-Pi..Pi,
        style=patch,scaling=constrained);

To restore Maple V Release 4 to displaying plots normally, no matter what platform you are using, just do:

    plotsetup(default);

There are some limitations to the JPEG output that can be generated by Maple. The three key limitations for you to keep in mind are:

  1. You can't specify how lossy the degree of JPEG compression will be.
  2. Text rasterization (for objects like axes labels) is generally of poor quality.
  3. Some Maple plot options (like line thickness) have no effect when generating JPEG output.

Images in Web Pages

Once you have turned your Maple plots into bitmap image files, the last step is to edit the content of your HTML files to incorporate those bitmaps as inline images. The HTML markup for including a GIF file is:

    <img src="sinplot.gif" height=216 width=288>
and similarly for JPEG images:
    <img src="sinplot.jpg" height=216 width=288>

There are three things you should learn from these HTML fragments:

  1. It is important to use the approprate extension (either ".gif" or ".jpg") on the filename of an image. File extensions are part of the process used by Web servers and Web browsers to determine what type of file is being viewed and how it should be displayed.
  2. While these features are only optional and not supported by all Web browsers, it is a very good idea to specify the height and width attributes of the image being displayed. These are now considered part of HTML 3[4], and people using Web browsers that do support these attributes will get to see your page much sooner even if the inline image itself takes a long time to load. By specifing the height and width you let many browsers reserve space for displaying the image so that the browser can continue on with loading and displaying the rest of the page while the image itself is being transmitted by a Web server. If you don't use these attributes then the browser may wait to decide how big the image is until it has been completely transferred. If a browser doesn't support the height and width attributes of an img tag, it will simply ignore them and the result will be no worse than if those attributes weren't provided in the first place.
  3. If you use height and width values that actually differ from the real size of the image being transferred, then (assuming the browser supports these attributes in the first place) the image will be scaled to fit into an area of the size you specified.

In the next how-to article we will continue by discussing how different browsers and computing environments can cause different renderings of bitmaps, and describe how to produce robust and professional-looking plot images by using software tools like Adobe Illustrator and Adobe Photoshop to improve on the plot output that Maple produces.

References

1
League for Programming Freedom, Unisys/CompuServe GIF Controversy, http://www.lpf.org/Patents/Gif/Gif.html (visited July 1, 1996).
2
Patrick J. Lynch, Creating Graphics for the World Wide Web: File Formats for Web Pages, Syllabus, 9:4, pp 46-48, (1996).
3
Independent JPEG Group, JPEG image compression FAQ, part 1/2, ftp://rtfm.mit.edu/pub/usenet-by-hierarchy/ comp/graphics/misc/ JPEG_image_compression_FAQ,_part_1_2 (June 9, 1996).
4
Ian S. Graham, The HTML Sourcebook, 2nd ed., A Complete Guide to HTML 3.0, J. Wiley and Sons, New York, (1996).

MIT home page HTML written and maintained by Reid M. Pinchback (reidmp@mit.edu)
Last modified 96/11/05; copyright © 1996 MIT