1 / 22

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). IMAGES: A Picture Is Worth a Thousands Words,.

sadie
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 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) IMAGES: A Picture Is Worth a Thousands Words,

  2. 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 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. - 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 PNG (Portable Network Graphics) -new

  6. 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 CHOOSING AN IMAGE FORMAT

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

  8. 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 BITS PER PIXEL (BPP)

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

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

  11. 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 www.spinwave.com) GRAPHIC TIPS

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

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

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

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

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

  17. Clear It is used to stop the flow of the text around the image <br clear = “left”> <br clear = “right”> <br clear = “all”> LINE BREAKS

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

  19. border-style: dotted|dashed|solid|double|grove|ridge|inset|outset|hidden|none <img src =“gold.jpg” alt=“altın” style = “border-style:solid;”> border-width: thin|medium|thick|absolute|inherit <img src =“gold.jpg” alt=“altın” style = “border-width:10px;”> border-color: color#|transparent|inherit <img src =“gold.jpg” alt=“altın” style = “border-color:”#FF0000”> IMAGE BORDERS

  20. margin: margin-width | inherit <img src =“gold.jpg” margin: 15px;”> Establishes a 15 pixel margin around the image vspace AND hspace <img src =“gold.jpg” hspace = “20” vspace = “20”> Establishes a 20 pixel horizontal and vertical space around the image IMAGE MARGINS

  21. The custom bullets are nice, as long as the images aren’t too big! list-style-image: url | none | inherit <ul style = “list-style-image:url(pepper.gif)”> IMAGES AS BULLETS

  22. Clickable images... <a href = “index.htm”><img src = “home.gif”><A> TWO HTML CODING TRICKS lowsrc: low resolution loaded before loading the original image (They must be in same size) <img src = “butterfly.gif” lowsrc =“bfl.gif”> <nobr>no line break</nobr> Description: overrides browser’s ability to wrap text to the next line (type:container) long text, url, a line of computer code IMAGE LINKS

More Related