IMAGES: A Picture Is Worth a Thousands Words, - PowerPoint PPT Presentation

images a picture is worth a thousands words n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
IMAGES: A Picture Is Worth a Thousands Words, PowerPoint Presentation
Download Presentation
IMAGES: A Picture Is Worth a Thousands Words,

play fullscreen
1 / 13
IMAGES: A Picture Is Worth a Thousands Words,
91 Views
Download Presentation
mabyn
Download Presentation

IMAGES: A Picture Is Worth a Thousands Words,

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. 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 OBJECTIVES

  3. 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 GIF (Graphics Interface Format)

  4. 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 JPEG (Joints Photographic Experts Group)

  5. 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 IMAGE SIZES

  6. 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 GRAPHIC TIPS

  7. 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) <A HREF =“image.gif”>Full size of the image</A> - Thumbnail image as the link - How large that full-size file, give an idea (1,024x768x24 bpp) GRAPHIC TIPS

  8. <img> 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” INSERTING IMAGES TO A WEB PAGE

  9. src Where to find the inserted image Minimize the home server’s load :( <img src = “http://bilkent.graph.edu.tr/images/fire.gif> --- Put everthing in the same directory :( <img src = “fire.gif”> --- A place for everything and everything in its place :) <img src = “images/fire.gif”> IMAGE TAG ATTRIBUTES

  10. 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 <H2>See the birdie <img src = “hotnew.gif” alt =“**NEW**”></H2> IMAGE TAG ATTRIBUTES

  11. Height AND WIDTH image dimensions; <img src = “butterfly.gif” height =“150” width = “200”> Align; A- Horizontal Alignment; left , right <img src = “butterfly.gif” align =“left”> <img src = “butterfly.gif” align =“right”> IMAGE TAG ATTRIBUTES

  12. 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 <img src = “butterfly.gif” align =“top”> <img src = “butterfly.gif” align =“middle”> <img src = “butterfly.gif” align =“bottom”> IMAGE TAG ATTRIBUTES

  13. <CENTER>Centering Objects</CENTER> Description: Centers object within screen display Type: container Attributes: None There is no <img ...... align =“center”> element! Centering a Paragraph: <p align = “center”>...</p> left, right, and justify are possible with P tag. CENTERING IMAGES