2. copyright Penny McIntire, 2010 Graphics Part I “A picture is worth a thousand words, but it uses up three thousand times the memory.”

3. 2 copyright Penny McIntire, 2010 Graphics Graphics are great fun and very seductive. –Can convey information quickly and memorably. –Make the site more appealing. Still, “Content is King” and graphics are secondary for most sites. The graphics should draw the visitor’s attention to the text, not distract from it. Golden rule: faster is better.

4. 3 copyright Penny McIntire, 2010 Principles of Graphics: Avoid Gratuitous Graphics Graphics, along with audio and video files, are the biggest consumers of bandwidth. If visitors are forced to wait, they will leave. Use only graphics that give you “bang for the buck” – 50 navigational buttons plus their 50 rollover images often won’t qualify.

5. 4 copyright Penny McIntire, 2010 Principles of Graphics: Save in the Appropriate Format If saved improperly, the image file may be larger than necessary, and the image itself may not be of high quality. More on image formats later in this topic.

6. 5 copyright Penny McIntire, 2010 Principles of Graphics: Reuse Images The first time an image is referenced, it’s downloaded into the browser’s cache. –From then on, it is retrieved from the local cache, which translates to fast. –That’s true for navigational images/bars, too. Each reference must use the same URL; two copies, each retrieved from a different directory on the server, are two different images to the browser.

7. 6 copyright Penny McIntire, 2010 Principles of Graphics: Reuse Images Reusing images also gives a consistent look to the site.

8. 7 copyright Penny McIntire, 2010 Principles of Graphics: Reduce Image Size All else being equal, smaller images use fewer pixels which means a smaller file size. Crop (cut out) any extraneous background. Consider employing thumbnails – small versions of images that link to larger versions, if the visitor wants to see them.

9. 8 copyright Penny McIntire, 2010 Principles of Graphics: Reduce Image Size Large graphics files are acceptable in two situations: –Sites where the graphics themselves are the main attraction, such as an art gallery, a photography site, a games site, or a fan page. –The site is on an intranet, with a very fast connection.

10. 9 copyright Penny McIntire, 2010 Principles of Graphics: Use Height and Width Appropriately Do fill in the exact height and width parms for every image, rather than leaving blank. –Saves time because the browser doesn’t have to do any calculations. –The browser allocates space for the image but actually loads it after all text is loaded. That way, text displays while the images are downloading, and visitors can go ahead and click on text links before the images download. Otherwise, the browser keeps rearranging text on the fly as it downloads images.

11. 10 copyright Penny McIntire, 2010 Principles of Graphics: Use Height and Width Appropriately Don’t use height and width to resize an image: –Increasing or decreasing the image in the browser degrades quality dramatically. –Decreasing the image size displays a smaller picture without decreasing download time. –Instead, resize images in an image editor, which can do a much better job than the browser. –You will lose points if you resize an image in the browser, even by a single pixel.

12. 11 copyright Penny McIntire, 2010 Principles of Graphics: Always Include the alt Attribute Used by screen readers for the visually impaired. –Use the empty alt attribute, alt="", for images with no informational content. Displays when an image link is broken. Also, use the title attribute for rollover to further clarify the links. Both (?) can elevate a site’s rankings for search words.

13. 12 copyright Penny McIntire, 2010 Terminology Pixel: a single dot of color on the screen, made up of some combination of RGB (red/green/blue).

14. 13 copyright Penny McIntire, 2010 Terminology Content graphics: graphs, charts, maps, pictures of products, screen prints, etc. Thematic graphics: logos, decorative photos, borders, and embellishments. Navigational graphics: clickable buttons, clickable thumbnails, standalone icons, or icons adjacent to text links.

15. 14 copyright Penny McIntire, 2010 Color Depth Color depth: the number of colors in an image. –The more colors the image uses, the more colors that the image needs to keep track of, and the more bits that are needed to store each pixel. –A black and white image needs only one bit per pixel – that bit is either on or off, for white or black.

16. 15 copyright Penny McIntire, 2010 Color Depth –An 8-bit image uses eight bits per pixel and can use up to 256 colors (the largest number represented in 8 bits). –A 24-bit image uses 24 bits per pixel and can pick a subset of the 2 24 /16.8 million colors that are possible. A 1600x1200 window holds 1.9 million pixels, so even at one color per pixel, you couldn’t use all 16.8 million colors.

17. 16 copyright Penny McIntire, 2010 Color Depth Avoid higher color depths when you can because they can greatly increase file size without necessarily increasing the quality of the image. More on this later, with examples.

18. 17 copyright Penny McIntire, 2010 Anti-aliasing Anti-aliasing: smoothing the jagged appearance of the diagonal lines in a bitmapped image. no anti-aliasinganti-aliasing

19. 18 copyright Penny McIntire, 2010 Anti-aliasing Does a great job of smoothing the out the “jaggies” in appropriate circumstances. For an image with a transparent background, you must specify the appropriate matte color on the “Optimize” window, or you will end up with a halo effect around any diagonal line on the graphic...

20. 19 copyright Penny McIntire, 2010 Anti-aliasing Halo white matte (the default) on white background white matte (the default) on black background

21. 20 copyright Penny McIntire, 2010 Anti-aliasing To specify anti-aliasing in Fireworks, –set type aliasing in the text editor window. “strong” for large type “smooth” for large to medium type “crisp” for medium to small type “none” for smallest type –set line aliasing in the stroke window, and fill aliasing in the fill window. “hard” (no aliasing) or soft (anti-aliasing turned on)

22. 21 copyright Penny McIntire, 2010 Transparency Faked “transparency”: the image is created and saved on a background to match the web page background. –Not always a perfect match on older computers or on jpegs.

23. 22 copyright Penny McIntire, 2010 Transparency Real transparency: the image background is transparent, so the image floats on the web page background color. –Especially useful for patterned web page backgrounds. –Use the web page background color as the image background color while creating the image, but turn on transparency before saving the image to the web.

24. 23 copyright Penny McIntire, 2010 Transparency Must turn on transparency in the “Optimize” panel of Fireworks and Photoshop, as well as set the matte color.

25. 24 copyright Penny McIntire, 2010 Transparency If a patterned background color, what color for the matte? – Most prevalent color? – A mid-tone? – Turn off anti-aliasing if no good solution.

26. 25 copyright Penny McIntire, 2010 Transparency Two types of transparency: –Index transparency: binary transparency, either fully on or fully off. Supported by all browsers. –Alpha channel transparency: 256 levels of transparency, from fully opaque to fully transparent. Only in.png files, and still iffy in some recent browsers, although they claim to support it.

27. 26 copyright Penny McIntire, 2010 Interlacing Normally, an image appears as a line- by-line download:

28. 27 copyright Penny McIntire, 2010 Interlacing: visitors see a complete but low-resolution, very pixelated version that is incrementally replaced by higher resolution versions. Interlacing

29. 28 copyright Penny McIntire, 2010 Interlacing Interlacing may actually increase the download time a bit, but visitors may perceive it as faster. No strong consensus either way, but it doesn’t seem to be used that much these days. –Perhaps because faster internet connections makes it a moot point?

30. 29 copyright Penny McIntire, 2010 Aspect Ratio Aspect Ratio: Ratio of width to height. Never change the aspect ratio of a photo – it distorts the image.

31. 30 copyright Penny McIntire, 2010 Aspect Ratio Bad examples:

32. 31 copyright Penny McIntire, 2010 Aspect Ratio Good examples of resizing: Resize, maintaining aspect ratio Crop to eliminate unnecessary background

33. 32 copyright Penny McIntire, 2010 Aspect Ratio Examples of creative cropping: http://www.mcwade.com/DesignTalk/

34. 33 copyright Penny McIntire, 2010 General Types of Graphics Two types of images: –Bitmap /raster graphics –Vector graphics

35. 34 copyright Penny McIntire, 2010 Bitmap/Raster Graphics Bitmap /raster graphics are made up of individual pixels mapped to 2D grids. A 100 x 100 pixel square must describe each one of the resulting 10,000 pixels individually, each with an RGB code. What about a 200 x 200 square? Twice as big? –No! 40,000 pixels, each with an RGB code. All else being equal, file size increases dramatically with image size.

36. 35 copyright Penny McIntire, 2010 Bitmap/Raster Graphics Bitmaps do not scale well: how do you scale pixels to, say, 135%? –If enlarged, it usually loses quality. Pixels are invented, based on the image editor’s best guess, or there will be multiple copies of each pixel (pixelated). –Less of an issue if made smaller, but even then best if decreased by an even divisor. Good: 100 x 100 pixels > 25 x 25 pixels. Bad: 100 x 100 pixels > 41 x 41 pixels.

37. 36 copyright Penny McIntire, 2010 Bitmap/Raster Graphics Resampling / Interpolation: The process of adding or subtracting pixels to resize an image (i.e., an “educated guess”). Image editors provide various methods – bicubic interpolation (usually the default) is the most sophisticated and accurate method for web work. After reducing the size of a bitmapped image, try applying a sharpening filter like unsharp mask to restore any sharpness lost in the process. (yes, a strange name)

38. 37 copyright Penny McIntire, 2010 Bitmap/Raster Graphics Bitmap formats are best for photographic images, in which each pixel is a different color. Bitmap formats include BMP, TIFF, PSD (Photoshop), JPG, GIF, and web- friendly versions of PNG. Only JPG, GIF, and web-friendly PNG should be used on the web.

39. 38 copyright Penny McIntire, 2010 Vector Graphics Vector graphics are graphics based on mathematical equations. A 100 x 100 square uses only a few bytes: height, width, RGB color code for fill, RGB color code for stroke (outline), and the width of the stroke. Because the mathematical equation remains the same regardless of the size of the image, the file size doesn’t increase with image size.

40. 39 copyright Penny McIntire, 2010 Vector Graphics Vector graphics scale beautifully: we can change the display or print size without compromising quality. Not appropriate for non-mathematical images like photographs. The web cannot reliably show most vector graphics formats (Flash is an exception).

41. 40 copyright Penny McIntire, 2010 Vector Graphics Steps for creating original art: 1.Use an image editor like Fireworks or Photoshop to create the original art. 2.Save the image, complete with separate layers for each object, in the native format of the editor (PNG for Fireworks, PSD for Photoshop, AI for Adobe Illustrator, etc.) so that it can be modified in the future, as needed. 3.Scale the art to the number of pixels needed and “File” > “Export” it to a bitmap format (GIF, JPG, or web-friendly PNG) for display on the web.

42. 41 copyright Penny McIntire, 2010 Graphics To be continued…