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

PrerequisitesPrerequisites

• BitsBits

• BytesBytes

•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

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

OverviewOverview

•What are graphics??What are graphics??

•ImagesImages

•LogosLogos

•BackgroundsBackgrounds

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

OverviewOverview

ConcernsConcerns

• Download timeDownload time

• Blurry picturesBlurry pictures

• Squished picturesSquished pictures

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

Terminology

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

270 kilobytes270 kilobytes 1.1 1.1 megabytesmegabytes

Terminology

•Bit DepthBit Depth

24 bits24 bits 16 bits16 bits 8 bits8 bits

Terminology

•Bit DepthBit Depth

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

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)

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

PixelsPixels

PixelsPixels

RR GG BB

RR GG BB

255 0 0

204 0 204

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

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

Picture Formats

BmpBmp GifGif JpgJpg PngPng

And many more….

• 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

• 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

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

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

•??????

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

•??????

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

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

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

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

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.

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!!

Web ExamplesWeb Examples

• Example 1Example 1

• Example 2Example 2

• Example 3Example 3