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

copyright Penny McIntire, 2010

GraphicsPart I

“A picture is worth a thousand words, but it uses up three

thousand times the memory.”

2


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.

3


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.

4


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.

5


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.

6


Principles of Graphics: Reuse Images

• Reusing images also gives a consistent look to the site.

7


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.

8


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.

9


Principles of Graphics: Use Height and Width

Appropriately

• Explicitly specify height and width attributes on every image.– The page displays faster if the browser

doesn’t have to calculate sizes.– The page won’t bobble around as the

images load into the already-displayed text.

10



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.

11



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.

12


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.• Displays on rollover – we can use it to

further clarify the links.• Indexed by search engines and can

elevate a site’s rankings for search words.

13


Terminology

• Pixel: a single dot of color on the screen, made up of some combination of RGB (red/green/blue).

14


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


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


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 224/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


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


Anti-aliasing

• Anti-aliasing: smoothing the jagged appearance of the diagonal lines in a bitmapped image.

no anti-aliasing anti-aliasing

19


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


Anti-aliasing

Halo

white matte (the default) on white background

white matte (the default) on black background

21


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


Transparency

• Faked “transparency”: the image is created and saved on a background to match the web page background. – Not always a perfect match.

23


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


Transparency

• Must turn on transparency in the “Optimize” panel of Fireworks and Photoshop, as well as set the matte color.

25


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


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 the

modern browsers, although they claim to support it.

27


Interlacing

• Normally, an image appears as a line-by-line download:

28


• Interlacing: visitors see a complete but low-resolution, very pixelated version that is incrementally replaced by higher resolution versions.

Interlacing

29


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


Aspect Ratio

• Aspect Ratio: Ratio of width to height.

• Never change the aspect ratio of a photo – it distorts the image.

31


Aspect Ratio

• Bad examples:

32


Aspect Ratio

• Good examples of resizing:Resize,

maintaining aspect ratio

Crop to eliminate

unnecessary background

33


General Types of Graphics

• Two types of images: – Bitmap /raster graphics – Vector graphics

34


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.

35


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.

36


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)

37


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.

38


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.

39


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).

40


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.

41


Graphics

• To be continued…

Documents

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