graphic images for computers stored in files of binary data - binary blobs
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/1.jpg)
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.)
![Page 2: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/2.jpg)
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)
![Page 3: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/3.jpg)
Browser rendition Photoshop rendition
![Page 4: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/4.jpg)
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
![Page 5: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/5.jpg)
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
![Page 6: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/6.jpg)
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
![Page 7: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/7.jpg)
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
![Page 8: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/8.jpg)
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
![Page 9: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/9.jpg)
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
![Page 10: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/10.jpg)
Image element
• left and right alignment over-ride inline behavior of images, causing image to float on page -- text flows around image
![Page 11: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/11.jpg)
<----------- doubled in size (preserved aspect ratio)
<----------- distorted
<----------- distorted
<----------- Original Size
![Page 12: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/12.jpg)
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.
![Page 13: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/13.jpg)
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">
![Page 14: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/14.jpg)
Some examples of background images.
You can find tons of graphics like these in online graphics mage libraries. Many, if not most, are gnarly.
![Page 15: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/15.jpg)
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.
![Page 16: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/16.jpg)
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.
![Page 17: Graphic images for computers Stored in files of binary data - Binary blobs](https://reader035.vdocuments.us/reader035/viewer/2022062816/568145ef550346895db2f3bf/html5/thumbnails/17.jpg)
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.