HTML Images - PowerPoint PPT Presentation

About This Presentation
Title:

HTML Images

Description:

Images can be displayed in two ways: as inline images or as external images. an inline image displays directly on the Web ... Battling Bandwidth Limitations ... – PowerPoint PPT presentation

Number of Views:133
Avg rating:3.0/5.0
Slides: 19
Provided by: facwebC
Category:
Tags: html | battling | images

less

Transcript and Presenter's Notes

Title: HTML Images


1
  • HTML Images

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

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

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

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.

6
GIF
  • GIF are best for
  • Images with large areas of solid, flat color e.g
  • Logos
  • Cartoons

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

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

9
GIF
10
GIF
  • Problem?

11
JPEG
  • Solution

12
Inserting Images
  • ltimg src"name and location of image file"gt
  • Adds an image
  • We usually put images in a separate folder
  • E.g. ltimg srcimages/myImage.gif
  • The image file resides on the web server (shrike)
    and has a 644 permission.

13
Aligning Images
  • To insert an image
  • ltimg srcimages/myImage.gif"gt
  • To right-align an image
  • ltimg alignright srcimages/myImage.gif"gt
  • You can also left-align the image
  • ltimg alignleft srcimages/myImage.gif"gt

14
  • HTML page on M.L. King
  • lthtmlgt
  • ltheadgtlt/headgt
  • ltbodygt
  • lth1 align"center"gt Martin Luther King, Jr.
    lt/h1gt
  • ltpgt ltimg src"mlk.gif" align"right width336
    height400gt
  • 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. lt/pgt
  • ltpgt 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 ..lt/pgt
  • lt/bodygt
  • lt/htmlgt

15
ALT attribute
  • ltimg src"mlk.gif" altM.L. Kings picture
    width336 height400gt
  • 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)

16
Clickable image hyperlinks
  • Anchors can be used to hyperlink images instead
    of text.
  • lta hrefURLgtltimg srcphoto.jpg altMy
    photogtlt/agt
  • 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.
  • lta hrefURLgtltimg srcphoto.jpg altMy
    photo border0gt lt/agt

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

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.

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.

20
Example of image scaling
  • lthtmlgt
  • ltheadgtlttitlegt Image Scaling lt/titlegtlt/headgt
  • ltbodygt
  • ltimg srccat.jpg width320 height266gt
  • ltimg srccat.jpg width160 height266gt
  • ltimg srccat.jpg width320 height133gt
  • ltimg srccat.jpg width160 height133gt
  • lt/bodygt
  • lt/htmlgt
  • The image size is 320x266 px. How will a browser
    display these images?
  • scaling example
Write a Comment
User Comments (0)
About PowerShow.com