slide 1 of 85 warm up question: a. how big will a picture print that was saved at 50dpi and is 200...

of 85

Warm up Question:Warm up Question:

A. How big will a picture PRINT that was saved at 50DPI and is 200 pixels by 200 pixels?

B. If we have an image that was scanned in at 300dpi and was 2 inches by 3 inches, how many pixels will it be?

Answers:A. 4 inches by 4 inchesB. 600 pixels by 900 pixels

of 85

Warm up Question:Warm up Question:Match the encoded colour to the

correct colour name:

Encoded Colour

a) #FFFFFFb) #00FF00c) #FAFAFAd) (0,0,255)e) (0,0,0)f) (14,14,14)g) (125,125,125)

Colour Name

1. White2. Black3. Dark Gray4. Light Gray5. Medium Gray6. Bright Green7. Bright Blue

Encoded Colour

a) #FFFFFFb) #00FF00c) #FAFAFAd) (0,0,255)e) (0,0,0)f) (14,14,14)g) (125,125,125)

GRAPHICS GRAPHICS YES, SIZE YES, SIZE DOES MATTER!DOES MATTER!

Computer Science 1033 – Week 4

Afternoon, n.: That part of the day we spend worrying about how we wasted themorning. Unix Fortune

Photoshop, a tool for good or for evil?

http://vimeo.com/34813864





of 85

Overview of Today’s TopicsOverview of Today’s TopicsAnnouncements Indexed ColourReview and worksheetBitmaps vs. Vectors Image file sizeWhy we need compressionLossy vs. LosslessFile formatsGIF JPGPNGTransparencyHelp on how to hand in assignment 1

of 85

AnnouncementsAnnouncementsDon’t forget Assignment 1 is due on Friday,

October 12th at 3pm! Try to have it done early, the labs will be busy!

Handing in Assignment 1 is 2-part: ◦Part 1: Uploading to panther.uwo.ca via WinSCP◦Part 2: Submitting the links and references via

OwlVideo of how to hand it in:

◦http://www.csd.uwo.ca/~lreid/cs1033/howtohandinassignment1/SubmissionVideos.html

of 85

Assignment 1 TipsAssignment 1 TipsFollow the instructions carefully. Just by

following the instructions, you can get a very good mark for this assignment!

Check that you have all the required criteria such as 3 DIFFERENT shapes, 2 different types of text orientation, etc.

Check that you named all your files EXACTLY as we indicated.

Make sure you picked good layer namesRemember to follow the CRAP rules!Other tips

of 85

How about some Colour?How about some Colour?

Subtractive Model - CMYK Additive Model - RGB

Used for printing Ink applied to paperPrimary Colours

Cyan, Magenta and Yellow

Ink when applied removes (subtracts) the white

Use on monitors“Adding” light to a

black background (the monitor)

Primary Colours Red, Green and Blue

of 85

How do we represent the How do we represent the colourscoloursTrue Colour

◦Can represent 224 colours about 16 million different colours

◦224 = 28 X 28 X 28 = 256 shades of red, X 256 shades of green X 256 shades of blue

◦Need 3 bytes (remember: 1 byte=8 bits) for True Colour (1 byte for red, 1 byte for green, 1 byte for blue)

of 85

2 Ways to encode True 2 Ways to encode True ColoursColours

1. <RGB> <amount of Red, amount of Green, amount of Blue>◦ Where 0 is no amount and 255 is

the most allowed◦ <255, 0, 0> the most of red, no

green, no blue◦ <0, 255, 0> the most green, no

red, no blue◦ <100,100,100> equal middle

amounts of red, green and blue◦ <50, 0, 200> a little red, a lot

of blue◦ <200, 0, 50> a lot of red, a

little blue

of 85

2. Hexadecimal Code◦#RRGGBB RR amount of red, GG

amount of Green, BB amount of Blue◦Amounts are counted in hexadecimal with

these digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F◦00 still means 0◦FF means 255 (try the calculator to see)◦0A means 10, 0B means 11, 0C means 12,

…◦#FF0000 Red◦#00FF00 Green◦#000000 Black

Some hexadecimal colours:

Question: Are these colours the same:• <00,00,00> and #000000?

• <00,00,00> and #000000?• <255,00,255> and #FF00FF

• <255,00,255> and #FF00FF• <66,00,99> and #660099 ?

• <66,00,99> and #660099 ?http://easycalculation.com/color-coder.php http://easycalculation.com/rgb-coder.php

of 85

Can you represent the same Can you represent the same number of colours using Hex as number of colours using Hex as using RGBusing RGBYES

Red Green Blue How many colours?

Smallest Value (RGB)

0 0 0

Biggest Value (RGB)

255 255 255

Total number of shades you can represent

256 256 256 256X256X25616 million colours

Smallest Value (Hex)

00 00 00

Biggest Value (Hex)

FF FF FF


16X16 24X2428

16X16 24X2428

16X16 24X2428

28 X28 X 28

22416 million colours

Smallest Value (Binary)

00000000

00000000

00000000

Biggest Value (Binary)

11111111

11111111

11111111


2X2X2X2X2X2X2X228

2X2X2X2X2X2X2X228

2X2X2X2X2X2X2X228

28 X28 X 28

22416 million colours

of 85

How many colours do we need How many colours do we need to encode?to encode?

Question: How many colours do you think the human eye can detect (are in the visible spectrum)?◦100,000◦1 million◦5 million◦10 million◦16 million

of 85

Colour Continued…Indexed Colour Continued…Indexed Colour (not true colour)Colour (not true colour)

Sometimes we don’t need 16 million colours, then we use indexed colour (an index that maps to a group of colours we plan to use)

QUESTION: What types of images don’t need a full palette of colours?

Our index might be 8-bits 28 different colours (just like with gray shades) thus we can show 256 different colours.

Called the Image Bit Depth, e.g. 8 bit depthWe only index the colours we need (if we will

never use purple in our image, don’t need to include it in the index of colours)

Why do the bottom boxes appear to have no colours in them?

of 85

Indexed ColourIndexed ColourIndexed Colour can look pretty good

even though we will only ever have at most, 8-bit colour (or 256 shades of colour)

http://www.csd.uwo.ca/~lreid/cs033/BitDepth/

of 85

Review SheetReview SheetWork on the review sheet for about

5 minutes (alone or with a friend) and we will take it up as a group.

of 85

Bitmapped Images vs. Vector Bitmapped Images vs. Vector GraphicsGraphics

Bitmapped Graphic Image◦ Image consists of pixels in a grid◦ Icons are an example of a bitmapped

image (do you recognize this icon? ) Icons are usually 32 pixels by 32 pixels

◦When bitmapped images are enlarged (resampled), 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

of 85

Bitmapped ImagesBitmapped ImagesAlso called raster graphics

imageBitmapped 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)

Bitmapped images that are enlarged:◦Have larger file size than original◦Become distorted

All images from scanners and digital cameras are bitmapped images

of 85

Common Bitmap FormatsCommon Bitmap Formats Common bitmap file formats are:

◦ BMP◦ GIF◦ JPEG, JPG◦ PNG◦ PICT (Macintosh)◦ PCX◦ TIFF◦ PSD (Adobe Photoshop)

Popular bitmap editing tools/software packages:◦ Microsoft Paint◦ Adobe Photoshop◦ Corel Photo-Paint◦ Corel Paint Shop Pro◦ The Gimp

of 85

Vector GraphicsVector GraphicsVector image is made up of

individual, scalable objects. Objects are defined by mathematical

equationsObjects consist of lines, curves and

shapesNo distortion as image is enlarged

of 85

Vector GraphicsVector GraphicsAs image is enlarged, still has crisp clean

lines.Most browsers don’t display vector

graphics without a plug in. Only can be used with drawings, not

photographsUsually vector graphic image has a

smaller file size than the same image stored as a bitmap.

Below: enlarging and shrinking an image: left using a vector graphical image, right using a bitmapped image

of 85

Vector ImagesVector ImagesExample: Drawing a HeartGreat for logos because

◦Can be scaled down for business card◦Can be scaled up for a trade show

posterhttp://www.youtube.com/watch?

v=vA2O6cDTboc&feature=related Note: the text in PDF files are Vector

based (but not the images in a pdf file)

of 85

Common Vector File Common Vector File FormatsFormatsCommon 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

of 85

Activity 1Activity 1Open MS Paint

(Start>Programs>Accessories>Paint)Pick the text tool, set the font to

50pt, type in your namePick the text tool again, set the font

to 12pt, type in your nameSelect the small font and resize it to

the size of the big fontDo they look the same?

of 85

Activity 2Activity 2Draw an oval in MS Paint, then select it

and resize it, watch what happensDraw an oval in Adobe Photoshop,

◦Select Layer>Layer Style and give it an outline (Stroke)

◦Select the oval layer and select Edit>Transform Path>Scale and resize it, watch what happens.

Usually when you see the term “Flatten Image” in Photoshop, it is changing you Vector layer into a Bitmapped layer!

of 85

Bitmapped Graphics vs. Vector Bitmapped Graphics vs. Vector GraphicsGraphicsQuestion: Which of these statements

do you think is true, A or B?◦A. You can convert a vector graphic image into a bitmapped image but you can not easily convert a bitmapped image into a vector graphic image.

◦B. You can convert a bitmapped image into a vector graphic image but you can not easily convert a vector graphic image into a bitmap image.

of 85

How to lose customers before How to lose customers before you ever even had them!you ever even had them!

Have you ever gone to a website and then left within seconds because the graphics were taking too long to download?

Do you ever return?http://www.csd.uwo.ca/~lreid/

cs1033/resolution/UncompressedGraphics.html

of 85

How Big Is An Image?How Big Is An Image?Let’s figure out how many bytes one large

picture in true colour (224 colours) would take up.

Question: Assume we have a picture that is:◦ 1600 pixels by 1200 pixels (takes up the whole

screen and more depending on your resolution)◦ Each pixel will need 3 bytes to represent the

colour of each pixel <R,G,B>◦ How many bytes, kilobyte and megabytes is

the image?◦ Save a picture this size in Photoshop as .raw to

find size◦ http://www.csd.uwo.ca/~lreid/cs1033/resolution

Look at the size of the file with the extension .raw

We need to decide what We need to decide what are we going to use the are we going to use the

image for?image for?

For Printing in a Flyer or Magazine

For Displaying in a Web Page

File size doesn’t matter

Most important issue is the quality of the image!

Image will be printed with at least 300dpi

File size is very importantBigger files take longer to

downloadQuality is important too

but want to try to get best quality with smallest file size.

of 85

How long will it take that How long will it take that uncompressed image to uncompressed image to download if we are using it in a download if we are using it in a webpage?webpage?If the client is using high speed connect at 1500 kilobits per second?

If the client is on a modem that is 56 kilobits per second

On a really old modem that is 28.8 kilobits per second?

33 Seconds

860 Seconds or 14.33 Minutes

1672 Seconds or 28.66 Minutes

of 85

We need to make our We need to make our webpages download as fast as webpages download as fast as possiblepossibleWe want them to be the

“appropriate size” for our page, in terms of proportion

Want the image to look good (“high quality”)

Want image to download quicklyTHUS WE NEED TO MAKE OUR

IMAGE FILES SMALLER BUT OUR IMAGE TO STILL LOOK GOOD!

-Image size isn’t appropriate-Doesn’t look good -BUT it does download faster than the top page because the image is smaller

of 85

How do we download faster?How do we download faster?Make our image file size smaller!Question: What can we do to make

our images smaller?Make the image be physically

smaller LESS PIXELS (BUT that will change the size it is displayed at on the screen).

For example, a 100 pixel by 100 image pixel (30KB) is smaller than a 200 pixel by 200 pixel image (118KB)

100 by 100 pixelsDid you really want the polar bear to be this small?

200 by 200 pixelsThis is how you wanted the image to look within your page!

of 85

How do we download faster How do we download faster and keep the image the size and keep the image the size we want it?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)

Still 200 pixels by 200 pixels but the file size is smaller than the original.

An uncompressed image that is: 200 by 200 pixels True Colour (16 million colours <R,G,B>) Will be 200 * 200 * 3 bytes = 120,000 bytes Will be 120,000 / 1024 = 117.2 Kilobytes

of 85

Compress To The Rescue!Compress To The Rescue!The same image that is:

200 by 200 pixels Looks almost like true colour SAVED AS A COMPRESSED JPG WILL

BE: Highest Quality 58 KB Lowest Quality 25 KB

SAVED AS A COMPRESSED GIF WILL BE: 256 Colours 29KB 64 Colours 17KB 16 Colours 7KB 10 Colours 3KB

Lowest Quality JPG25KB

Highest Quality JPG58 KB

Raw Image118KB

256 Colours GIF29 KB

64 Colours GIF17 KB

16 Colours GIF7 KB

10 Colours GIF3 KB

Note: this one is 40 times than the uncompressed file smaller BUT the quality of the image is very poor!

of 85

CompressionCompressionKey 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 bits and bytes?

A Real World Example of Compression :

http://www.youtube.com/watch?v=I5eypklyjiY

of 85

Two Types of CompressionTwo Types 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 IS LOSTLossy:

◦ 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 DISCARDED◦ Nerf Ball vs. Orange

of 85

Several different algorithms for Several different algorithms for (ways to perform) compression(ways to perform) compressionEach different type of image file

format represents the use of a different compression algorithm

Common compressed image file formats that are acceptable on the World Wide Web:◦gif◦ jpg, jpeg◦png

Uncompressed file format:◦bmp (for Windows)◦raw (common on digital cameras)

of 85

How Does Compression How Does Compression Work?Work?Several different ways to do compression depend 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 you two options for filling the suitcase?◦A. Folding carefully and sitting on the case!◦B. Leaving some unimportant stuff at home

and using a smaller case!◦Which is lossy and which is lossless?

of 85

BREAKBREAKLink sent to me by one of our

students, cool photoshop video:◦http://www.youtube.com/watch?

v=53m0syaPg9A&t=0m39s Video created by a high school kid

from Stratford Ontario(took him 2 years):◦http://www.youtube.com/watch?

v=qIuxiwhUGz4

of 85

Compression for images with Compression for images with large blocks of the same colourlarge blocks of the same colour

Assume this is an image we want to compress.

Say the image is 100 pixels high and 200 pixels wide, so we would have to store info about 20,000 pixels.

We need to store the color of every pixel

NOTE: ◦ the yellow is: #FFFF00◦ the green is: #00CC99

100 pixels high

200 pixels wide

of 85

Compression ConceptsCompression ConceptsRAW has no compression

–large fileA RAW stores the

information about each pixel, one at a time, so the RAW file would look something like this: (Starting at the top, left corner, going left to right, ending at the bottom right)

Each color is 3 byte, so that is 60,000 bytes of information we are storing

#FFFF00#FFFF00#FFFF00#FFFF00#FFFF00…#FFFF00#00CC99#00CC99 …#FFFF00

100 pixels high

200 pixels wide

YellowWithGreen.raw

of 85

Compression ConceptsCompression ConceptsCan anyone think of a way to store

the data about the color of each pixel, without losing any information (lossless compression) and do it in less than 60,000 bytes

(0,100)

HINT

(200,0)(0,0)

(200,100)

100 pixels high

200 pixels wide

of 85

Compression ConceptsCompression Concepts

(200,0)

(200,50)

(0,0)

(200,100)

(80,0)

(80,50) (130,50)

(130,0)

(130,20)(80,20) Store:startx= 1 bytestarty = 1 byteendx = 1 byteendy = 1 bytecolor = 3 byteEach shape: record 7 bytes Multiply by 5 shapes = 35 bytes!

Record:

startx,starty,endx,endy,color

0,50,200,100, #FFFF00

0,0,80,50, #FFFF00

80,0,130,20, #FFFF00

130,0,200,50, #00CC99

80,20,130,50, #FFFF00

of 85

AMAZING: AMAZING: 35 bytes vs 60,000 bytes!NOTE:

◦GIF compressions are, in reality, a bit more complicated

◦This idea works great with rectangular shapes but gets a lot more complicated when curves are involved!

Thus compression aids with making smaller file size…downloads faster images

of 85

Other Compression IdeasOther Compression IdeasLooks for patterns, for example:

123451234512345If “1” represents pattern 12345,

compresses it to “111”Builds a decoding hash table

◦0 13245◦1 22345◦2 23423◦3 11223

Question: Which letter is the most common in the English language?

Huffman Coding - rather than ASCII use the least number of bits for common letters and more bits for less common letters

Pattern:13245234232234511223Based on table will map to0213

of 85

Other Compression IdeasOther Compression IdeasHow do our eyes see

images?Question: Which one

looks more different from the original?

A. Brightness Adjusted Slightly

B. Colour Adjusted Slightly

Original Image

of 85

Brightness vs. ColourBrightness vs. ColourThe designers of the JPEG compression

algorithm realized that the human eye is more sensitive to brightness details than to fine color details.

Question: What information should we leave out in a lossy compression?◦ Information about Brightness◦ Information about Colour

If it finds two adjacent pixels with very similar colors, it will store both those pixels with the same color and discard the other color.

of 85

How do we pick the most How do we pick the most appropriate file format?appropriate file format?

Depends on what type of image we are representing

How many colours do you think were used in this image:

How many colours do you think were used in this image:

of 85

Depends on type of image!Depends on type of image!The type of image we are trying to

compress will determine the best file format to choose!

3 file formats we will look at:◦GIF◦JPG◦PNG

of 85

GIF (Graphic Interchange GIF (Graphic Interchange Format)Format)Widely used on the World Wide WebCross Platform (works on Macs,

Windows)Supports 8 bit colour

◦Question: How many colours can you have in a GIF file if it allows for 8 bit colour?

◦Not great for photographs but good for clipart, logos, animation

Looks for large blocks of area that all have the same colour

Saving an image with 24 bit colour as a gif will lower the quality the first time you convert it to a gif

of 85

GIFGIFProduces smaller file sizes than

jpgsDoes a lossless compression:

◦Assume we have an image that is 200 by 200 pixels If the original image had 256 colours or less

◦With no compression the file size would be: 200*200*3/1024 = 117 KB

◦Same image, save as a gif: With 256 Colours 8.4 KB With 16 Colours (cant pick less than 9 in

Photoshop) 5 KBNOTICE: NO CHANGE IN QUALITY,

LOSSLESS COMPRESSION!

of 85

GIFGIFNot great for photography because

can only store 256 colours.Question: Can you tell which one is

the jpg and which one is the gif:

GIF GIF Transparency Transparency

Transparency

Allows for transparency of ONE colour

Background will show through:

Question: Can you see the problem with this type of transparency?

of 85

GIF GIF Animation AnimationAllows for animationDon’t need a plug in for gif

animation!Works in all browsers, universal

format!

Instructions on how to make this one in Photoshop

of 85

GIF GIF Dithering DitheringAllows for dithering:Question: What do you think a

program, that converts images into gifs does, if the image has more than 256 colors?◦Solution 1: Substitute one of the colors you

have for one of the colors you are missing◦Solution 2: Any guesses?

HINT: What did you do when you were a kid and your parent gave you red and blue and yellow and black play-doh?

you didn’t realize it but you were using a 2-bit color depth play-doh palette = 22 = 4 colors

of 85

GIF GIF Dithering Dithering Juxtaposing (place side by side) pixels

of two colors to create the illusion that a third color is present (grainy look)

Example:◦Assume our image uses 257 colours◦The 257th colour that is not in our palette is:◦Assume we do have these 2 colours: and◦Thus dithering will change this

◦To this

of 85

Another Example of Another Example of DitheringDithering

of 85

GIF GIF Dithering DitheringYou can reduce

the number of colors in a GIF and choose options to control the way colors dither in the application or in a browser.

of 85

GIF GIF Dithering Dithering

Original Image

Saved as 6 bit gif with no dithering

Saved as 6 bit gif with dithering

Dithering in Photoshop, used 64 colours to make the differences show up more to the naked eye!

of 85

GIF GIF Dithering DitheringDifferent ways to dither produce

different results

of 85

GIF GIF Interlacing InterlacingHow images are

downloaded to your screenInterlacing lets you have a

feel for the whole picture, you don’t have to wait around to see it download (good for dial up connections)

a process by which the image is drawn in a series of passes rather than all at the same time (file size bigger)

Example: http://loriweb.pair.com/interex.html

of 85

GIF GIF Compression Compression

Can compress more by reducing the number of colours in the image:

Colour Resolution

Size (KB) % Decreased

256 28483

128 23141 19

64 19488 32

32 15903 44

16 11863 58

8 8886 69

of 85

GIFGIF

of 85

GIF GIF Can you see the Can you see the difference?difference?

Which image has more colours, looks better?

256 colors (23 Kb) 8 colors (9Kb)

of 85

JPG (JPEG) – Joint Photographic JPG (JPEG) – Joint Photographic Experts GroupExperts GroupWidely used on the World Wide WebCross Platform (works on Macs,

Windows)Supports 24 bit colour

◦Question: How many colours can you have in a JPG file if it allows for 24 bit colour?

Great for photographsLarger file sizes than GIFs BUT

allows for a full colour scheme!

of 85

JPGJPGGood for photographs, computer games,

screenshots, stills from a movie, etcBest for blends of color, softer shadow

effects, subtle changes in color Not good for well-defined lines or sharp

contrasts between coloursQuestion: Guess which one is the GIF

and which one is the JPG:

of 85

JPGJPGNotice what happened to Homer

when his original GIF was resaved as a JPG:

of 85

JPGJPGJPG does a lossy compression

◦ Discards more data about colours than about brightness

Not all of the information in the original image is preserved – not the same as the original

Degrades the image qualityCompression is achieved by ‘forgetting’ certain

details about the image, which the JPG will then try to fill in later when it is being displayed

Degree of amount of information LOST (lossyness) can be varied by adjusting compression parameters. (controlled by you)

Because image data is lost with each compression, work with the image in native format, and when ready with final product, save it as a .jpg file

of 85

JPGJPG

Quality of image is inversely proportional to amount of compression

A higher image quality setting (has a lower compression value) results in less data being discarded.

Original 0% Compression = 100% Quality

of 85

JPGJPG

Can you tell which image was saved with low quality, high compression in Photoshop?

of 85

JPGJPGNo TransparencyNo AnimationNo InterlacingNo dithering (Question: why no

dithering?)

of 85

PNGPNGPronounced PINGCreated specifically because of

licensing issues with GIFs in the 90sDoes LOSSLESS compressionTwo versions of PNG

◦PNG-8◦PNG-24

of 85

PNG-8PNG-8Similar to GIFOnly allows for 256 coloursAllows for 1 transparent colourStoring of colours is more efficient

in PNG files than GIFS thus PNG-8 files might be SMALLER than their GIF counterparts (this is software dependent)

of 85

PNG-24PNG-24Allows for 24 bit colourIt is LOSSLESS so JPG files will be

smaller than the same image saved as PNG-24 file

Allows for transparency on each pixel, with different levels of opacity:◦Transparency doesn’t work in IE 6

of 85

Comparison of GIF, JPG, Comparison of GIF, JPG, PNGPNG GIF JPG PNG-8 PNG-24

Best For Logos, Cartoons, Drawings

Photographs Logos, Cartoons, Drawings

PhotographImages with a need for transparency

Type of Compression

Lossless Lossy Lossless Lossless

Well Supported in Browsers

All All All Not on IE6

Transparency

One COLOUR only

NO One COLOUR only

Varying levels of opacity and transparency

Animation Yes No No No

Dithering Yes No Yes No

Interlacing Yes No Yes Yes

Shape of image

Must be rectangular

of 85

File Size ComparisonFile Size Comparison

of 85

Things to think about when Things to think about when working with images:working with images:

How big do I need it to be within my page (determines the Width Pixels by Height Pixels)

Will I ever need to print the image (determines the DPI)

What type of picture is it: cartoony or photograph , how many colours (determines GIF vs. JPG)

Will I need 1 colour to be transparent (determines GIF/PNG vs JPG)

Will I need varying levels of transparency in my photograph (JPG vs PNG24)

of 85

ReviewReviewQuestion: How big will an image be

in terms of bytes if it is uncompressed, true colour and 200 by 400 bytes?

Question: What type of compression doesn’t lose any of the original information about the image?

Question: Which type(s) of file formats perform a lossless compression?

Question JPGs will produce a smaller file size than PNG 24 for a photograph: TRUE OR FALSE

of 85

Next WeekNext WeekIntroduction the World Wide Web,

the Internet, Web PagesI will do a demo of how to hand in

assignment 1. ◦If you are okay with this, you can leave

now

of 85

Transferring Files to the World Transferring Files to the World Wide WebWide Web

This info is a refresher of Lab 1 and help on what you will need to do for all 4 assignments!

of 85

Servers vs. ClientsServers vs. Clients

Web Server a computer that delivers (serves up) web pages

Client the computer that is requesting to see/visit the web page.

Many clients will visit one web server, for example 20,000 students might visit UWO’s web server to see the page: http://www.uwo.ca

We will put/post our web pages on the UWO web server so clients can see our pages.

of 85

Advantages of a Web ServerAdvantages of a Web Server

Connected: Computer is on all the time and connected to the Internet

Always Available: Since it never gets turned off, your website will always be available

Well Maintained: The people running the servers will take care of security and computer maintenance issues

of 85

Web Server at UWOWeb Server at UWOUWO Web Server computer has a

name panther.uwo.caPanther will be hosting (holding) our

web pages.We will create/edit/work with the

web pages on our local machine and then upload them to panther to see them on the internet

Your local machine

Panther(panther.uwo.ca)

Upload

Download

of 85

Creating an area for our web Creating an area for our web pagespages

Each student needs to create a folder called public_html to hold his/her web pages and images. This folder is created automatically at Western by visiting the site: http://www.uwo.ca/its/selfServe.html.

of 85

Uploading our Web Pages to Uploading our Web Pages to PantherPanther

Upload by using a File Transfer Protocol program such as:◦ WinSCP◦ FileZilla◦ WS-FTP◦ Fugu (for Mac)

Log on to the Web Server, Panther, by select Secure File Transfer Client, click on the Quick Connect button and entering the following◦ panther.uwo.ca◦ Your userid◦ Your password◦ Port 22 (should be default)

of 85

Using WinSCPUsing WinSCPJust drag the file from your laptop/lab

machine to your public_html folder on the machine: panther.uwo.ca

Then set the permissions on your files and folders

of 85

Double check that it worked:Double check that it worked:Open a browser like IE or FirefoxType in the web address:

http://publish.uwo.ca/~youruserid/foldername

For example:◦http://publish.uwo.ca/~lreid2/demo ◦usually when things don’t work it is

because your permissions are wrong or you didn’t use all lowercase!

of 85

Handing in Assignment 1Handing in Assignment 1http://www.csd.uwo.ca/~lreid/cs1033/

firstassignmentexample/ Step 1: Create your assignment in

PhotoshopStep 2: Save your file as a psd and jpg

with the correct file nameStep 3: FTP to panther.uwo.caStep 4: create a folder called assign1Step 5: move the .psd and .jpg files

into assign1 folderStep 6: using IE or Firefox double

check that you can see your jpg

of 85

Handing in Assignment 1Handing in Assignment 1Step 7: Create a file in a simple text editor

such as Notepad (.txt)Step 8: Put the necessary info in the .txt fileStep 9: Log onto Owl and go to Assignment 1Step 10: Copy the information in the .txt file

into the Assignment Text box in Owl for Assignment 1

Step 11: Press the Submit buttonStep 12: SAVE the email that Owl sends you

to prove you handed in the assignment. YOU’RE DONE!NEED A REMINDER, GO TO

http://www.csd.uwo.ca/~lreid/cs1033/howtohandinassignment1/SubmissionVideos.html

slide 1 of 85 warm up question: a. how big will a picture print that was saved at 50dpi and is 200...

Documents