Introduction to Html5
Total Page:16
File Type:pdf, Size:1020Kb
Image Types Compression Because of data sizes and perceptual issues, compression is typically applied to media data Compression may be lossless or lossy Lossless compression ◦ Data bits can be recovered exactly in the compressed version ◦ Decompressed file has identical bits in identical order to original file before any compression ◦ Example: zip files 2 Lossy Compression Some data bits cannot be recovered after compression ◦ Decompressed file has lost some bits or bytes compared to original file before any compression Goal: Discard data that doesn’t typically affect perception; ◦ Human perception of rendered decompressed data should be similar to perception of rendered data before compression 3 4 Raster File Formats Extension Name Notes Joint Photographic Lossy compression format well suited for .jpg Experts Group photographic images Portable Network Lossless compression image, supporting .png Graphics 16bit sample depth, and Alpha channel Graphics 8bit indexed bitmap format, is superceded .gif Interchange by PNG on all accounts but animation Format Tagged Image lossless compression format (Lempel-Ziv- .tiff Flexible Format Welch – LZW) good for high-res images Google web .webp Lossless compression format Image Sampling Pixels: Small, often square, dots of color or grayscale which merge optically when viewed at a suitable distance to produce the impression of continuous tones 6 Image Resolution Resolution: ◦ Pixel dimensions of image; also: number of pixels that a device can display (render) per unit of length Examples ◦ My laptop display is about 13” (wide) by 8 ¼” (high), with a resolution of 1440x900 pixels (maximum), giving a resolution of about 108 pixels/inch Referred to as 108 dpi (dots per inch) or ppi (pixels per inch) 7 Google Android Device Resolution Classification Typical Resolution Dimensions Megapixels Name Comment 640x480 0.3 VGA VGA Dimensions used for PAL DV, and 720x576 0.4 CCIR 601 DV PAL PAL DVDs 768x576 0.4 CCIR 601 PAL full PAL with square sampling grid ratio 800x600 0.4 SVGA The currently (2004) most common 1024x768 0.8 XGA computer screen dimensions. 1280x960 1.2 1600x1200 2.1 UXGA interlaced, high resolution digital TV 1920x1080 2.1 1080i HDTV format. Typically used for digital effects in 2048x1536 3.1 2K feature films. 3840x2160 4096x2160 4.1 4K Ultra HD Sampling When measuring the value for a pixel, take the average color of an area around the location of the pixel. A simplistic model is sampling a square, this is called a box filter, a more physically accurate measurement is to calculate a weighted Gaussian average (giving the value exactly at the pixel coordinates a high weight, and lower weight to the area around it). When perceiving a bitmap image the human eye should blend the pixel values together, recreating an illusion of the continuous image it represents. Sampling Grid png Sampling Depth 8bit ◦ A common sample format, 8 bit integers can only represent 256 discrete values (2^8 = 256), thus brightness levels are quantized into these levels. 12bit ◦ For high dynamic range images (images with detail both in shadows and highlights) 8bits 256 discrete values does not provide enough precision to store an accurate image. Some digital cameras operate with more than 8bit samples internally, higher end cameras (mostly SLRs) also provide RAW images that often are 12bit (2^12bit = 4096). 16bit ◦ The PNG and TIF image formats supports 16bit samples, many image processing and manipulation programs perform their operations in 16bit when working on 8bit images to avoid quality loss in processing. Sampling Depth (quantization) Image Compression Bitmap images take up a lot of memory, image compression reduces the amount of memory needed to store an image. For instance a 2.1 megapixel, 8bit RGB image (1600x1200) occupies 1600x1200x3 bytes = 5760000 bytes = 5.5 megabytes, this is the uncompressed size of the image. Compression ratio is the ratio between the compressed image and the uncompressed image, if the example image mentioned above was stored as a 512kb jpeg file the compression ratio would be 0.5mb : 5.5mb = 1:11. Common Web Formats Typical Compression Format Description Ratios Lossless for images <=256 colors. Works best for flat color, GIF 4:1 - 10:1 lossless sharp-edged art. Horizontally oriented bands of color compress better than vertically oriented bands. Lossless for high res images. Uses LZW compression. Not TIFF 2:1 lossless great choice for web due to large file sizes. High quality - has little or no loss in image quality with JPEG (High) 10:1 - 20:1 lossy continuous tone originals. Worse results for flat color and sharp-edge art. JPEG 30:1 - 50:1 lossy Moderate quality - usually the best choice for the Web. (Medium) Poor quality - suitable for thumbnails and previews. JPEG (Low) 60:1 - 100:1 lossy Visible blockiness (pixelation). PNG's behave similarly to GIFs only better; they work best 10-30% smaller than with flat-color, sharp-edged art. PNGs compress both PNG GIFs lossless horizontally and vertically, so solid blocks of color generally compress best. WebP 4:1 lossless Google format. Lossless compression.