1 / 13

IMAGES: A Picture Is Worth a Thousands Words,

Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images. IMAGES: A Picture Is Worth a Thousands Words,. Insert an image into an HTML document and control its height and width. Create text-based alternative to an inline image

mabyn
Download Presentation

IMAGES: A Picture Is Worth a Thousands Words,

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related