Download Sdafasdfasd

web
Images and the Web
graphics
web graphics: constraints
Due to the constraints imposed
by varying degrees of Internet
bandwidth, designing images
for the WWW is largely a matter
of striking an appropriate
balance between image quality
and file size.
The question that you will
inevitably confront when
developing web graphics is
“How do I maximize image
quality while minimizing file
size?”
graphic: types
Computer graphics come in two flavors, raster and
vector.
Raster images are described as a collection of small
pixels arranged in a grid pattern.
Vector images can be described by mathematical
formulas or XML markup and tend to be much smaller
in file size.
Currently, vector images
are not widely supported
by web browsers. We must
use raster type images.
Raster Image
<g id="rotate_1">
<rect style="fill:white; stroke:none; opacity:0;“ x="0" y="0" width="20" height="20"/>
<path style="fill:none;stroke-width:2;" d="M13.7,5c0,4.9-3.9,8.8-8.8,8.8"/>
<path d="M8.5,5.1L13.6,0l5.1,5.1H8.5z"/>
</g>
Vector Image
file size vs. quality
The quality and file size of an
image is determined by three
characteristics: image
resolution, color bit depth, and
compression scheme.
file compression
Before graphics can be
transmitted and displayed over
the web they must first be
compressed.
Compression is the process
through which the file sizes of
computer graphics are reduced.
GIF and JPEG
GIF (Graphic Interchange Format)
GIF is a lossless compression scheme
that can reduce file size by as much as
75%.
GIFs are best used for images that
contain large areas of flat color. The
maximum number of colors that GIFs can
contain is 256 (8 bit).
GIF (5K)
JPEG (17K)
GIF images also support one level of
transparency and can be animated.
JPEG (Joint Photographic Experts Group)
JPEG is a lossy compression scheme that works
best for photographs or continuous tone images
with subtle gradations.
GIF (13K)
JPEG (3K)
web graphics: color
Unlike mixing inks create colors,
computer color is defined by
mixing light – red, green, and
blue.
Color for print - subtractive
Hexadecimal numbers refer to
the amount of red, green, and
blue light.
#FF FF FF = 255R 255G 255B
#C2 AE 5C = 194R 174G 92B
Color for computers - additive
web
safe colors
There are 216 colors that are
shared by both Macs and PCs
with low-end 8 bit video cards
and monitors.
If you want to be sure that your
colors appear the same on both
platforms, you should select
colors from this common palette.
Dreamweaver, Photoshop, and
Fireworks provide web safe
pallets.
In HTML colors are defined by
hexadecimal (base 16) numbers.
ex. #FFFFFF = white.
shades of gray:
gamma
Windows and Macintosh
computers vary in the degree of
contrast between gray values
that they display. This contrast is
referred to as gamma.
Technically speaking, gamma
refers to the relationship
between the input and output of
a device, expressed as a
number, with 1.0 being a perfect
linear plot.
Macintosh
PC
Because Macintosh and PC
monitors have different default
gamma settings, 1.8 and 2.2
respectively, graphics prepared
on Macintosh computers will
appear slightly darker on PCs.
web
The End
graphics