1. D & D Enterprises
Web Graphics 101
Web Image File Formats
Image Optimization
The Size/Speed Conundrum
Legally Obtaining Images
Creating Your Own Web Images
2. D & D Enterprises
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
2
3. D & D Enterprises
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
3
4. D & D Enterprises
Two Main Web Image Types
▪ GIF
▫ Graphics Interchange Format
▪ JPEG/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…
4
5. D & D Enterprises
GIF Exploration
Graphics Interchange Format
What is it Good For?
Tech Specs
Optimization
6. D & D Enterprises
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
6
7. D & D Enterprises
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
7
8. D & D Enterprises
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
8
9. D & D Enterprises
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
9
10. D & D Enterprises
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
10
11. D & D Enterprises
GIF Optimization
File Size Comparisons
11
12. D & D Enterprises
GIF Optimization
File Size Comparisons
12
13. D & D Enterprises
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
13
14. D & D Enterprises
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
14
15. D & D Enterprises
Size/Speed Considerations
15
18. D & D Enterprises
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
18
19. D & D Enterprises
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
19
20. D & D Enterprises
JPEG Exploration
Joint Photographic Experts Group
What is it Good For?
Tech Specs
Notes
Optimization
21. D & D Enterprises
JPEG: Joint Photographic
Experts Group
Best for continuous-tone images such as:
▫
▫
▫
▫
Photographs
Glow Effects
Drop Shadows
Gradients
21
22. D & D Enterprises
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)
22
23. D & D Enterprises
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
23
24. D & D Enterprises
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
24
25.
26. D & D Enterprises
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
26
27. D & D Enterprises
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
27
29. D & D Enterprises
JPEG Files
Source: http://www.widearea.co.uk/designer/ducks.html
29
30. D & D Enterprises
Choosing: GIF or JPEG?
Which Format Should You Use?
31. D & D Enterprises
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
31
32. D & D Enterprises
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
32
33. D & D Enterprises
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
33
34. D & D Enterprises
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
34
35. D & D Enterprises
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
35
36. D & D Enterprises
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
36
37. D & D Enterprises
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
37
40. D & D Enterprises
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
40
41. D & D Enterprises
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
41
43. D & D Enterprises
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
43
44. D & D Enterprises
Getting Images for
Your Website
Creating and Optimizing Your Own Images! Finding
and/or Buying Images
Downloading Images (easy, but legal?)
45. D & D Enterprises
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
45
46. D & D Enterprises
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
46
47. D & D Enterprises
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
47
48. D & D Enterprises
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
48
49. D & D Enterprises
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
49
50. D & D Enterprises
Jupiter Images: Mega Site (1/2)
50
51. D & D Enterprises
Jupiter Images: Mega Site (2/2)
51
52. D & D Enterprises
Jupiter Images: clipart.com
▪ Over 5 Million Images
▫ http://www.clipart.com/en/
▪ Pay/Membership Site
52
53. D & D Enterprises
Jupiter Images: comstock.com
▪ http://www.comstock.com/web/default.asp
▪ Pay Site
53
54. D & D Enterprises
Jupiter Images: photos.com
▪ http://www.photos.com/en/
▪ Pay Site
54
55. D & D Enterprises
Getty Images: http://creative.gettyimages.com/
55
56. D & D Enterprises
Professional Image Services
▪ http://pro.corbis.com/
▪ And many more…
http://directory.google.com/Top/Business/Arts_and_Entertainme
nt/Photography/Stock/
56
57. D & D Enterprises
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…
57
58. D & D Enterprises
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/
58
59. D & D Enterprises
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
59
60. D & D Enterprises
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
60
61. D & D Enterprises
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)
61
62. D & D Enterprises
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/
62
63. D & D Enterprises
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/
63
64. D & D Enterprises
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
64
65. D & D Enterprises
Other Image Sources
▪ Clip Art and Photo Disks
▫ CDs full of images, from simple drawings to highresolution 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/
65
![D & D Enterprises
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
2](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)