• This is an unpaired code
• <IMG SRC="nscape/qc2.jpg" ALT="holiday_kitty">

Controlling image display

• Controlling image size
• Rule of thumb: 72-75 pixels per inch
• View the image; note the size in pixels.
• By scaling up or down, you can control the display
• Example:
  <IMG SRC="nscape/qc2.jpg" width="250" height="150" ALT="holiday_kitty">



Better, though to resize image

• Can also control as percentage of screen width:
  <IMG SRC="nscape/qc2.jpg" width="30%" ALT="holiday_kitty">



• Controlling alignment
• With no alignment control, text starts at bottom of image and wraps
• Images can be aligned to the left or right
  <IMG SRC="nscape/qc3.jpg" align=left ALT="holiday_kitty">
  <IMG SRC="nscape/qc3.jpg" align=right ALT="holiday_kitty">
  
• Control the amount of "white space" around the image
  <IMG SRC="nscape/qc.jpg" align=left hspace=10 vspace=10& ALT="holiday_kitty">
  

The "single pixel.gif" trick

• A technique to use a small transparent image, 1 pixel by 1 pixel, to work around the limitations of HTML and put "white space" where you want it

Controlling file size

• Done in Photoshop or other image manipulation software
• Advanced manipulation beyond the scope of this tutorial
• JPEG compression--maximum compression equals minimum image quality
  (But at 72 dpi it often doesn't make that much difference)

Go to cheat sheet for this page

Return to rocket science