The image element is one of the most powerful tools of web development because it gives you the ability to diplay pictures, graphs, graphics, etc. It is also one of the more complicated elements because there are so many variables.
The standard resolution for images for the web has been 72 dpi (dots per inch) for a very long time. What this means, is that if you format the resolution of your images at 72 dpi, then the size of the image as displayed on the web will be 1 inch for every 72 pixels. I can save my images at higher resolutions, but they will only be displayed at 72 dpi when they are displayed on a monitor. So if I had a one inch image that was saved at 144 dpi, it would display as a 2 inch image (unless I manipulated that variable). It is best to save the images you are going to use at the size you want them to display using a 72 dpi setting.
It must be understood that this is a general rule, as some browsers are going to re-render your page based upon rules within that device. However, it is good practice to optimize your images so that they are as small as possible to provide the quality you desire from your site.
The only formats for images that will currently display reliably on the web are JPEG, GIF and PNG. Each have their own advantages and disadvantages and there are many locations that can provide you with details. Generally speaking GIF are better for graphic design images with low color pallets and where you want to use annimation or transparency. JPEG is a good choice for photographs. However, PNG are quickly rising as the most desireable format because the leverage the advantages of both JPG and GIF.
Code for Image:
<img src="../../images/Eagle-targeting-640x232-KWT_0086.jpg" width="640" height="233" alt="Eagle Targeting">
Elements of the image tag:
src - provides the path to the image
width and height give the size to display the image. This can be provided in pixels, ems or %.
alt - Alternate description, provides information about the image for those cannot dipslay or see the image.