Embedding Images into a Web Page
Once you've created your image, saved it as either GIF, PNG or JPEG format, then uploaded it to a web server, you can embed it into a web page.
Embedding an image into a web page is done using HTML. HTML has a special tag for this - the <img> tag. Using the <img> tag, you can embed any image on the Internet.
Here's an example:
You can learn more about HTML and images with the HTML images lesson of the HTML tutorial. You might also be interested in image maps
Height and Width
The <img> tag allows you to provide a width and height. These are optional. If you do use these attributes, you should use the exact dimensions of the actual image. Changing this doesn't change the actual download size of the image - it just forces a larger/smaller image into a different space. If you need to change the size of an image, for best results, resize it in your photo editor or illustration package.
Height & Width for Mobile Devices
Although the height and width attributes can be useful, they can also cause problems if the user's screen is not as wide as the image. For example, if a user views your web page using a mobile device, they might have to scroll sideways to see the whole image. To overcome this issue, you can use the CSS max-width property.
The CSS max-width property allows you to specify a maximum width (for example, max-width:100%). By specifying a max-width of 100% or less, the image won't mess up the layout like it could if you had specified an absolute size for the image. If the actual image is wider than the screen, it will be scaled down until it is 100 percent (or however much you specify) of the size of its containing box. So, assuming the containing box is narrower than the screen width, the image won't push out wider than the screen.
If you choose this method, you cannot use the width and height attributes (because they will override your max-width settings). You should not use any height settings (such as max-height) either, as they could cause the image to skew. By leaving the height properties out of it, the image will rescale proportionally. In other words, the browser will work out it's correct width and height dimensions if you only provide max-width.
Background Images
You can use the CSS background-image property, or if you prefer, the background property to display a background image. The image could be displayed on the background of any HTML element - background of the whole page, a table cell, a div element etc.
Example of the CSS code for displaying a background image:
You can learn more about CSS background code with the CSS background code lesson of the CSS tutorial.