web graphics. the pixel computer displays are comprised of rows and columns of pixels. pixels are...
TRANSCRIPT
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.
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.
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