D & D Enterprises

Web Graphics 101Web Image File FormatsImage Optimization The Size/Speed Conundrum Legally Obtaining ImagesCreating Your Own Web Images

D & D Enterprises

2

The Importance of Having Images

▪ A newspaper page with no photos is called gray▪ A Web page with no [images] is called unreadable

▫ The Web is as much a visible medium as a written one, and readers are very likely to pass over [web] pages without pictures

Source: http://courses.help.com

D & D Enterprises

3

Image Caution

▪ On the Web, site visitors generally appreciate creativity and passion for a subject over spinning fire logos, dancing bologna and other flashy graphic elements▫ So, your goal as a web designer is not to create a webpage

that looks like a 5 year old's first Christmas tree – covered in flocking and tinsel…

▪ Mandate: Having a clear design aesthetic in mind let's look at available web image file formats

Source: http://courses.help.com

D & D Enterprises

4

Two Main Web Image Types

▪ GIFGIF ▫ Graphics Interchange Format

▪ JPEG/JPGJPEG/JPG▫ Joint Photographic Experts Group

▪ The bold word indicates what each file format handles best ▫ GIF isn't "better" than JPEG and JPEG isn't "better" than GIF

▪ Each compression scheme is best suited for a certain type of image so let's explore each format…

D & D Enterprises

GIF ExplorationGraphics Interchange FormatWhat is it Good For?Tech SpecsOptimization

D & D Enterprises

6

GIF — Graphics Interchange Format

▪ Best for simple graphic images that incorporate solid areas of color such as:▫ Logos▫ Illustrations▫ Cartoons▫ Line Art

GIF  pronounced "JIF", by the format's creator, but many prefer GIF as in gift 

D & D Enterprises

7

GIF Tech Specs

▪ GIF is an 8-bit format which means a GIF image is limited to displaying only 256 colors

▪ There are two versions of GIF file format▫ An old 87▫ A newer 89a

▪ 89a adds several optional features▫ Described on next slide

D & D Enterprises

8

GIF Tech Specs

▪ The GIF 89a format adds several optional features:▫ Transparency

▪ Allows background graphics to "show through" selected colors▫ Animation (Animated GIFs)

▪ Very Popular (for better of for worse)▪ Small File Size▪ Recognized By All Image-Capable Web Browsers▪ Don't Require Special Plug-ins ▪ Don't Take Up Much CPU Time

▫ Interlacing/Interleaving▪ Image stored as a series of scanlines to load faster

D & D Enterprises

9

GIF Optimization

▪ Gif compression is lossless

▫ This means that there is no loss of information when the file is compressed

▫ So, when decompressed the image will be the same as before compression

D & D Enterprises

10

GIF Optimization

▪ The compression scheme for the GIF format works by identifying repetitions or runs of color within an image

▪ The more repetition and the longer the color runs are, the smaller the image will be after compression

▪ To better understand how this works, let's look at some images on the next 2 slides and note their file sizes

D & D Enterprises

11

GIF Optimization File Size Comparisons

D & D Enterprises

12

GIF Optimization File Size Comparisons

D & D Enterprises

13

Size/Speed Considerations

▪ The larger your image, the more time it takes to appear on the browser

▪ A 24 bit color image takes longer to download than an eight bit grayscale, single color or line art image▫ Download speed is a factor of file size

D & D Enterprises

14

Size/Speed Considerations

▪ Most monitor resolutions are between 72 and 95 dots per inch (dpi)▫ This is important because an image scanned at 150

dpi would not look much better than an image scanned at 75 dpi!

▫ On the next slide we will look at a 3 x 5 image that shows the relationship between scan resolution and file size

Source: http://coe.sdsu.edu/eet/articles/wpdresolution/start.htm

D & D Enterprises

15

Size/Speed Considerations

D & D Enterprises

16

Size/Speed ConsiderationsImage download issues…

1MB @ 14.4Kbps = 10 minutes

1MB @ 56Kbps = 2.5 minutes

1MB@T1 (1.544Mbps) = 5 seconds

© 2004 Happy Aston-Snow

D & D Enterprises

17

Size/Speed ConsiderationsImage file size is determined by

▪ Physical size in pixels▪ Number of bits used to represent the colors in a pixel

How do you make images render faster on the Web?

▪ Make the images smaller (physically) – crop or scale ▪ Reduce the number of colors▪ Compress the image

Size and color aren’t the only things to consider… Do the math and consider the cumulative effect:

▪ 30 images @ 300 K each = 900MB total.▪ 30 images @ 3 seconds each = 90 seconds.

© 2004 Happy Aston-Snow

D & D Enterprises

18

Speed Tip

▪ Reuse Images Throughout Your Site ▫ Use the same image multiple times on your Web site

▪ Company logos and navigational menu bars/icons are excellent candidates for reuse since they often appear on every page

▪ If you reuse logo and navigation, site visitors will only have to wait for a single download

▫ After that, the images are cached on your computer and display immediately

Source: http://www.netmechanic.com/news/vol3/loadtime_no6.htm

D & D Enterprises

19

Speed Tip

▪ Reusing images is a small effort that produces huge benefits▫ Decrease your development time

▫ Decrease your visitors' download time

▫ Increase the usability of your site with consistent user interface & navigation tools

Source: http://www.netmechanic.com/news/vol3/loadtime_no6.htm

D & D Enterprises

JPEG ExplorationJoint Photographic Experts GroupWhat is it Good For?Tech SpecsNotesOptimization

D & D Enterprises

21

JPEG: Joint Photographic Experts Group

Best for continuous-tone images such as: ▫ Photographs

▫ Glow Effects

▫ Drop Shadows

▫ Gradients

D & D Enterprises

22

JPEG Tech Specs

▪ The JPEG (also known as JPG) file format is quickly becoming another industry standard▫ Virtually all current editions of Image-Capable Web

Browsers can display JPEG images

▪ JPEG is a 24-bit format, which allows the viewer to see 16 million colors (providing their hardware is capable)

D & D Enterprises

23

JPEG Notes

▪ If you are having detailed scientific slides scanned where delicate color nuances are important, you should opt to have them saved in JPEG format

▪ If you have detailed photos scanned, or a finely colored piece of graphic art created, you might opt to have it saved as a JPEG

D & D Enterprises

24

JPEG Optimization

▪ JPEG is a lossy compression method▫ JPEG compression does not work along horizontal

lines, like GIF compression does▪ JPEG compression breaks an image into zones

(square regions) and throws away subtle color differences

▪ You can see these square regions on badly compressed JPEGs

D & D Enterprises

26

JPEG Optimization

▪ Lossy: When a JPEG decompresses the image will not be the same as before compression -- it will have lost information contained in the original file▫ IMPORTANT NOTE: each time you save a JPG image it

loses more information▪ Therefore it is best to save an original of your image in

another format (such as TIF or EPS) and work from that original when making changes

D & D Enterprises

27

JPEG Optimization

▪ When saving an image in JPEG format, you can select how much compression to use and, therefore, how much information will be lost▫ The more compression you use on the image

▪ The more the quality is reduced and▪ The smaller the file size becomes

D & D Enterprises

28

JPEG Files

D & D Enterprises

29

JPEG Files

Source: http://www.widearea.co.uk/designer/ducks.html

D & D Enterprises

Choosing: GIF or JPEG?Which Format Should You Use?

D & D Enterprises

31

Which Format Should You Use?

▪ As mentioned earlier, the GIF 89a file format has more options than the JPEG file format

1. Transparency

2. Animation

3. Interlacing/Interleaving (though JPEG has a parallel "progressive" option)

Source for next 2 slides: http://www.fortressdesign.com/graphics.html

D & D Enterprises

32

Transparent Backgrounds

▪ One unique feature of the GIF file format is its ability to assign a single layer of transparency within the image▫ The left letter "A" image has a white background that looks

bad on a textured background▫ The middle letter "A" shows the boundaries of the image with

a transparent layer employed▫ The image on the right shows the same letter blended

seamlessly against a textured background – the white has been made transparent

D & D Enterprises

33

Animation

▪ You can create simple animations by "linking" several GIF images together within a single file▫ In the example below, four image "cells" were linked

together to make the animated tugboat

D & D Enterprises

34

Interlaced/Interleaved

▪ You can save a GIF image in interlaced/interleaved format▫ The image is stored as a series of scanlines, interleaved so

that the image seems to resolve as it loads

▫ On fast networks this will not be apparent

▫ The interlaced effect is lost once the image has been loaded into a computer's memory

Source: http://www.soapplab.auckland.ac.nz/info/formats/gif.htm

D & D Enterprises

35

Which Format Should You Use?

▪ The GIF format reduces the color depth of images to a maximum of 256 colors▫ The colors retain their hue

▪ Hue is a characteristic of color that denotes a color in relation to red, yellow, blue

▫ The less colors you retain in your image, the smaller its file size and download time

Source: http://glassdog.com/design-o-rama/html/images.html

D & D Enterprises

36

Which Format Should You Use?

▪ JPEG allows compression in image files ▫ Too much compression causes a mosaic effect, and

sometimes colors get mixed and muddied▫ JPEG supports 24-bit color depths

(up to 16 million colors)▫ JPEGs hate the red hues

▪ If your image has large areas of pure red, avoid using JPEGs

▫ Generally, the more complicated an image is (the less it has areas of plain color) the better suited it is for a JPEG

▫ Also, very large images should be JPEGs

D & D Enterprises

37

JPEG Exception?

▪ Grayscale▫ Grayscale photos are difficult

▪ In most cases they should be saved as GIFs▪ Even if the images are slightly dithered, they will

generally look better than JPEG at an 8 bit color level▫ At a 16 bit color level, however, the JPEG image is not

only smaller but also looks better• See the next slide for examples

D & D Enterprises

38

JPEG Exception?

.JPG .GIF

© 2004 Happy Aston-Snow

D & D Enterprises

39

JPEG Exception?

D & D Enterprises

40

GIF Notes

▪ If you're working with detailed or finely colored illustrations, you can lose some of that fine color gradation by saving it as a GIF so the image might be a better candidate for the JPEG format▫ In some cases, you have to experiment with GIF

and JPEG to see which give you the smallest file size and the best image quality

D & D Enterprises

41

JPEG Notes

▪ The JPEG format has a lot of overhead, so it is not necessarily a good format for small photos▫ Generally images that are smaller than 100 x 100 pixels

should be saved in GIF format▪ Sometimes experimenting with the GIF and JPEG formats is

the only way to determine which format will give you the smallest file size with the best quality

D & D Enterprises

42

Web Graphics 101

.GIF- text is still

crisp

.JPG - text is fuzzy

© 2004 Happy Aston-Snow

D & D Enterprises

43

Format Choice Summary

▪ Text often better as a GIF▪ Photos that are larger than 100x100 pixels - JPEG format▪ Photos that are smaller than 100x100 pixels - GIF format ▪ Images with large areas of solid color (such as vector

graphics or illustrations) - GIF format ▪ Images with lots of shading or gradients - JPEG format

Source: http://webdesign.about.com/compute/webdesign/library/howto/htGIForJPG.htm

D & D Enterprises

Getting Images for Your WebsiteCreating and Optimizing Your Own Images! Finding and/or Buying ImagesDownloading Images (easy, but legal?)

D & D Enterprises

45

Raster (Bitmap) vs. Vector Images

▪ All computer graphic programs fall into two basic categories: paint programs and drawing programs▫ A paint program works with pixels

▫ A drawing program works with vectors

Source: http://www.wfubmc.edu/biomed/infonotes/raster_vector.html

D & D Enterprises

46

Raster (Bitmap) vs. Vector Images

▪ A pixel is a picture element, and collectively those pixels make up a raster image (also called a bitmap image)▫ Programs such as Photoshop, PaintShop, and

PhotoPaint all work with pixels or raster images and therefore fall into the paint program category

▪ NOTE: GIF and JPEG are bitmapped files

D & D Enterprises

47

Raster vs. Vector Images

▪ Vector objects are made of lines and curves that are defined mathematically in the computer▫ Programs such as PowerPoint, Illustrator, Freehand, and CorelDraw

all work with vectors and therefore fall into the drawing program category

▪ Vectors can have various attributes such as line thickness, color and length▫ For example, in a drawing program, a square is drawn as four lines

connected at the corners▪ Those lines can be set to different thickness and colors▪ The square can be hollow or filled▪ A line is one object with attributes, and you work with this line as a

single object, not as a group of pixels as you would in a paint program

D & D Enterprises

48

Demystifying Graphic File Formats

▪ Orange Bytes has a fabulous web page called, "Demystifying Graphic File Formats"

▪ Check it out at:▫ http://www.noccc.org/bytes/articles/v01/568.html

D & D Enterprises

49

Finding Images

▪ The web has a wealth of images resources, some are available free and other are available for a fee ranging from relatively cheap to very expensive

▪ The following pages contain some URLs to get you started looking for web suitable clipart, photographs and illustrations

D & D Enterprises

50

Jupiter Images: Mega Site (1/2)

D & D Enterprises

51

Jupiter Images: Mega Site (2/2)

D & D Enterprises

52

Jupiter Images: clipart.com

▪ Over 5 Million Images▫ http://www.clipart.com/en/

▪ Pay/Membership Site

D & D Enterprises

53

Jupiter Images: comstock.com

▪ http://www.comstock.com/web/default.asp

▪ Pay Site

D & D Enterprises

54

Jupiter Images: photos.com

▪ http://www.photos.com/en/▪ Pay Site

D & D Enterprises

55

Getty Images: http://creative.gettyimages.com/

D & D Enterprises

56

Professional Image Services

▪ http://pro.corbis.com/ ▪ And many more…

http://directory.google.com/Top/Business/Arts_and_Entertainment/Photography/Stock/

D & D Enterprises

57

Getting Free Images

▪ Finding images on the web can be as simple as opening a search engine and typing in a phrase like, "free Web graphics"▫ This query returns over 22 million hits in Google…

D & D Enterprises

58

Getting Free Images

▪ Google, Altavista, Yahoo, MSN and others search companies have specialized image search engines▫ http://images.google.com/

▫ http://www.altavista.com/image/

▫ http://search.yahoo.com/images

▫ http://search.msn.com/images/

D & D Enterprises

59

Downloading Images

▪ Taking images from the Web is as easy as taking the proverbial candy from a baby▫ But just as you should think twice before swiping a toddler's

treat, be aware that copyright issues balance the simplicity of acquiring online images.

▫ Although you can use just about any image for practice, any image you plan to publish on the web should be cleared with its source -- even if you've acquired it for free

▪ Contact the copyright holder or the Webmaster of the site where you found it to be sure your use is legal and permitted

Source: http://courses.help.com

D & D Enterprises

60

Downloading Images: Copyright

▪ Fair Use Considerations▫ Nonprofit or Profit Use▫ Creative or Factual Work▫ Image Changed To New Work▫ Impact on Economic Value of Work

▪ Advice▫ Use Public Domain Material▫ Get A License To Use Image▫ Look for Web Creator's Statement of Permissible Use and

Suggested Credit Line

Learn more about web image copyrights and fair use at:▫ http://www.bu.edu/library/instruction/findimages/copyright.html

D & D Enterprises

61

Downloading Images

▪ In a browser, right mouse click over the image and from the popup menu choose ▫ Save Picture As (IE)

▫ Save Image As (Netscape/Firefox)

▪ Save the image to your computer, making sure to keep the same file extension (GIF, JPG or JPEG)

D & D Enterprises

62

Other Image Sources

▪ Digital Camera▫ With costs dropping, quality increasing, and transferring

images practically as simple as plugging into a computer, a digital camera can be your next best friend in your quest for visual nirvana

▫ Whether shooting snapshots or studio quality, you can't help but be thrilled at the ease of use

Source: http://courses.help.com/

D & D Enterprises

63

Other Image Sources

▪ Scanner▫ Speaking of dropping costs, a scanner is a must for digitally

cataloging your print photo gallery▪ Whether you buy a stand-alone or as part of an all-in-one setup

that combines scanning with printing, you can find the scanner that's right for you, maybe for less than $100

▪ Just remember that if you scan and publish an image somebody else owns, you're still subject to copyright laws

Source: http://courses.help.com/

D & D Enterprises

64

Scan Tips

▪ When scanning, choose the correct resolution▫ For most monitors, 75 dpi is enough

▪ Crop and scale your image before you bring it into your web page in order to increase download speed and maintain the best resolution for your web page

▪ If you have single-color art, even if it isn't black and white, scan it as single bit line art

▪ For black and white photos, scan as grayscale to generate smaller files

D & D Enterprises

65

Other Image Sources

▪ Clip Art and Photo Disks▫ CDs full of images, from simple drawings to high-

resolution photos, offer another source of art for your use

▪ Some contain royalty-free content; others require you to purchase a key number to unlock images

▪ Remember that you usually get what you pay for, so if quality is essential for your purposes, be sure to budget for it

Source: http://courses.help.com/

D & D Enterprises

66

Any Questions?