Download web_graphicst - Multimediaarts.net

Web
Graphics
Web graphics
•
•
•
•
Bandwidth is king
Graphics must load quickly
Graphics must be optimized
All other components except for text, gif
and jpg are plugin devices
Factors for web graphics…
•
•
•
•
•
•
•
Monitor settings…
Screen resolution of web page
Screen resolution of end users monitor
Bandwidth of graphics
Bandwidth of end users connection…
Number of colors
72 dpi…
Bandwidth for Web
a pipeline…
•
•
•
•
Low bandwidth…
16. kbps
28.8 kbps
56. kbps..
16
28.8
56
c
•
•
•
•
DSL
c
High bandwidth…
Dsl
Cable….
Isdn
Cable
c
ISDN
c
For instance…
• a file size of about 50 k
• On a 56.k modem
• Would take 9 seconds to download….
Monitor Settings and Resolution
• 640 x 480
• 800X600
• 1024X 768
For 800X600
Actually use 740X550
If your design settings are
smaller than the users screen,
page will appear in small area
of screen….
If your design settings are larger
than the users screen, only a
portion of the page will appear,
user will have to scroll to see the
whole page….
Color
• The more colors, the more robust the
image…
• Also the longer it will display….
• The fewer colors, the faster the image will
take to display, but fewer colors make an
image unattractive….
Color Depth
•
•
•
•
32 bit…16.7 million colors + alpha channel
24 bit…16.7 million colors
16 bit… 65 thousand colors
8 bit… 256 colors (index palette.)
Color Depth…cont.
•
•
•
•
•
•
•
•
8 bit…256 colors
7 bit… 128 colors
6 bit… 64 colors
5 bit…32 colors
4 bit…16 colors
8 bit… 3 colors
4 bit… 2 colors
2 bit…1 color
Image /Quality Balance
File size…
Image quality
• Image file size …
• Must be balanced
with…
• Image quality
• One must find the
acceptable level
of depreciation
• Compromise
between two…
Hi
Balance
Low
Gif, Jpg and sometimes Png
•
•
•
•
Basically three file formats for web display
Gif
Jpg
Png special considerations (use for Flash…)
Image Compression
2 types
• Lossy… compress image data by
removing detail… once image has been
compressed and then decompressed it is not
identical to the original.
• A higher level of compression results in
lower image quality.
• A lower level of compression results in
better image quality
Image Compression
2 types
• Lossless…compress image data without
removing detail…
• Image is edited using a color table…
Gif
• Graphical interchange format (created by
CompuServe….
• 8 bit file format (maximum of 256 colors…)
• Use for images with flat colors, web components,
banners, buttons etc…
• Can be animated…
• Can hold a transparency…
• File compression, uses lossless…discards color
info
• Specific palette
Gif
• Uses a compression scheme that allows the
user to edit the number of colors in the color
table or index of the image….
Jpeg
• Joint photographic experts group
• 24 bit file format
• Use for continuous tone images I.E.
Photos, gradients or photo realistic images
with subtle gradations of color
• File compression, uses lossy…(retains color
info…)
Jpeg
• Uses a compression scheme that effectively
reduces file size by identifying and
discarding extra data not essential to the
display of the image.
• Opening a jpg automatically decompresses
it…
Png
•
•
•
•
•
Created as an alternative to gif
Lossless compression no data lost
Two types…
Png 8 and Png 24
Png 8 similar to gif, but has transparency superior
to gif…no animated Png…
• Png 24 more similar to jpg. But larger comparable
file sizes…
• Not supported by native browsers must be used as
plugin, but can be used natively in flash…
Golden rules for creating web
images
• Type of image determines which file format to
use… flat color or continuous tone
• Use an image as low and small in pixel size as is
practical (think screen area and screen resolution)
• Try to reduce the number of colors in the images
color table.
• Or if jpg reduce the quality as much as possible…
• View and preview images in browser setting…
• Check download time of images…
Types of images used on web…
•
•
•
•
•
•
Banners…
Background images
Buttons
Image maps
Navigation bars
Contextual images
Graphic components…
Dreamweaver
•
•
•
•
•
Not a graphics editor must insert…
Rollover button
Image map
Navigation bar
Flash buttons and text…
Graphic components…
Photoshop/Imageready
•
•
•
•
•
•
Graphics editor/ creator
Optimization tools
Rollover button
Image map
Slice tool
Export images and html table…
Color palettes
•
•
•
•
Perceptual…
Selective…
Adaptive…
Web…
Web safe palette
• Generates a color table by shifting image colors to
colors that are available in the standard Web-safe
palette. (in order to create a palette that works on
both platforms, since the Windows and Mac
browser palettes share only 216 out of 256
possible colors, the palette contains only 216
colors.)
• This choice produces the least number of colors
and thus the smallest files size, but not necessarily
the best image quality.