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 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.
Dec 28, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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 pixelOptions:• 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 fileExamples of GIF palettes 4 bit 4 bit 8 bit 1 bit 2 bits grayscale bluescale bluescale
Transparent GIF The background is not transparent for this one
Animated GIF – just like a cartoon, a series of graphics
• GIFS are best for low-color icon type graphics• Most prevalent format used on Web -- by far• Main Reasons
• Small file sizes • Flexibility
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 qualityRight: 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
<----------- doubled in size (preserved aspect ratio)
<----------- distorted
<----------- distorted
<----------- 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) imagesBasically 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.
Related Documents
