graphics on the web

33
Graphics on the Web Graphics on the Web How much do you want to How much do you want to know?? know?? Terry Griffin

Upload: elda

Post on 07-Jan-2016

21 views

Category:

Documents


1 download

DESCRIPTION

Graphics on the Web. How much do you want to know??. Terry Griffin. Prerequisites. Bits Bytes. Graphics on the Web. Everyone places pictures on the web. Some people place pictures on the web. At least a few individuals place pictures on the web. Graphics on the Web. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Graphics on the Web

Graphics on the WebGraphics on the Web

How much do you want to How much do you want to know??know??

Terry Griffin

Page 2: Graphics on the Web

PrerequisitesPrerequisites

• BitsBits

• BytesBytes

Page 3: Graphics on the Web

•Everyone Everyone places pictures on the web.places pictures on the web.

•SomeSome people place pictures on the web. people place pictures on the web.

•At least a few individuals place pictures on At least a few individuals place pictures on the web the web

Graphics on the WebGraphics on the Web

Page 4: Graphics on the Web

Graphics on the WebGraphics on the Web

•Why should you care?Why should you care?

• Adds a dimension to your web siteAdds a dimension to your web site

• If you are going to make a web page, If you are going to make a web page, then you should do it right then you should do it right

Page 5: Graphics on the Web

OverviewOverview

•What are graphics??What are graphics??

•ImagesImages

•LogosLogos

•BackgroundsBackgrounds

•Any colorful enhancement of a web pageAny colorful enhancement of a web page

Page 6: Graphics on the Web

OverviewOverview

Page 7: Graphics on the Web

ConcernsConcerns

• Download timeDownload time

• Blurry picturesBlurry pictures

• Squished picturesSquished pictures

• Placement and organization (another Placement and organization (another talk) talk)

Page 8: Graphics on the Web

Terminology

•Picture Size Picture Size (which picture – file is bigger??)(which picture – file is bigger??)

270 kilobytes270 kilobytes 1.1 1.1 megabytesmegabytes

Page 9: Graphics on the Web

Terminology

•Bit DepthBit Depth

24 bits24 bits 16 bits16 bits 8 bits8 bits

Page 10: Graphics on the Web

Terminology

•Bit DepthBit Depth

Grayscale (8 bits)Grayscale (8 bits) 1 bit1 bit

Page 11: Graphics on the Web

Terminology

• Bit Depth Bit Depth

• 24 bits = 224 bits = 22424 = 16777216 (millions of colors) = 16777216 (millions of colors)

• 16 bits = 216 bits = 21616 = 65536 = 65536

• 8 bits = 28 bits = 288 = 256 = 256

• 8 bits = 28 bits = 288 = 256 (shades of gray) = 256 (shades of gray)

• 1 bit = 2 colors (black / white)1 bit = 2 colors (black / white)

Page 12: Graphics on the Web

Terminology

• Pictures are made of PixelsPictures are made of Pixels

• What’s aWhat’s a Pixel?Pixel?

• Smallest piece of a picture. Smallest piece of a picture.

• Represents a single colorRepresents a single color

• More pixels = better clarityMore pixels = better clarity

Page 13: Graphics on the Web

PixelsPixels

Page 14: Graphics on the Web

PixelsPixels

RR GG BB

RR GG BB

255 0 0

204 0 204

Page 15: Graphics on the Web

Terminology• CompressionCompression

• Reduces the size (disk space) of an image.Reduces the size (disk space) of an image.

• Typically by reducing bit depth.Typically by reducing bit depth.

• Usually not noticeableUsually not noticeable

198 kilobytes

68 kilobytes

Page 16: Graphics on the Web

Terminology• CompressionCompression

• Lossy CompressionLossy Compression

•Reduces file size by “removing” pieces of the Reduces file size by “removing” pieces of the picturepicture

•Actually just condenses the picture, not Actually just condenses the picture, not reversiblereversible

•Usually not noticeable by the human eyeUsually not noticeable by the human eye

• Lossless CompressionLossless Compression

•Reduces file size, but retains the original Reduces file size, but retains the original image informationimage information

•Relies on the repetitive nature of particular Relies on the repetitive nature of particular imagesimages

•ReversibleReversible

Page 17: Graphics on the Web

Picture Formats

BmpBmp GifGif JpgJpg PngPng

And many more….

Page 18: Graphics on the Web

• JPEG/JPG (JPEG/JPG (JJoint oint PPhotographic hotographic EExperts Groupxperts Group ) )• JPG is a JPG is a lossylossy compression compression technique that is designed technique that is designed

to compress color and grayscale continuous-tone to compress color and grayscale continuous-tone images.images.

• The information that is discarded in the compression The information that is discarded in the compression is information that the human eye cannot detect. is information that the human eye cannot detect.

• JPG images support 16 million colors and are best JPG images support 16 million colors and are best suited for photographs and complex graphics. suited for photographs and complex graphics.

• The user typically has to compromise on either the The user typically has to compromise on either the quality of the image or the size of the file. quality of the image or the size of the file.

• JPG does not work well on line drawings, lettering or JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so image that can be thrown out in the lossy process, so the image loses clarity and sharpness. the image loses clarity and sharpness.

Picture Formats

Busy slide #1

Page 19: Graphics on the Web

• GIF (GIF (GGraphics raphics IInterchange nterchange FFormatormat ) )• Unlike JPG, the GIF format is a lossless compression Unlike JPG, the GIF format is a lossless compression

technique and it supports only 256 colors. technique and it supports only 256 colors. • GIF is better than JPG for images with only a few GIF is better than JPG for images with only a few

distinct colors, such as line drawings, black and white distinct colors, such as line drawings, black and white images and small text that is only a few pixels high. images and small text that is only a few pixels high.

• With an animation editor, GIF images can be put With an animation editor, GIF images can be put together for animated images. together for animated images.

• GIF also supports GIF also supports transparencytransparency, where the , where the background color can be set to transparent in order background color can be set to transparent in order to let the color on the underlying Web page to show to let the color on the underlying Web page to show through. through.

Picture Formats

Busy slide #2

Page 20: Graphics on the Web

PNG(PNG(PPortable ortable NNetwork etwork GGraphics)raphics)• Not supported by all browsers. Not supported by all browsers. • PNG developed as a patent-free answer to the PNG developed as a patent-free answer to the

GIF format, also an improvement on the GIF GIF format, also an improvement on the GIF technique.technique.

• An image in a lossless PNG file can be 5%-25% An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same more compressed than a GIF file of the same image. image.

• PNG builds on the idea of transparency in GIF PNG builds on the idea of transparency in GIF images and allows the control of the degree of images and allows the control of the degree of transparency, known as transparency, known as opacityopacity. Saving, . Saving, restoring and re-saving a PNG image will not restoring and re-saving a PNG image will not degrade its quality. degrade its quality.

• PNG does not support animation like GIF does. PNG does not support animation like GIF does.

Picture Formats

Busy slide #3

Page 21: Graphics on the Web

Making a choiceMaking a choice

•This 200 x 200 pixel image saved as:This 200 x 200 pixel image saved as:

•Gif = 40 kbytesGif = 40 kbytes

•Jpg = 117 kbytesJpg = 117 kbytes

•??????

Page 22: Graphics on the Web

ChoiceChoice

•This 1024 x 768 pixel This 1024 x 768 pixel image saved as:image saved as:

•Gif = 258 kbytesGif = 258 kbytes

•Jpg = 60 kbytesJpg = 60 kbytes

•??????

Page 23: Graphics on the Web

More Terms...More Terms...•CropCrop

Page 24: Graphics on the Web

More Terms...More Terms...•ResizeResize

Page 25: Graphics on the Web

More Terms...More Terms...•SkewSkew

Page 26: Graphics on the Web

More Terms...More Terms...•DitherDither

Page 27: Graphics on the Web

Why does all this matter??Why does all this matter??

• Over-compressed or skewed images Over-compressed or skewed images have a poor look.have a poor look.

• Under-compressed images download Under-compressed images download slow.slow.

Page 28: Graphics on the Web

What’s the bottom line??What’s the bottom line??

• Save photographs as jpg.Save photographs as jpg.

• Save images (graphs, charts, Save images (graphs, charts, formulas, etc.) as gif. formulas, etc.) as gif.

• Edit in gif, not jpeg.Edit in gif, not jpeg.

• Don’t force an image to be Don’t force an image to be something it’s not!!something it’s not!!

Page 29: Graphics on the Web

Web ExamplesWeb Examples

• Example 1Example 1

• Example 2Example 2

• Example 3Example 3

Page 30: Graphics on the Web
Page 31: Graphics on the Web
Page 32: Graphics on the Web
Page 33: Graphics on the Web