Scribd
Upload
48 views

Chapter 5 - Graphic: Types of Data

Here are the answers: 1. (a) Bitmap (b) Vector (c) Bitmap 2. CorelDRAW and Adobe Illustrator 3. Small file size for graphics on the web is suggested so that pages load faster. Larger file sizes result in slower loading of web pages. 4. a) Bitmap b) Bitmap c) Vector d) Vector e) Bitmap f) Bitmap 5. JPEG, GIF, PNG

Uploaded by

Wan Khairul Ikhwan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views

Chapter 5 - Graphic: Types of Data

Here are the answers: 1. (a) Bitmap (b) Vector (c) Bitmap 2. CorelDRAW and Adobe Illustrator 3. Small file size for graphics on the web is suggested so that pages load faster. Larger file sizes result in slower loading of web pages. 4. a) Bitmap b) Bitmap c) Vector d) Vector e) Bitmap f) Bitmap 5. JPEG, GIF, PNG

Uploaded by

Wan Khairul Ikhwan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

CHAPTER 5_ GRAPHIC

TYPES OF DATA

Bitmap Graphic
Bitmaps are created using a square of rectangular grid of colored pixels.

Vector Graphic
Vectors use geometric characteristics to define the object.

Bitmap images (also known as raster images) are made up of pixel in a grid
Pixels are picture elements; tiny dots of individual color that make up what you see on your screen A pixel is often referred to as a dot, as in dots-per-inch

When you zoom in any bitmap images, you will find the image is a combination of pixels

Bitmap Images Quality of image drops when it is resized Images look realistic Resolution independent

Vector Images Scalable and the quality of the image maintains Cartoon-like image Resolution dependent

Contain white background


Bigger file size

No white background
Smaller file size

Additional reading: http://www.hacktrix.com/difference-between-raster-and-vector-graphics

Images created with software that uses geometrical formulas to represent images Images may consist of lines, curves, and shapes with editable attributes such as color, fill, and outline

Vector Image

Image created using lines, curves & shapes

What do all file formats for the Web have in common? Compression Compression is the key which creates small graphics Web-based image file formats have to implement impressive compression schemes in order to transform large images to small file size There are TWO (2) types of compression: Lossless Lossy

Lossless compression means that even though the file the file is compressed, it will not lose any quality A lossless image will contain identical data regardless of whether it is compressed or uncompressed The popular file format for JPEG uses lossless compression
Lossless compression image

Lossy compression is the opposite of lossless compression; the quality of the compressed image drop Data is removed from the image in order to achieve compression The popular GIF file format uses lossy compression

Image quality drops with lossy compression

All sorts of graphics can be included in a Web page.


Examples are BMP, TIF,GIF,JPG and PNG.

Usually for fast page loading, Web images should be converted to one of the following formats (developed specifically for onscreen/online use): GIF JPEG PNG

Stands for Graphical Interchange Format

GIF

Ideal for simple Web graphics containing a low number of colors such as some logos, icons, buttons, maps and ornate lines A GIF image is made up of pixels. The color of each pixel contributes to the colors used in the entire image
The maximum number of colors to use in a Web GIF is 256 fine for many images but not usually for photos

JPEG
Stands for Joint Picture Expert Group More complex images than simple logos may be best saved in Jpeg format

JPEG is a high compression format and uses up to about 16.7 million colors

PNG

Stands for Portable Network Graphics


Is another high compression format ideal for use on the Web

JPEG with little or no compression (47823 bytes)

JPEG with slight amount of compression (15975 bytes)

JPEG with moderate amount of compression (10658 bytes)

JPEG with over compressed (4371bytes)

Vector Editing Software

Bitmap Editing Software

CorelDRAW

Adobe Illustrator

Adobe Photoshop

Corel PHOTO PAINT

You can view it here: http://www.youtube.com/watch?v=j7Uto6R1kY

To create and prepare your images, use suitable graphicsediting software and make sure you use RGB color mode

Make any edits to your images only at high color depths (16 million colors) and larger physical sizes
Reduce the color depth of the images to a suitable level: GIF (256 or 16 colors) JPG (keep to 16 million colors)

Sometimes, you may want to place an image on a Web page but without keeping the default image background. GIF and PNG images support image transparency

Using pictures and other graphics in Web page has implications that you should be aware of when considering your overall page design One of the most important aspects is the file size of every image/graphic used By file size, we are referring to the combination of the number of colors used (color depth) Big file size = lower download time

Color depth describes how many colors are used to make up an image GIF image may adequately display using 256 colors, photos usually display poorly at this level For photos, 64k or even 16 million colors would probably provide best results.

Color depth comparison

Color depth can also be described in terms of bits instead of colors The following table illustrates how color and bit depth are related:
Number of Colors
2 colors 16 colors 256 colors 32,768 colors 65,536 colors 16,777,216 colors

Bit Depth
1-bit 4-bit 8-bit 16-bit Also 16-bit 24-bit or 32-bit

Setting Image size and color depth in Adobe Photoshop

1. Identify the pictures below as vector or bitmap graphic.

(a)

(b)

(c)

2. What are the most common software used to create vector graphic? 3. Why it is suggested to have small file size for graphic on the web?

4.

Identify the graphic below as either vector or bitmap:


a) b) c) d) e) f) Photographs on postcards Scanned map of Malaysia KFC logo MAS logo AVON billboard in Federal Highway Magazine cover with a photoshoot of Barack Obama

5.

List THREE (3) graphic file formats.

You might also like