Images Resolutions

1
Images - Resolutions
Image scanned at 72 dpi
2
Images - Resolutions
Display of same image scanned at two resolutions
Image scanned at 300 dpi
Image scanned at 72 dpi
3
Images HTML Tag

• House at Sunset" width"216" height"133"
  border"0"

4
Images HTML Tag

• House at Sunset" width"216" height"133"
  border"0"
• 72dpi image is 216 x 133 (11K)

5
Images HTML Tag

• House at Sunset" width"216" height"133"
  border"0"
• 72dpi image is 216 x 133 (11K)
• 300dpi is 899 x 554 and scaled to 216 x 133 in
  the IMG tag (65K)

6
Images - Resolutions

• Tip! For details, scan at higher resolutions and
  crop down.

300 dpi cropped
72 dpi enlarged
7
TTYP Identical Images?

• Dont resize images using the height and width
  elements of the HTML tag.
• Scan and save master images in a lossless
  (e.g., BMP or PIC) format.
• Make copies of images to be used.
• Save them at the size to be displayed.

8
TTYP Why broken?

• When you publish your Web page, there is a broken
  image icon displayed in place of your image.
  What are the possible reasons why this would
  occur?

9
Images Online Delivery

• Dont insert graphics until after
• images are where you want them
• the HTML document has been saved in the proper
  directory
• Avoids absolute (hard coded) paths

10
Images Online Delivery

• Keep file directories the same between your
  machine server
• Keep files in same relationship to each other

11
Images Online Delivery

• Image in a directory above the Web page

12
Images Online Delivery

• Image in a sibling directory to that in which
  the Web page is located

13
Images Online Delivery

• Image in the same directory as that in which the
  Web page is located

14
Images Online Delivery

• Image in a child directory of that in which the
  Web page is located

15
Images Online Delivery

• Remember to upload graphics with page
• Avoid changing directories or file names after
  moving to server
• Safest put pages images in same directory

16
TTYP Why broken?

• Broken image
• Not uploading images with page
• Hard coding the path in the document
• Changing the file name or location after coding
• Wrong path to image