1 / 13

WEB GRAPHICS

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.

alize
Download Presentation

WEB GRAPHICS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB GRAPHICS

  2. 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.

  3. ASCII Art : the dinosaur of computer graphics

  4. 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.

  5. 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

  6. 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.

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

  8. GGIFs and PNGs

  9. JPEGs

  10. JPEGs

  11. 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.

  12. Image Editing SoftwareCommon adjustments Crop Resize Grayscale conversion Add tones (Sepia) Flip images Brighten/darkenMore/Less Contrast Add horizontal Text Add vertical text Covert file formats Create transparency

  13. 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>

More Related