Dan Sadler daniel.sadler@montgomerycountymd.gov Montgomery County Department of Information Systems & Telecommunicat

1. Creating and Optimizing Web Maps Dan Sadler daniel.sadler@montgomerycountymd.gov Montgomery County Department of Information Systems & Telecommunications - GIS Team (DIST-GIS) Map Gallery and today’s presentation on the Web: http://www.montgomerycountymd.gov

2. Creating and Optimizing Web Maps (outline) • Web graphics file formats – especially GIF, JPG, and PDF • Special cartographic considerations when using Web raster formats • Describe how to use GIS software with graphics software to convert map layouts into attractive, legible, & useful Web graphics • Photoshop in action

3. EPS (not for Web) File Formats Raster formats Vector formats Heavy Formats Used for Printing • TIF (not for Web) Compressed Formats Used on the Web • GIF (drawings) • JPG (photographs) • PNG-8 and PNG–24 • (format ahead of its time, presently inconsistent browser support) • PDF (most universal vector format for Web, best print control) • SWF • SVG (exciting formats, not yet as universal as PDF)

4. PDF – Vector format • Originally created as an attempt at the “paperless office” concept • Adobe Acrobat allows PDF’s to be created from any application • Free Acrobat Reader allows PDF viewing and printing and comes with browser plug-in • Many users are familiar with PDF format from downloading government forms (www.1040.com), online brochures, etc, and seeing links to free download site. • Fonts can be embedded in the PDF document • – IMPORTANT FOR MAPS • With PDF format, users are able to print many copies of the same document from any printer (“paperless office”?)

5. Raster Images for the Web Cartographic Considerations • Keep your GIS work digital – don’t print and scan! • Web users will have different screen area settings (640x480, 800x600, 1024x768) • – recommend max width of standalone image 640 pixels • To avoid browser dither (pixels of different colors mixing to simulate a color outside the browser’s palette), either • create your map using 216-web-color palette OR • - use an image editor with Web snap feature

6. Raster Images for the Web Cartographic Considerations • Browsers will display and print raster graphics at 72 dpi – whether or not you save at a higher resolution • Don’t worry about print quality (72 dpi isn’t great quality) – provide vector format (PDF) instead for that purpose • Keep it simple - Don’t try to show too much detail on a raster Web image (use vector PDF if more detail is needed) • (example of too much detail shown on next slide)

9. Detail is limited on a raster image • Keep the map simple: Display only what is reasonably legible on a single screen • Rule of thumb: a map that prints 8.5” x 11” and uses large text should convert nicely • Boldface type helps bring out text

10. Adobe Photoshop Raster Image Editing Software • Anti-aliasing feature improves legibility when converting from vector to raster • Larger assortment of file formats and options (especially GIF format) • Advanced Web image capabilities offered by ImageReady, a “sister-program” packaged with Photoshop

11. Image created without anti-aliasing Exported as JPG (100 quality) directly from ArcView

12. Image created with anti-aliasing Exported as EPS from ArcView, then opened in Photoshop

13. Zoomed in, no anti-aliasing Zoomed in, anti-aliased Anti-aliasing makes images that are made out of pixels appear as though they are not made out of pixels when viewed at full size. ArcView does not support anti-aliasing when rendering your work.

14. Choice of Image Format • Graphic formats used for printing (such as TIF) can be large enough to hold lots of information about an image, but Web formats must sacrifice some image information for the sake of file size to be small enough to download quickly • GIF and JPG make different sacrifices for the sake of file size that make them appropriate for different types of graphics

15. GIF – Graphic Interchange Format Better choice for drawings, logos, graphics with few colors • Reduces number of available colors to 256 or fewer (“Indexed color”) • Stores data efficiently for solid color areas of a graphic • LZW compression – UNISYS royalty makes software makers reluctant to support export to GIF • “Lossless” ArcView 3.x, ArcInfo 7.x, and ArcGIS 8.x do not support export to GIF format

16. JPEG – Joint Photographic Experts Group Better choice for photographs, continuous tone images • Retains support for millions of colors, but… • Algorithms selectively discard image data based on what human eyes are least likely to notice missing from a photographic scene • Creates a trade-off between quality and file size • “Lossy”

17. Banding of colors on GIF More true-life color on JPG

18. Solid color areas on GIF remain solid Spots or “artifacts” appear on JPG

19. Converting a Map created using GIS software to GIF format Step 1: Export the map in a vector format (EPS or PDF) Step 2: Open the map in Photoshop, adjust pixel size, resolution, and anti-aliasing on the fly Step 3: Save GIF with Photoshop’s “Save for Web” function

21. Export as Vector (PDF format) from ArcGIS 8

22. Convert to vector graphic (EPS) from ArcInfo 7.x prompt: NOTE: Any fonts used to create a map in a UNIX program will be substituted with a font on the PC when the file is opened in Photoshop.

23. Converting a Map created using GIS software to GIF Format Step 1: Export the map in a vector format (EPS or PDF) Step 2: Open the map in Photoshop, adjust pixel size, resolution, and anti-aliasing on the fly Step 3: Save GIF with Photoshop’s “Save for Web” function