Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Images as Links
Document related concepts
Autostereogram wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Computer vision wikipedia , lookup
Framebuffer wikipedia , lookup
Apple II graphics wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Stereoscopy wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Stereo display wikipedia , lookup
Image editing wikipedia , lookup
Indexed color wikipedia , lookup
Transcript
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.) 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) Browser rendition Photoshop rendition 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 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 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 file Examples of GIF palettes 4 bit 4 bit 8 bit 1 bit 2 bits grayscale bluescale bluescale • 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 Animated GIF – The background is not transparent for this one just like a cartoon, a series of graphics 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 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 Image element • left and right alignment over-ride inline behavior of images, causing image to float on page -- text flows around image <----------- distorted <----------- distorted <----------- doubled in size (preserved aspect ratio) <----------- Original Size 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 height are not specified, browser has to wait until it receives the images before continuing page layout. • If width and height are specified, browser can continue with layout, drawing empty boxes for images before they arrive. • In general, this helps pages load more quickly. Background images • Not set with the img element • 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"> Some examples of background images. You can find tons of graphics like these in online graphics mage libraries. Many, if not most, are gnarly. 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. 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. 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.
