Class Notes (811,690)
Canada (494,876)
Lecture 4

Week 4

7 Pages
Unlock Document

Computer Science
Computer Science 1033A/B
Pamela Glatt

COMP SCI – WEEK 4 Indexed Colour • indexed colour can look pretty good even though we will only ever have at most 8-bit colour (or 256 shades of colour) Bitmapped images vs. Vector graphics • Bitmapped graphic image ◦ image consists of pixels in a grid ◦ icons are an example of a bitmapped image ◦ icons usually 32 pixels by 32 pixels ◦ when bitmapped images are enlarged (re-sample), the computer adds new pixels and guesses on the colour to colour the new pixels (called interpolation) based on surrounding pixels ◦ this icon is now 245 pixels by 245 pixels ◦ bitmapped images edges become jagged ◦ also called rostergraphics image ◦ bitmapped images are resolution dependent ▪ bitmapped image on a 640 by 480 screen (lower resolution) appear larger than on a 1280 by 1024 screen (higher resolution) ◦ bit mapped images that are enlarged: ▪ have larger file size than original ▪ become distorted ◦ all images from scanners and digital camera are bitmapped ◦ common bitmapped file formats: ▪ BMP ▪ GIF ▪ JPEG, JPG ▪ PNG ▪ PICT (Macintosh) ▪ PCX ▪ TIFF ▪ PSD (Adobe Photoshop) ◦ popular bitmap editing tool/software packages: ▪ microsoft paint ▪ adobe photoshop ▪ corel photo-paint ▪ corel paint shop pro ▪ the gimp • Vector graphics ◦ vector image is made up of individual, scalable objects ◦ objects are defined by mathematical equations ◦ objects consist of lines, curves, and shapes ◦ no distortion as image is enlarged ◦ as image is enlarged, it still has crisp clean lines ◦ most browsers don't display vector graphics without a plug in ◦ only can be used with drawings, not photographs ◦ usually vector graphic images have a smaller file size than the same image stored as a bitmap ◦ great for logos because: ▪ can be scaled down for business card ▪ can be scaled up for a trade show poster ◦ note: the text in PDF files are vector based, but not the images in a PDF file ◦ common vector file formats include: ▪ AI (adobe illustrator) ▪ CDR (corelDRAW) ▪ CMX (corel exchange) ▪ CGM (computer graphics metafile) ▪ DXF autoCAD ▪ WMF (windows metafile) ▪ EPS (encapsulated postscript) ◦ popular vector drawing programs software packages are: ▪ adobe illustrator ▪ corelDRAW ▪ xara xtreme ▪ serif drawplus Image size • for printing in a flyer or magazine ◦ file size doesn't matter ◦ most important issue is the quality of the image! ◦ Image will be printed with at least 300 dpi • for display in a web page ◦ file size is very important ◦ bigger files take longer to download ◦ quality is important too, but want to try to get best quality with the smallest file size Length of time for uncompressed image to download in a web page • if the client is using high speed connect at 1500 kilobits per second? ◦ 33 seconds • if the client is on a modem that is 56 kilobits per second? ◦ 14 minutes • on a really old modem that is 28.8 kilobits per second? ◦ 28 minutes Need to make web pages download as fast as possible • we want then to be the “appropriate size” for out page, in terms of proportion • want the image to look good (“high quality”) • NEED to make our image files smaller, but our image to still look good! How do we download faster? • make our image files size smaller • less pixels (BUT that will change the size it is displayed at on the screen) How to download faster AND keep image the size we want it? • Compress the image file: ◦ use tricks to make file smaller without losing the quality of the image or the size (in pixels of the image) • an uncompressed image that is: ◦ 200 by 200 pixels ◦ true colour (16 million colours--) ◦ will be 200 x 200 x 3 bytes = 120, 000 bytes ◦ will be 120, 000 / 1024 = 117.2 kilobytes • the same image that ◦ is 200 by 200 pixels ◦ looks almost like true colour ◦ save as a compressed JPG will be: ▪ highest quality – 58 KB ▪ lowest quality – 25 KB ◦ saved as a compresses GIF will be: ▪ 256 colours – 29 KB ▪ 64 colours – 17 KB ▪ 16 colours – 7 KB ▪ 10 colours – 3 KB Compression • key concept: compress as much as you can WITHOUT sacrificing quality (losing information! • Is there a way we can stuff the bits and bytes down into less bit and bytes? ◦ YES: lossless Two type of compression • Lossless: ◦ compress the original bits and bytes into less bits and bytes without losing any of the original information about the picture ◦ when we reopen the file, all the original information about the picture is still there ◦ NO INFORMATION LOST • Lossy: ◦ when compression occurs, some of the original information is lost ◦ selected portions of the image are discarded, but the selected portions are the ones that will be the ones that least missed or noticed ◦ CANNOT GET THIS INFO BACK ONCE IT IS DICARDED Several different algorithms for (ways to perform) compression • each different type of image file format represents the use of a different compression algorithm • common compressed image file formats that are acceptable on WWW: ◦ GIF ◦ JPEG, JPG ◦ PNG • uncompressed file format: ◦ BMP (for windows) ◦ RAW (common on digital cameras) How does compression work? • Several different ways to do compression depending on the type of image • are you willing to do a lossy compression and lose some of the original information? • For example: when packing a suitcase, what are your two options for filling the suitcase? ◦ A: folding carefully and sitting on the suitcase—lossless ◦ B: leaving some unimportant stuff at home and using a smaller suitcase—
More Less

Related notes for Computer Science 1033A/B

Log In


Don't have an account?

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.