Graphics and Color

File format Basics:• All web pages uses images and graphics. • Images provide a lot of visual appeal to the site. • But take more time to download.• So keep the image frame size as small as possible• Three image file format available. (JPG, GIF. And PNG.)• All these formats compress images to decrease the file size. • Color depth is one more factor in image file format.

• Color depth controls the number of colors the image can display. Greater the bit depth, the greater the numbers of colors the image can display. • JPG supports 24-bit color• GIF supports 8-bit color• PNG supports 24-bit and 8-bit color.

• Knowing which file format to use and when is very import.

8 bpp

16 bpp 24

bpp

GIF• (Graphics Interchange Format)• Bitmap image format that was introduced in 1987• It is use because of wise support and portability.• GIF uses a “lossless” compression technique (no color information is discarded when the

image is compressed.)• The format supports up to 8 bits per pixel thus allowing a single image to reference a

palette of up to 256 distinct colors.• The fewer colors you use, the greater the compression and the smaller the file size.• It supports animations and allows a separate palette of 256 colors for each frame. • The color limitation makes the GIF format unsuitable for reproducing color photographs

and other images with continuous color.• But it is well-suited for simple images such as graphics or logos with soiled areas of color• Compressed using the lossless data compression technique to reduce the file size without

degrading the visual quality.

GIF Transparency:

• With GIF files you can choose one color in an image to appear as transparent in the browser. The background color or pattern of the page will show through the areas in the image that you have designated as transparent. Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than a rectangular shape. •

GIF Animation:

• Using this format can store multiple images and timing information about the images in a single file. Using GIF animation software one can take multiple statics images, play them continuously and thus create an illusion of motion. There are variety of shareware and commercial software which can used for creating animated GIF images.

JPEG• Joint Photographic Experts Group (JPG/ JPEG)• Best suited for photographs• 24-bit images that allow millions of color• Lossy compression for photographic images. • JPEG typically achieves 10:1 compression with little perceptible loss in image

quality. • Adobe Photoshop• Common format used by digital cameras and photographic image capture device.• Common format for storing and transmitting photographic images on the World

Wide web.• JPEG not be suited for line drawing and other textual or iconic graphics.• Other format like TIFF, GIF, PNG or a raw image format.

PNG • Portable Network Graphics • Is a bitmapped image format that lossless data compression and is

designed for the web.• PNG is a royalty-free file format that is intended to replace GIF• This lossless format compresses 8-bit images to smaller fi le sizes than GIF.• PNG supports greater color depths than GIF, so it supports 8-bit indexed

color• Not the best choice for photographic images.• PNG supports transparency and interlacing, but not animation• One useful feature of PNG is its built-in text capabilities for image

indexing, allowing you to store string of identifying text within the fi le itself.

Choosing the Right Format• GIF—Still the most common format for all types of simple colored

graphics and line art. GIF’s transparency feature lets you seamlessly integrate graphics into your Web site.• JPG—Use JPG for all 24-bit full-color photographic images, as well as

more complicated graphics that contain color gradients, shadows, and feathering. • PNG—You can use PNG as a substitute for GIF. PNG offers greater

compression and color depth than GIF. Because PNG does not compress your 24-bit images as well as JPG does, do not use it for photos.

Image and Image map

<img>• HTML uses the <img> tag to insert an image into an document. • The tag uses the alt attribute to provide alternate description for the image

begin downloaded.• The src attribute to give the location of the address of the image.• Stand Alone Tag

<img src="smiley.gif" alt="Smiley face“ border=“1” height=“150” width =“150”>

Attributes of <img> tagAttribute Value Description

Src URL Specifies the URL of an image.

Alt text Specifies an alternate text for image.

Align TopBottomMiddleLeftRight

Specifies the alignment of an image according to surrounding elements.

Border pixels Specifies the width of the border around an image.

Height pixels Specifies the height of an image.

Hspace pixels Specifies the white space on left and right side of an image.

Vspace pixels Specifies the white space on top and bottom of an image.

Width pixels Specifies the width of an image.

Ismap Ismap Specifies an image as a server-side image-map.

Usemap #mapame Specifies an image as a client-side image-map.

Image Map• Image map is an image with clickable areas which are hyperlinked to

other web pages. These clickable areas on the images are called as hotspots. The advantage of a image map is that instead of using multiple images one can use a single image to have multiple hotspots.

<map> tag• The <map> tag is used to define a client-side image-map. The map

element contains a number of area elements, that define the clickable areas in the image map. The name attribute is required in the map tag. This attribute is associated with <imp>’s usemap attribute and created a relationship between the image and the map.

<area> tagThe <area> tag defines an area inside an image-map. The area elements is always nested inside a <map> tag. Area shapes can be rectangle, circle and a polygon.

<img src="Desert.jpg" alt="Desert" usemap="#Desert">

<map name="Desert"> <area shape="rect" coords="100,100, 200,300" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map>