1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Choosing an Image Format Image Sizes Bits Per Pixel Graphic Tips Image Tag Attributes Line Breaks Centering Images Image Borders Image Margins Images As Bullets Image Links Two HTML Coding Tricks (lowsrc, nobr)

2 OBJECTIVES Recognize applications for common image formats 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. Place a border around an image Center an image within screen display Use an image as a hyperlink Create unordered lists that use image bullets

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 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 PNG (Portable Network Graphics) -new - Supports 16.7 million different colors (8 bits and 24 bits) - Lossless compression algoritm - Open standard; everyone free to use it (is still developing) - Some of the most up-to-date browsers support - A large and groving group is trying to establish PNG as the Web Standard

6 CHOOSING AN IMAGE FORMAT Try to resist Exotic image formats (installing a plug-in) Don’t shy away from the PNG image format (popular browser recognize it) It may be best to use only GIF and JPEG Image editors allow to use in different formats Use them to convert exotic images

7 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

8 BITS PER PIXEL (BPP) Each file format supports a specific range of bits per pixel (bpp). 1 bpp  2 colors 4 bpp  16 colors 8 bpp  256 colors 16 bpp  32,768 colors 24 bpp  16,777,216 colors

9 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  Avoid dittering (reduces compressibility, all systems don’t ditter in same way)  Large areas of a single color are best for compression

10 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)

11 GRAPHIC TIPS Followings are some techniques for reducing download time: Reuse the images on your page; Browser can take it from the local cache. Preload images if you are going to use them in rollovers; - small images that load or change when the mouse pointer moves over. Use image-reduction software or Web site to decrease the size of images; - They clean up images by removing unused colors form the palette (GifCruncher 

12 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”

13 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 :)

14 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

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

16 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

17 LINE BREAKS Clear It is used to stop the flow of the text around the image

18 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.

19 IMAGE BORDERS border-style: dotted|dashed|solid|double|grove|ridge|inset|outset|hidden|none border-width: thin|medium|thick|absolute|inherit border-color: color#|transparent|inherit

20 IMAGE MARGINS margin: margin-width | inherit Establishes a 15 pixel margin around the image vspace AND hspace Establishes a 20 pixel horizontal and vertical space around the image

21 IMAGES AS BULLETS The custom bullets are nice, as long as the images aren’t too big! list-style-image: url | none | inherit

22 IMAGE LINKS Clickable images... TWO HTML CODING TRICKS lowsrc: low resolution loaded before loading the original image (They must be in same size) no line break Description: overrides browser’s ability to wrap text to the next line (type:container) long text, url, a line of computer code