Embedding Images into a Web Page

Once you've created your image, saved it as either GIF 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:

Result:

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

You'll notice that the 'img' tag allows you to provide a width and height. Although this is optional, you should provide these, as it allows the browser to allocate the correct amount of space on the web page before the image loads. Also, 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.

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.

• << Previous
• Next Lesson >>