1 / 17

Graphic images for computers Stored in files of binary data - Binary blobs

Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image. There are well over binary 50 formats for computer graphics: Some common ones: .bmp (Bitmap -- Native Windows format)

harlan
Download Presentation

Graphic images for computers Stored in files of binary data - Binary blobs

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. Graphic images for computers • Stored in files of binary data - Binary blobs • Software has to know the binary format to decode the file and render an image. • There are well over binary 50 formats for computer graphics: • Some common ones: • .bmp (Bitmap -- Native Windows format) • .pict (Native Macintosh format) • .psd (Photoshop's proprietary format) • .tiff (Another common format for graphic editing) • .gif (Used on the Web.) • .jpeg (Used on the Web.)

  2. Common software used to render computer graphics • Commercial grade graphic editing software – Adobe Photoshop or Illustrator (Expensive) • Freeware/Shareware graphic editing software • Web browsers • View only -- can't edit graphics • Images don't need to be embedded in Web pages -- open raw image file with browser • Only image formats used on Web -- GIF and JPEG (also PNG)

  3. Browser rendition Photoshop rendition

  4. Pixel Map -- Store one color for each pixel • Options: • Use full RGB spectrum -- 3 bytes per pixel • Use smaller color palette -- index the available colors -- store index number

  5. Raw pixel maps • The bigger the palette -- the more memory required for pixel map • Comparisons below • An image 500x400 pixels (roughly one fourth the size of a computer monitor display) • 200,000 pixels in pixel map

  6. GIF (Graphics Interchange Format) • Main strategy • Use small color palette -- max 256 colors (8 bit) • Size of color palette for a given image is fixed, but can be comprised of any of the RGB colors • Non-Lossy compression -- low compression of pixel map when stored in binary GIF fileExamples of GIF palettes • 4 bit 4 bit 8 bit • 1 bit 2 bits grayscale bluescale bluescale

  7. GIFS are best for low-color icon type graphics • Most prevalent format used on Web -- by far • Main Reasons • Small file sizes • Flexibility Transparent GIF The background is not transparent for this one Animated GIF – just like a cartoon, a series of graphics

  8. JPEG (Joint Photographic Experts Group) • Full RGB spectrum • Good for photographs • But big file sizes unless high compression is used • Superior Compression Algorithm -- But lossy Left: Medium quality Right: Low quality

  9. Embedding Images in Web pages • Image (img) element • <img src="URL" /> • src stands for source • URL can be relative or absolute • Most often, images used in a page are stored locally, so relative URLs are used. • img element is inline by default

  10. Image element • leftand right alignment over-ride inline behavior of images, causing image to float on page -- text flows around image

  11. <----------- distorted <----------- distorted <----------- doubled in size (preserved aspect ratio) <----------- Original Size

  12. The width and height attributes should always be used, even if the image is not resized. • Remember, browsers read HTML file, make secondary requests (http keep-alive) to server for images. • If width and heightarenot specified, browser has to wait until it receives the images before continuing page layout. • If width and heightare specified, browser can continue with layout, drawing empty boxes for images before they arrive. • In general, this helps pages load more quickly.

  13. Background images • Not set with the imgelement • Set using background attribute of body element • <body background="path/to/mybg.gif"> • Background images are usually small and are tiled to form background for whole page. • If you specify a background and bgcolor the background image is displayed, not the color. • <body background="URL" bgcolor="red">

  14. Some examples of background images. You can find tons of graphics like these in online graphics mage libraries. Many, if not most, are gnarly.

  15. Images as Links • Simply put the image as content of the anchor element • <a href="URL(page to link to)"> • <img src="URL(image)" border="0"/> • </a> • If you do not specify border="0" , some browsers will draw a colored border around the image corresponding to the underline given to links. • The color of the border will be that of unvisited or visited links, depending upon the status of the image link.

  16. The overhead of a Web page. • This refers to the total amount of data that a Web browser must download in order to build the page. • The HTML file itself • The graphics • Other resources like Flash animations • Many studies have shown that slow load times cause people to surf away from a page. • Keeping the page overhead as low as possible is clearly best. A page with over 100K of overhead is starting to get beefy.

  17. One-pixel (1x1) images • Basically invisible in Web pages • Used for Web Beacons for tracking • place in lots of pages • image source is from third-party server • The secondary requests to the third-party servers can track your surfing using cookies. • Ad banners can be used in the same way.

More Related