1. 1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images

2. 2 OBJECTIVES Insert an image into an HTML document and control its height and width. Create text-based alternative to an inline image Float an image within a Web page in such a way that text flows around it. Center an image within screen display

3. 3 GIF (Graphics Interface Format) GIF is the format commonly used to save simple images that require only a small number of colors (buttons, icons, cartoons, logos). - Supports up to 256 colors (8 bits) - You can interlace GIF files (first appear with poor resolution and then improve in resolution until the entire image arrives) -Transparent backgroud is possible -Animated images are possible -GIF compression is “lossless”.. accounts for all data bits in the image. image quality does’not change during compress/uncompress. best suited for line art that contains larger areas of the same color

4. 4 JPEG (Joints Photographic Experts Group) JPEG is used to store complex images that involve a large number of colors, such as photographs and artwork. - Supports 16.7 million different colors (8 bits and 24 bits,Full- color hardware is necessary in order to view all colors in such images.) - Smaller than GIF; uses a higher compression ratio - When repeadedly saving; lossy compression to store the image (some of pixels are discarded). - Image Editors offer to save as Progressive image file (layer) But slower to load (one layer at a time). - JPGs do not have GIF’s advantages

5. 5 IMAGE SIZES How an image can become a large, slow, troublesome to your users? 500 X 300 (150,000 pixel) If file format is 8 bits per pixel  1,200,000 bits If user modem 56.6 –kilobits-per-second (kbps) 1,200,000 /56,600  21 seconds If this is the only image and 56,6 kilobits modem Many user uses 28.8 kbps and takes 42 seconds to download! If you have 10 – 12 images like that!!! If you are using 24 bits of image

6. 6 GRAPHIC TIPS Followings are some techniques for reducing download time: Simplify your graphics; building an image  keep the image simple  Use the fewest color  Save as GIF of JPEG  Large areas of a single color are best for compression

7. 7 GRAPHIC TIPS Followings are some techniques for reducing download time: Divide up large pages; Keep images under a 50 kilobyte. Keep large graphics on their own page; - Put it on a page itself and provide a link (external image) Full size of the image - Thumbnail image as the link - How large that full-size file, give an idea (1,024x768x24 bpp)

8. 8 INSERTING IMAGES TO A WEB PAGE Description: inserts graphics, photograph, line art, or other image into screen display Type: Empty Attributes: align, alt, border, height, hspace, src, vspace,... - nongraphical browsers display alt value - some browsers force the images into specific size and color - Some users use turn off “automatic image loading”

9. 9 IMAGE TAG ATTRIBUTES src Where to find the inserted image Minimize the home server’s load :( --- Put everthing in the same directory :( --- A place for everything and everything in its place :)

10. 10 IMAGE TAG ATTRIBUTES alt Provides text based description of the image; - if browsers are text or sound based browsers - if browser can not display the actual image - if user has turned off image loading - max. 1,024 bytes long - It can serve as a substitute for icons See the birdie

11. 11 IMAGE TAG ATTRIBUTES Height AND WIDTH image dimensions; Align; A- Horizontal Alignment; left, right

12. 12 IMAGE TAG ATTRIBUTES B- Vertical Alignment Top: aligns the top of the image with the top of the tallest itrm in the current text line Middle:aligns the middle of the image with the bottom, or baseline of the text bottom: aligns the bottom of the image with the bottom, or baseline

13. 13 CENTERING IMAGES Centering Objects Description: Centers object within screen display Type: container Attributes: None There is no element! Centering a Paragraph:... left, right, and justify are possible with P tag.