* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Introduction to Web Graphics
InfiniteReality wikipedia , lookup
General-purpose computing on graphics processing units wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Free and open-source graphics device driver wikipedia , lookup
Stereoscopy wikipedia , lookup
MOS Technology VIC-II wikipedia , lookup
Rendering (computer graphics) wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Stereo display wikipedia , lookup
Waveform graphics wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Color Graphics Adapter wikipedia , lookup
Image editing wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Graphics processing unit wikipedia , lookup
Apple II graphics wikipedia , lookup
Indexed color wikipedia , lookup
Molecular graphics wikipedia , lookup
Framebuffer wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Creating Web Graphics Outline 2.1 2.2 2.3 2.4 2.5 2.6 2.7 Graphics Types Vector Graphics Bitmapped Graphics Graphics for the Web GIF (Graphics Interchange Format) JPEG (Joint Photography Expert Group) PNG (Portable Network Graphics) 1 2.1 : Graphics Types Why do we need graphics on the web pages? Use to create successful Web pages Enhance user experience Free generic graphics on the Web Create original graphics to make your site unique There are two types of graphic that you can create using computer: Vector graphics Bitmapped Graphics 2 2.2: Vector Graphics A vector graphic uses objects; lines, circles, curve with instruction as where to place them on your drawings Uses vector equations to define graphic properties Resolution independent Shape, size, color, relative positions (starting and ending points), etc. Resize without image quality loss Ideal for solid areas of color Ideal for logos, font and line drawings Handles complex color poorly 3 Advantages Maintain quality as the size of the graphics is increased Disadvatanges Objects/drawings cannot have texture; it can only have plain colors or gradients Small file size Easy to edit the drawings as each object is independent of the other. Advantages and Disadvantage of Vector Graphics 4 2.3: Bitmapped Graphics Also called raster graphics or pixelized graphics. Graphics defined by colored areas of pixels Resolution dependent Uses a table of data addresses and instructions to light up each pixel on the monitor An object is stored as a group of pixels with information about each pixel color Image quality is lost when image is resized Interpolation Ideal for images with complex color (i.e. photographs, artwork) 5 Advantages Disadvantages Can have different Not easy to make textures on the drawings modification to objects/drawings Large file size Graphics become "blocky" when the size is increased Advantages and Disadvantage of Bitmapped Graphics 6 Vector v. Bitmapped Graphics Vector image Raster image 100% 200% 100% 200% 7 2.4: Graphics for the Web There is not less than 50 different graphics file format that you can create using any graphic editor. For the web, you can use only three: GIF, JPEG and PNG Anti-aliasing is a technique for smoothing jagged edges in a graphic by fooling your eye. 8 2.5: GIF (Graphics Interchange Format) Ideal for: screen captures, line drawings, sharp-edged graphics and images with transparency Not good for: Photographic images, artwork with complex colors Supports 256 colors (8 bits/pixel) Lossless format Quality is not reduced by compression process 9 The gif format supports interlacing, transparency and animation Interlacing begins with a low-resolution image and increases details as the file continue to load (progressive display) Transparent gif is where part of the image shows through (transparent) Ancillary information: textual comments and other data can be stored within the image file 10 Advantages Disadvatanges No color information lost Can only have a maximum of 256 Compress line art well Does not compress photographs well Interlaced images possible Copyrighted format such that developers must pay royalty Animation possible Image can have transparent portion Advantages and Disadvantages of GIF Format 11 2.6: JPEG (Joint Photography Expert Group) Ideal for: Photographic images, images with rich color transitions (i.e: images of natural, real world scenes) Not good for: Images with sharp edges, text, transparency; drawings; lettering; simple cartoons Supports millions of colors (24 bits/pixel or 16 million colors) Lossy format Image quality is reduced by compression process 12 Advantages Disadvatanges Support a maximum of 16.7 million colors Losses some image information Compresses photographs well Degradation of image possible with repeated editing and saving Possible to select compression ratio versus quality No transparency Progressive (interlaced) images possible No animation Advantages and Disadvantages of JPEG Format 13 2.7: PNG (Portable Network Graphic) Newer format recommended by W3C www.w3.org/Graphics/PNG Ideal for: Both color complex-images and images with transparency Supports millions of colors Lossless format Good alternative for both GIF and JPEG 14 Advantages No color information lost Disadvatanges Not yet implemented by most browsers Can use all color depth supports more than 16.7 million colors Compresses well Image can have transparent portion Advantages and Disadvantages of PNG Format 15 GIF or JPEG or PNG? Two choices of web graphics file-type: GIF and JPEG (Since not all browsers supports PNG) The difference is that the way the data are being compressed. GIF: If the graphic is a simple black-and-white line drawing, or a picture with (relatively) large areas of equal colors. JPEG: For picture that is best describe as "photo-like“. For animations or have a transparent color graphic, then you are stuck with GIF. If you want interlacing then you have two choices either interlaced GIF or progressive16 JPEG