## Section 4 - images ##

Hexidecimal Colors
Graphics Formats
Optimization
Dithering

Inserting Images
<img> Attributes
alt text
Height and width
Scaling
Aligning text to an images

Links
URLs
index.html
 page 41

hexidecimal colors
• colors displayed in RGB -- 0 to 255
• decimal is based on 10; hex based in 16 (0 through F)
• must have # preceding
• eg #FFFF00 = yellow
• eg #FF0000 = red

web safe colors:

• 216 colors built into browser
• display reliably across platforms
- must be in pairs
- only 0, 3, 6, 9, C, F
• converter: http://www.w3.org/Markup/Guide/Style
(scroll down to: Hexadecimal color values)
 page 42

Graphics formats
Print= TIFF, EPS, PICT
Web = JPEG, GIF, PNG, SCA*
(compression algorithms built in)
Vector = Illustrator - not a language understood by browser

Flash: uses vectors for internally-running programs played on

top of browser
PDF = must have player or browser mapped to Acrobat

JPEG (joint photographic experts group)

- used for photographs
- up to 16 million colors
- blurred, fuzzing, loss of contrast
- not good for text
- no transparency
- due to compression algorithm
- block-by-block compression; brightness stays, but colors
change — to fool the eye
- not lossless - save original
- repeated saves will degrade
- color shifts are inevidable
 page 43

GIF (graphical interchange format)

- used for graphics
- transparency and animation support
- 256 colors only (through indexing)
- operates by pattern recognition
- if several pixels with the same color, can redefine
mathematically = compress
- or if repetitive pixel combinations, also reduces mathematically
- lossless compression, no color shifting if web-safe colors are
used (216)
- adaptive setting - will have color shift, but tries to compensate
for user variables

PNG (portable network graphic format)

- combines: lossless compression with 16 million colors
- 256 levels of transparency
- gamma correction between platforms
- not supported by older browsers
 page 44

Optimization options - JPEG

A) Settings menu
B) File Format (GIF, JPEG, PNG)
C) Quality menu (auto select for quality slider)
- a higher setting preserves more color info, but results in larger files.
D) Progressive (check box)
- to create an image that displays progressively in browser
- as a series of overlays
- enables viewer to see low-res version before file downloads completely
- auto-selects optimized
- requires more RAM for viewing; not supported by some browsers
E) ICC Profiles
- used by some browsers for color correction
- preserves profiles embedded in Photoshop
F) Interlaced
- displays image in horizontal line sections; increases file size
G) Lossy
- allows compression process toremove pixels from image and reduce file size

- 5-10% ok, maybe up to 50%

- can’t use with interlace, noise or patterndither
H) Blur
- creates smaller image size, but may reduce quality
- .1 to .5
- identical effect to Photoshop Gaussian Blur filter
I) Matte
- if original image contains transparency, select matte color to simulate appearance
of background transparency.
- JPEGs can’t be transparent, but if original image contains transparency, matte
color is blended
- fully transparent pixes are filled with matte color, partially transparent pixels are
blended with matted color
 page 45

Optimize options - GIF

A) Settings menu
B) File Format
C) Color Palette menu
- color table for an 8-bit image has max 256 colors
- Perceptual: creates custom color table by giving priority to colors for which the
human eye has greater sensitivity
- Selective: creates similar to perceptual, but favors broad areas of color and pres-
ervation of Web colors -- produces images with greates color integrity (default)
- Adaptive - creates custom table by sampling colors most common in image;
- Web - uses standard 216 color table. Ensures no browser dither is applied to col-
ors.
D) Dithering algorithm menu

Dithering
• selecting GIF dither (eg 128) from settings: simulates a larger
number of colors /reduce banding
• technique of mingling two colors together for optical illustion of
another
• if color is outside range, browser tries to mix colors that are
available.
• two types of dithering: application, browser
 page 46

Inserting images
• create your own images in Photoshop or Fireworks
-optimize as gif or jpeg
• download an image from the web - control+click > save to disk
• www.google.ca has an image search tab
• images downloaded from the web cannot be altered in
Photoshop or Fireworks without serious deterioration in quality.
Even to resize, it must be recompressed when saved

<img src="sunflower.jpg" />

<img src="sunflower.jpg"></img>
these mean the same

<img> attributes
ATTRIBUTE DESCRIPTION
src specifies the filename of the image file
alt alternate text to display in place of image
longdesc identifies URL of web page with long description of image
width width
height height
usemap identifies image to be used as a client-side image map
ismap identifies image to be used as a server-side image map
 page 47

alt Text
• attribute of <img>
• required element for well-formed XHTML
• displays text in place of the graphic
- if images turned off
- Lynx browser (text only)
- image file missing
• some search engines spider alt tags

<img src="sunflower.jpg" alt="Photo of Sunflower" />

<img src="barn.jpg" alt="Photo of Country Barn" />

Height and Width

• mandatory for properly formatted XHTML
• speeds up page load
• if not there, browser must examine the picture and calculate its
dimensions.
• reserves space on the page - text can start displaying while pic-
ture is loading

<p><img src="sunflower.jpg" width="189" height="288"

alt="Photo of a Sunflower" /></p>
<p><img src="barn.jpg" width="40" height="40" alt="Photo of a
Barn" /></p>
 page 48

Scaling images
• not recommended
• reduces appearance
• still has to load full file size
• always resize in Photoshop or Fireworks

align Attribute
(old HTML - does not validate Strict)
• places the alignment of text to the image
• must all be in the same paragraph
• top, middle, bottom; right, left
• default is bottom, left
• alignment should be left for CSS, not XHTML compliant.
• can be used in Transitional

<p><img src="sunflower.jpg" align="middle" width="189"

height="288" alt="Photo of a Sunflower" />This is a pretty sun-
flower</p>
 page 49

Links
• created with the <a> element
• means "anchor"
• inline element
• nested inside block-level element such as <p></p>
• href = hypertext reference
• link colors changed as attribute of <body>
<body link="#3399CC" vlink="#6699FF">
(this is HTML, won't validate, set in CSS)

<p>To validate your XHTML documents, visit the <a

href="http://validator.w3.org/"> W3C markup validation service.
</a></p>

Image as a link
<p><a href="banjo.html"><img src="banjo.jpg" width="252"
height="239" alt="Banjo the dog" /></a>

...
<h1>Central Valley Farmers’ Market</h1>
<h2>Contact Information</h2>
<p>If you have any questions or concerns about the Central
Valley Farmers’ Market, please call (908) 626-3764.</p>
<p>P.O. Box 135<br />
Central Valley, CA 94359</p>
<p><a href="centralvalley.html">Home</a></p>
...
 page 50

mailto:
<p><a href="mailto:president@apple.com">Send a message to
the president</a></p>

<p>You can send an e-mail to <a href="mailto:your_email_

address">your email address</a>.</p>

• multiple addresses, separate with a comma

<a href="mailto:email1@apple.com, email2@apple.com">

mailto elements
• cc=emailaddress for a cc
• bcc=emailaddress for a Bcc
• subject=subject text for a Subject
• multiple elements are separated by an & (ampersand)

<a href="mailto:guide@apple.com?bcc=gethelp@apple.com
&subject=testing">

<a href="mailto:live@wembley.com?Subject=Your Next

Show&CC=johnl@beatles.com&BCC=paulm@wings.
com&Body=I can't wait for the next show!">Email Oasis</a>

• using mailto attracts spam

 page 51

Connecting to Validator from files

<p><a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a></p>

this should be placed on the bottom of each xhtml page if it is infact valid.