1 / 18

HTML Images

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

avon
Download Presentation

HTML Images

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. 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 • <img src="name and location of image file"> • 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 a644 permission. Instructor: A. Burns

  13. Aligning Images • To insert an image • <img src=“images/myImage.gif"> • To right-align an image: <img align=“right” src=“images/myImage.gif"> • You can also left-align the image: <img align=“left” src=“images/myImage.gif"> Instructor: A. Burns

  14. ALT attribute <img src="mlk.gif" alt=“M.L. King’s picture” width=“336” height=“400”> • 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

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

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

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

  18. Example of image scaling <html> <head><title> Image Scaling </title></head> <body> <img src=“cat.jpg” width=“320” height=“266”> <img src=“cat.jpg” width=“160” height=“266”> <img src=“cat.jpg” width=“320” height=“133”> <img src=“cat.jpg” width=“160” height=“133”> </body> </html> The image size is 320x266 px. How will a browser display these images? scaling example Instructor: A. Burns

More Related