WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are...

WEB GRAPHICS

The PixelComputer 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 artExamples: 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.

GGIFs and PNGs

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 SoftwareCommon adjustmentsCropResizeGrayscale

conversionAdd tones (Sepia)Flip images

Brighten/darkenMore/Less Contrast

Add horizontal Text

Add vertical text Covert file formats Create transparency

Image Tags in HTML<HTML><HEAD><Title>An image in a web page</Title></HEAD><BODY><IMG SRC=“lion.jpg” >This is George. Don’t get him mad.</BODY></HTML>

WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are...

Documents

Transcript of WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are...