HTML: Including Picture-Images

IMAGES

HTML supports all forms of multimedia: graphics, sound and full video. Although some care must be taken when including large graphical files into any document, you should experiment with the inclusion of small graphical images to see how a document can begin to “come to life”.

A picture can be scanned and the image saved in a wide variety of different file formats. The most commonly used file format for Web pages are GIF, JPEG or PNG (pronounced “jif”, “jay-peg” and “ping” respectively). JPEG is used for photographic quality images and GIF is used for everything else. PNG is expected to replace GIF in the near future. A relative new file format is JPEG2000 which has improved compression algorithms to improve performance in particular it adds extra data controls allowing the ability to store formatting for the Web, mobile devices and print within a single file. A format to watch for the future.

Once the picture has been saved in the appropriate format it can be included into an HTML document using the same constructs as if it were an external file.

Consider the following demonstration HTML document. One image is stored in the same storage location as the original HTML document, whilst the second image is on a separate system (the BBC’s Web site).


<h3>Example Document With an Image</h3>

<ul>
<li><a href="winter.gif">This is Polperro in winter.</a></li>
<li><a href="http://www.le.ac.uk/corporateid/university/000066/unilogo.gif">This is the University of Leicester's logo</a>
</ul>

This would be displayed by a Web browser in the following way:


Example Document With an Image

Click on the highlighted areas to view the images and use the browser’s back button to return to this page.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *