Assuming that we have some graphics in some format in a file, there are two essentially different ways to use it in a Web document. You can either link to it or to embed it in your document. In the first case, you use an anchor (A) element; in the latter case, an IMG element. In the first case, when a user accesses your document he sees e.g. a verbal phrase which acts as a link, and activating that link causes an image to be displayed, either in the same window or in another, depending on the browser and its settings. On the other hand, an embedded image is part of your document; when a user accesses your document, the image is loaded along with it and displayed as part of it.
In both cases, the user will see the image only if the browser supports the particular graphics format. The most commonly supported formats are GIF and JPEG. They are often the only formats supported for embedded images. As regards to choosing between these formats, the document Image Use on the Web by WDG gives the following rule of thumb: "Lots of colors, JPEG... Solid colors or no gradations, GIF."
For linked images, the support is typically wider (it might include e.g. PostScript, PDF, and PNG) and extensible by the user (by installing new viewers and making suitable additions to the settings of the browser). The reason is that linked images are typically implemented so that the browser knows nothing of the graphics format itself but only knows how to launch a separate program to present it. It is even possible that a browser cannot process embedded images at all but can launch a separate viewer for linked images.
Thus, referencing a graphic by linking (A element) provides better accessibility than using embedding (IMG element). If the graphic is essential, this might be important. In fact, the HTML 2.0 specification recommends using A for essential graphics, IMG for non-essential. Note: on browsers which support embedded images, it is usually possible to open a document in a new window; thus, the usefulness (or necessity) of seeing an image alongside with the rest of the document need not be an objection to using linking.
As a special case, it is possible to combine linking and embedding in a sense: you can create a document which contains an image which acts (instead of verbal link text) as a link to another image. Typically, the embedded image ("thumbnail") is rather small, stamp-like, often a small coarse version of the image to which it points as a link.
Linking to an image is usually permitted without specific permission. On the other hand, embedding an image means using it in a way which requires the author's permission, and the author must be mentioned. (See Web Law FAQ.) Obviously, some images are so simple that copyright is not applicable. Moreover, there is a large number of collections of images, some of which are in the public domain.
To illustrate linking to images and embedding images, let us consider a GIF image which has been put onto a suitable place so that it is accessible using the URL http://www.hut.fi/%7elsarakon/sae.gif. Now I could refer to it in the following way:
<A HREF="http://www.hut.fi/%7elsarakon/">Liisa Sarakontu</A> has drawn <A HREF="http://www.hut.fi/%7elsarakon/sae.gif">a picture of Siamese algae eater</A>.On the other hand, since Liisa has given me the permission to do so, I could embed the image into a document of mine as follows:
The Siamese algae eater (<I>Crossocheilus siamensis</I>) is often mixed up with another algae eating fish, the "false Siamensis" (<I>Garra taeniata</I> or <I>Epalzeorhynchus sp.</I>). Below you can see drawings of them by <A HREF="http://www.hut.fi/%7elsarakon/">Liisa Sarakontu</A>. <P> <IMG SRC="http://www.hut.fi/%7elsarakon/sae.gif" ALT="[Picture of Siamese algae eater]"> <P> <IMG SRC="http://www.hut.fi/%7elsarakon/false.gif" ALT='[Picture of "false Siamensis"]'>The issue of good use of images is very difficult and many-faceted. No attempt to cover it will be made here. I have written a separate treatise How to use images in communication in general and on the Web in particular.
There is no general support in HTML 3.2 to presenting mathematical formulas. Consult the W3C document on Math Markup to see what work is in progress in this respect. However, you can use some software (e.g. TeX) to produce the representation of a formula as an image, e.g. in PostScript form, and use the IMG tag to embed it into your document or the A tag to create link to it. The latter method is often worth considering, especially for large formulas. The reader may prefer reading the text without distractions and looking at the formula (image) at the very moment he is prepared to do so. Moreover, he may prefer looking at it in a separate window (which is separately adjustable in size and positionable on the screen).
In some cases, when just a few separate symbols are needed within the text and they have reasonable textual alternatives, the following kind of approach can be suitable:
The Greek letter <IMG SRC="http://lynx.uio.no/gif/Sigma.gif" ALT="capital sigma"> is often used to denote summation.
There is a problem, however: since an image has fixed dimensions whereas the size of letters is browser-dependent, there might be an unaesthetic disproportion. - Notice that HTML 4.0 contains a relatively large set of escape sequences for various symbols, including Greek letters as used in mathematics. However, it will take time before browsers in use generally support them.
Sometimes it is best to present mathematical expressions in linearized notation. For example, instead of trying to find a way of presenting the square root of 2 in the normal mathematical way, you might write just sqrt(2). It depends on the intended audience whether you need to explain such notations.
If you use images for presenting mathematical formulas, try to formulate an alternate purely textual (linearized) presentation, which you would then include as the value of the ALT attribute. A simple example:
Assignment 42. Compute <IMG SRC="integral.gif" ALIGN=MIDDLE ALT="the integral of exp(x**2) from 0 to infinity.">
More information: Math in HTML (and CSS).