1 / 10

Images and the Web

web graphics. Images and the Web. web graphics: constraints. Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for the WWW is largely a matter of striking an appropriate balance between image quality and file size.

virginia-irwin
Download Presentation

Images and the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. web graphics Images and the Web

  2. web graphics: constraints • Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for the WWW is largely a matter of striking an appropriate balance between image quality and file size. • The question that you will inevitably confront when developing web graphics is “How do I maximize image quality while minimizing file size?”

  3. graphic: types • Computer graphics come in two flavors, raster and vector. • Raster images are described as a collection of small pixels arranged in a grid pattern. • Vector images can be described by mathematical formulas or XML markup and tend to be much smaller in file size. Currently, vector images are not widely supported by web browsers. We must use raster type images. Raster Image <g id="rotate_1"> <rect style="fill:white; stroke:none; opacity:0;“ x="0" y="0" width="20" height="20"/> <path style="fill:none;stroke-width:2;" d="M13.7,5c0,4.9-3.9,8.8-8.8,8.8"/> <path d="M8.5,5.1L13.6,0l5.1,5.1H8.5z"/> </g> Vector Image

  4. file size vs. quality • The quality and file size of an image is determined by three characteristics: image resolution, color bit depth, and compression scheme.

  5. file compression • Before graphics can be transmitted and displayed over the web they must first be compressed. • Compression is the process through which the file sizes of computer graphics are reduced.

  6. GIF and JPEG • GIF (Graphic Interchange Format) • GIF is a lossless compression scheme that can reduce file size by as much as 75%. • GIFs are best used for images that contain large areas of flat color. The maximum number of colors that GIFs can contain is 256 (8 bit). • GIF images also support one level of transparency and can be animated. GIF (5K) JPEG (17K) JPEG (Joint Photographic Experts Group)JPEG is a lossy compression scheme that works best for photographs or continuous tone images with subtle gradations. GIF (13K) JPEG (3K)

  7. web graphics: color • Unlike mixing inks create colors, computer color is defined by mixing light – red, green, and blue. • Hexadecimal numbers refer to the amount of red, green, and blue light. • #FF FF FF = 255R 255G 255B • #C2 AE 5C = 194R 174G 92B Color for print - subtractive Color for computers - additive

  8. web safecolors • There are 216 colors that are shared by both Macs and PCs with low-end 8 bit video cards and monitors. • If you want to be sure that your colors appear the same on both platforms, you should select colors from this common palette. • Dreamweaver, Photoshop, and Fireworks provide web safe pallets. • In HTML colors are defined by hexadecimal (base 16) numbers. ex. #FFFFFF = white.

  9. shades of gray: gamma • Windows and Macintosh computers vary in the degree of contrast between gray values that they display. This contrast is referred to as gamma. • Technically speaking, gamma refers to the relationship between the input and output of a device, expressed as a number, with 1.0 being a perfect linear plot. • Because Macintosh and PC monitors have different default gamma settings, 1.8 and 2.2 respectively, graphics prepared on Macintosh computers will appear slightly darker on PCs. Macintosh PC

  10. web graphics The End

More Related