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

Prerequisites Bits Bits Bytes Bytes

Everyone places pictures on the web.Everyone places pictures on the web. Somepeople place pictures on the web.Some people place pictures on the web. At least a few individuals place pictures on the webAt least a few individuals place pictures on the web Graphics on the Web

Why should you care?Why should you care? Adds a dimension to your web site Adds a dimension to your web site If you are going to make a web page, then you should do it right If you are going to make a web page, then you should do it right

Overview What are graphics??What are graphics?? ImagesImages LogosLogos BackgroundsBackgrounds Any colorful enhancement of a web pageAny colorful enhancement of a web page

Overview

Concerns Download time Download time Blurry pictures Blurry pictures Squished pictures Squished pictures Placement and organization (another talk) Placement and organization (another talk)

Terminology Picture Size (which picture – file is bigger??)Picture Size (which picture – file is bigger??) 270 kilobytes 270 kilobytes 1.1 megabytes 1.1 megabytes

Terminology Bit DepthBit Depth 24 bits 16 bits 16 bits 8 bits

Terminology Bit DepthBit Depth Grayscale (8 bits) 1 bit

Terminology Bit Depth Bit Depth 24 bits = 2 24 = (millions of colors) 24 bits = 2 24 = (millions of colors) 16 bits = 2 16 = bits = 2 16 = bits = 2 8 = bits = 2 8 = bits = 2 8 = 256 (shades of gray) 8 bits = 2 8 = 256 (shades of gray) 1 bit = 2 colors (black / white) 1 bit = 2 colors (black / white)

Terminology Pictures are made of Pixels Pictures are made of Pixels What’s a Pixel? What’s a Pixel? Smallest piece of a picture. Smallest piece of a picture. Represents a single color Represents a single color More pixels = better clarity More pixels = better clarity

Pixels

PixelsRGB RGB

Terminology Compression Compression 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 noticeable Usually not noticeable 198 kilobytes 68 kilobytes

Terminology Compression Compression Lossy Compression Lossy Compression Reduces file size by “removing” pieces of the pictureReduces file size by “removing” pieces of the picture Actually just condenses the picture, not reversibleActually just condenses the picture, not reversible Usually not noticeable by the human eyeUsually not noticeable by the human eye Lossless Compression Lossless Compression Reduces file size, but retains the original image informationReduces file size, but retains the original image information Relies on the repetitive nature of particular imagesRelies on the repetitive nature of particular images ReversibleReversible

Picture FormatsBmpGifJpgPng And many more….

JPEG/JPG (Joint Photographic Experts Group ) JPEG/JPG (Joint Photographic Experts Group ) JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images.lossy compressionlossy compression The information that is discarded in the compression is information that the human eye cannot detect. The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness. Picture Formats Busy slide #1

GIF (Graphics Interchange Format ) GIF (Graphics Interchange Format ) Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors.lossless compressionlossless compression GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that is only a few pixels high. GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that is only a few pixels high.pixels With an animation editor, GIF images can be put together for animated images. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. Picture Formats Busy slide #2

PNG(Portable Network Graphics) Not supported by all browsers. Not supported by all browsers.browsers PNG developed as a patent-free answer to the GIF format, also an improvement on the GIF technique. PNG developed as a patent-free answer to the GIF format, also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not 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 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 ??????

Choice This 1024 x 768 pixel image saved as:This 1024 x 768 pixel image saved as: Gif = 258 kbytesGif = 258 kbytes Jpg = 60 kbytesJpg = 60 kbytes ??????

More Terms... CropCrop

More Terms... ResizeResize

More Terms... SkewSkew

More Terms... DitherDither

Why does all this matter?? Over-compressed or skewed images have a poor look. Over-compressed or skewed images have a poor look. Under-compressed images download slow. Under-compressed images download slow.

What’s the bottom line?? Save photographs as jpg. Save photographs as jpg. Save images (graphs, charts, formulas, etc.) as gif. Save images (graphs, charts, formulas, etc.) as gif. Edit in gif, not jpeg. Edit in gif, not jpeg. Don’t force an image to be something it’s not!! Don’t force an image to be something it’s not!!

Web Examples Example 1 Example 1 Example 1 Example 1 Example 2 Example 2 Example 2 Example 2 Example 3 Example 3 Example 3 Example 3