Instructor: A. Burns 1 HTML Images

Instructor: A. Burns 2 Inserting a Graphic Images can be displayed in two ways: as inline images or as external images.  an inline image displays directly on the Web page and is displayed when the page is accessed by a user  an inline image can be placed on a separate line in your HTML code, or it can be placed directly within a line of text  An external image needs an external application to be viewed

Instructor: A. Burns 3 Inline Images Three graphic file types are supported by today's browsers.  GIF (AKA Compuserve GIF) - Graphic Interchange Format  JPEG - Joint Photographic Experts Group  PNG - Portable Network Graphics

Instructor: A. Burns 4 GIF GIF files are best used for images that have broad areas of flat color and are highly defined. Supports transparency and animation Supports a maximum of 256 colors called 8- bits. They are cross platform They are compressed

Instructor: A. Burns 5 GIF The great advantage of GIF is that you can choose to have one color that is transparent  That is, lets the background color of a page show through part of the image Another important advantage of GIF is that you can create animation with them.

Instructor: A. Burns 6 GIF GIF are best for  Images with large areas of solid, flat color e.g Logos Cartoons

Instructor: A. Burns 7 JPEG  JPEG  JPEG can contain 16.7 million colors (called 24- bit) as to 256 colors for GIF  JPEG are best for photographs, watercolor images.  JPEG are file sizes are smaller

Instructor: A. Burns 8 JPG JPEG files are best used for images that require many colors such as photographs. JPEG has a higher compression ratio but it is a "lossy" compression (compression sacrifices some image data in reducing file size).

Instructor: A. Burns 9 GIF

Instructor: A. Burns 10 GIF Problem?

Instructor: A. Burns 11 JPEG Solution

Instructor: A. Burns 12 Inserting Images  Adds an image  We usually put images in a separate folder  E.g. <img src=“images/myImage.gif”  The image file resides on the web server (shrike) and has a 644 permission.

Instructor: A. Burns 13 Aligning Images To insert an image  To right-align an image: You can also left-align the image:

Instructor: A. Burns 14 HTML page on M.L. King Martin Luther King, Jr. I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self- evident: that all men are created equal." …… I have a dream today. I have a dream that one day the state of Alabama, whose governor's lips are presently dripping with the words of interposition and nullification, will be transformed into a ….. …………

Instructor: A. Burns 15 ALT attribute Allows you to provide a text equivalent for the object. Useful for…  Browsers that do not display images  Text readers for blind, color-blind, low-sighted  Search engine bots (the alt attribute makes sure that they won't miss important sections of your pages)

Instructor: A. Burns 16 Clickable image hyperlinks Anchors can be used to hyperlink images instead of text. Whenever the mouse enters the clickable region, it will display the contents of the ALT attribute. By default, clickable images have blue borders  No blue border? Set the BORDER attribute inside the IMG tag to 0.

Instructor: A. Burns 17 Bandwidth Limitations Image files consume more bandwidth than text files Users who access the Internet via telephone lines will have to wait for image files that are 100KB or larger Whenever possible, use image files no larger than 30-40KB

Instructor: A. Burns 18 Battling Bandwidth Limitations Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading.  TIP: To find an image dimension: open it using a Web browser, then select Properties on the File Menu.

Instructor: A. Burns 19 Scaling Images Rescale the image by changing its WIDTH and HEIGHT attributes. Preserve the aspect ratio (height-to-width ratio) otherwise the image gets distorted. Divide or multiple the dimensions by the same factor. Scaling down an image DOES NOT reduce its bandwidth requirements. To reduce the file size, you need to compress the image.

Instructor: A. Burns 20 Example of image scaling Image Scaling The image size is 320x266 px. How will a browser display these images? scaling example