Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web
Bitmap Vector (*Refer to Textbook Page 175 file formats)
Bitmap images are made up of individual dots (called pixels). Each pixel contains colour information which tells the video display system how to display the pixel. Image files are organised as rows and columns X pixels wide by Y pixels high. Image resolution refers to the size of the image [ e.g. 340(W) x 240(H) ].
Benefits Complex images can be displayed more quickly Drawbacks File size tends to be large Bitmaps difficult to resize
Total number of colours that can be displayed on screen is limited by the system s graphics hardware The number of bits of colour information for each pixel determines the number of colours that can be displayed. 1 2 (black/white) Line drawings 4 16 8 256 16 65K 24 16.7M True colour (*Refer to Textbook Page 163)
!" # $ %! For Example in HTML #FFFFF = white #000000= Black (*Refer to Textbook Page 175)
If using it Download faster. If not using it Download slower. Looks better for solid colours. Colour dithers (small colour speckles). Dither increases the file size.
Line based graphics For drawing lines, boxes, circles, polygons, and other graphic shapes Examples are found in CAD, and 3D models (e.g. Macromedia Freehand, Adobe Illustrator, Macromedia Flash) Stores the shapes as a set of instructions instead of dots
Benefits File size is smaller Displays correctly no matter what image resolution Drawbacks Cannot deliver photo-realistic detail Takes a longer time to display complicated graphics
A 320x240 image in 24 -bit colour will be 225KB To resolve file size problem, use data compression Compression involves two parts: compression and decompression (codecs) Two types of codecs: lossless and lossy
Lossless: Produce output that is exactly the same before and after the file is compressed and decompressed E.g. PKZip, WinZip, Stuffit Lossy: Data/Image will undergo a loss of information after compression and decompression Greater compression ratios are achieved Works by eliminating information that is difficult for the eye to detect
Image Formats Most common image formats used on the web are GIF and JPEG Types of image can be inferred from the filename suffix:.gif,.jpg,.png (portable network graphics)
Graphics Interchange Format Can store b/w, greyscale and colour images Limited to a maximum of 256 colours (8 bit colours) Two common versions of GIF: GIF87A and GIF89A Only GIF89A supports transparency, interlacing, animation. (*Refer to Textbook Page 176-177)
Non-interlaced GIF Vs Interlaced GIFs With an interlaced file, the picture is rearranged so that the browser can display large, coarse chunks of the image very quickly like a mosaic.
GIF use a compression scheme known as LZW compression, which looks to pattern of data. GIF compression searches for changes along a horizontal axis.
Horizontal lines 6.7k Vertical lines 11.5k 72% bigger Dithering noise 56k 8x bigger
Joint Photographic Experts Group An ISO standard (JPEG & Progressive JPEG) Used for photographic images with many different colours Uses RGB colour scheme to store colour information => max 16.7 millions of colours Uses Lossy codec (*Refer to Textbook Page 178)
Allows for varying degrees of compression with a corresponding loss of image quality Compression ratios of 10:1 can be achieved with no visible loss of image quality. Compression ratios of 100:1 or greater are possible (up to 95%)
! A standard JPEG is not interlaced. However you can save an image as a Progressive JPEG instead. It also has a range of quality settings.
10% compression 30k 90% compression 3k
" Portable Network Graphic (Macromedia Fireworks) PNG developed by Thomas Boutell, 1994 Supports 24 bit file format Offers masking (like transparent GIF89A) Supports only Netscape 4.04 and Explorer 5.0
Gif87a Gif89a JPEG Progr. PNG JPEG Native support in most browsers Lossless compression Supports transparent backgrounds Supports interlacing Supports animation Max. No. of Colours 256 256 16.7 M 16.7 M 16.7 M
# Graphics (e.g. cartoons, text, symbols) with solid colours Use Gif Photographic or illustrations with many tones, shades and colours Use Jpeg
$
$ (*Refer to Textbook Page 180 - Anti Aliasing)
%% Original Image Dithering is the process that a program uses when it cannot display the full range of colors in a particular image. An alternative to dithering is to use only the colors to which the software has access. This can result in banding.
%% When an image with lots of colours is converted to an image with less colours, the loss in image quality can take 2 forms: Dithering 32 colours Banding 32 colours Original 128 colours
& In computer imaging and display screens "gamma refers to the degree of contrast between the midlevel gray values of an image. >Example: lighting of the computer monitor Its like putting up a painting, and making sure the lighting is correct.
' &% The size determines the effect and repetition. GIF and JPEG format.
' &%
Bandwidth Length of time to download images Display Quality Users will browse with a variety of video display systems File Format Image file formats must be supported on all target platforms (e.g. jpg, gif, png)
()????? So, why is it important to use web-safe colours in backgrounds and graphics in web development?
The Answer: So that even people with 8-bit monitors can see the graphics and background without dithering (kind of spotty), and be assured that graphics will look as good as possible on every other computers. (*Refer to Textbook Page 167-168)
Define Create Optimise - Purpose / Theme - Type (Banner, Buttons, Animations, etc) - Digitise / Produce - Edit / Enhance - Compress Implement
$%%*% URLs Web Style Guide: Graphics http://www.webstyleguide.com/graphics/dither.html Graphics: Image Production http://hotwired.lycos.com/webmonkey/design/graphics/ Gif or Jpeg? http://www.theimage.com/web/graphic Super Color Chart http://www.zspc.com/color/index-e.html