WEB GRAPHICS

The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600 x 800, 1024 x 768, 1280 x 1024.

ASCII Art : the dinosaur of computer graphics

Bitmaps In computers, graphics are stored and held as collections of bits in memory locations corresponding to pixels on the screen. Bit-mapped graphics displayed in color require several to many bits per pixel. As a result, graphic image files tend to be much larger than text files. For example, 8 bits (1 byte) is required to store a character from the keyboard. In a high resolution graphic, 24 bits are required to store the information in a single pixel! JPGs, GIFs and PNGs are examples of bitmapped images. These are the 3 image types supported on web pages.

GIFs Graphical Interchange Format Ideal for line art, simple graphics and small graphics Examples: Diagrams, cartoons, logos Disadvantages: Limited to 256 colors. Hi-Res images will appear washed out. Advantages: Supports animation and transparency

JPEGs Joint Photographic Experts Group Advantage: Best suited for high resolution photography (color and grayscale) and artwork reproduction. Disadvantage: Produces smudgy line art Examples: Any Web museum that presents paintings or photographs uses JPEG format.

PNGs Portable Network Graphic Designed specifically for the web as a substitute for GIFs. It can generally save images as smaller files than Gifs with the same quality. It is the least used of the 3 supported formats.

G GIFs and PNGs

JPEGs

Why Are Picture Files So Big? A What is the difference between these two "A" characters? The one on the left is a text character just like the type in this paragraph. The data size of the single character is 1 byte (8 bits; a single ASCII character) and, with the formatting tags that describe its typeface, size and color, the total is about 30 bytes. With text characters, all of the visual effects are drawn by the browser when it renders the text using the fonts already installed on the computer. The "A" on the right is a picture made by capturing an image of the A on the left. When we captured it from the screen, we recorded the color values in Red, Green, and Blue (RGB) of each pixel on the screen. We used a byte of data (256 values) each for the amount of Red, Green and Blue for each pixel, so a single pixel has a data size of 3 bytes. That's three times the size of the entire text character on the left for just a single pixel! Our A picture is 35 pixels wide and 35 pixels high, so the image's "raw" data size is 35x35 pixels x 3= 3675 bytes The A on the right takes up 100 times more space when it is stored in memory.

Image Editing Software Common adjustments Crop Resize Grayscale conversion Add tones (Sepia) Flip images Brighten/darken More/Less Contrast Add horizontal Text Add vertical text Covert file formats Create transparency

Image Tags in HTML An image in a web page This is George. Don’t get him mad.