HTTP transaction with Graphics HTML file + two graphics files

Transcription

1 HTTP transaction with Graphics HTML file + two graphics files

2 Graphics are grids of Pixels (Picture Elements) Each pixel is exactly one color. At normal screen resolution you can't tell they are square. Most computer screens can display at least 1200x800 (WxH) pixels.

3 Types of Digital Graphics There are well over 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 in Web pages.) jpeg (Used in Web pages.) png (Used in Web pages.) You can generally tell the type of image by the file extension in the name of the file, for example mypic.png Web pages can only use the 3 graphics formats listed above.

4 Not all types of digital graphics are suitable for Web pages. If a file is too large, it takes too long for a browser to acquire the file from the server. The Web formats (gif,jpeg,png) use different techniques to create relatively small file sizes. Hence Web pages can load more quickly. In general, if the combined file sizes of all the graphics in a page gets more than a few hundred Kilobytes (K), then the page is getting pretty bloated and may load slowly. If the combined file sizes of all the graphics is below 100K, then it s definitely a fast load page. If the combined file sizes of all the graphics gets to 500K or more, then it s a fairly heavy page load. The above estimates are somewhat arbitrary. There are no magic numbers. It depends on the type and purpose of the page.

5 It requires 4 bytes to store an RGB color, one byte for each shade of Red, Green and Blue. The 4 th byte stores the level of opacity. In the most basic form of a digital graphic, one RGB color must be stored for each pixel in the graphic, hence the term raw pixel map. Virtually all computer monitors now have a resolution of 1024x768 or higher. Most are higher. Consider a 500x400 pixel graphic, which would be roughly ¼ the size of the screen at the above resolution. It would probably somewhat smaller than that on your computer. That graphic has 200,000 pixels. Storing one RGB color for each pixel at 4 bytes each results in a graphic file size of 800,000=800K pixels. It s quick to see why raw pixel maps are not used on the Web because that s way too much data. Each of GIF, JPEG, and PNG use different techniques to reduce the sizes of the graphics files so they are more Web friendly.

6 GIF (Graphics Interchange Format) Good for icons and low-color graphics. Small color palette -- max of 256 colors per graphic. Non-Lossy Compression Files are compressed to reduce file size. Non-lossy means that no data is lost during the compression. The images quality does not get degraded because of the compression. Can have a transparent background. Background is not transparent for the last one. Can be animated, with several frames playing in sequence like a cartoon.

7 JPEG (Joint Photographic Experts Group) Good for photographs Full RGB spectrum 16 million colors. Superior Compression Algorithm -- but Lossy Compression The compression degrades the image quality. Left: Medium quality Right: Low quality

8 PNG (Portable Network Graphic) PNG was developed as a free alternative to GIF, which was originally patented and involved license fees. It has some of the best features of both GIF and JPEG. Full RGB spectrum 16 million colors like JPEG. Non-Lossy Compression But better than GIF compression. Can compress files as much as 25% more than GIF compression. More flexible transparency options than GIF. But can not be animated like GIF.