1. 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 Creating and Optimizing Web Maps

2. 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 Creating and Optimizing Web Maps (outline)

3. File Formats EPS (not for Web) Heavy Formats Used for Printing 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 Vector formats TIF (not for Web) Raster formats (exciting formats, not yet as universal as PDF)

4. 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.www.1040.com 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”?) PDF – Vector format

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. 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) Raster Images for the Web Cartographic Considerations

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. Exported as JPG (100 quality) directly from ArcView Image created without anti-aliasing

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

13. 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. Zoomed in, no anti-aliasingZoomed in, anti-aliased

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 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 Better choice for drawings, logos, graphics with few colors

16. JPEG – Joint Photographic Experts Group 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” Better choice for photographs, continuous tone images

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

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

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