Multimedia Tutorial - Using Images on the Web

This article explains in detail the conditions under which images and text are used, how to speed up the download of images, and how to choose the appropriate image format.

When to Use Images

For most images, one image may be worth a thousand words. However, it is still important to note that no one pays attention to the chatterboxes. First and foremost, it is important to treat the graphics in the document as a visual tool, rather than as unnecessary decoration. They should support the content of the text and help readers navigate through the document. The use of images can make the content of the document clearer, and can also add annotations or examples. Photos, charts, graphs, maps, and illustrations that support the content are natural and appropriate options. For example, product photos are a crucial component of online catalogs and shopping guides. Icons and printed symbols with link functions, including animated images, can also be very effective visual guides to content or external resources. If an image does not serve any of the above purposes for a document, it should be discarded!

When considering adding images to a document, another important factor to consider is the time delay caused by retrieval when transmitting the document over the network, especially through a modem connection. A general document can accommodate up to 10-15 kilobytes, while an image can easily reach several hundred kilobytes in size. Moreover, the total download time of a document is not just the sum of all its parts, but also the delay caused by network load.

According to the speed of the connection (also known as bandwidth,bandwidth，usually represented by bps or b/s, and the possibility of network congestion that may slow down connection speed, to download a separate document containing a 100 KB image, it may be necessary to do so at around 1 or 2 o'clock in the morning, when most people are still sleeping, using a 57.6 Kbps modem to take about 15 seconds to complete the download, or it may take more than 10 minutes to download using a 9600 bps modem at noon. Have you received this image?

Of course, the use of images and other multimedia will prompt Internet service providers to continuously pursue faster, better, and more robust ways to provide web content. Soon, 56 Kbps modem connections will be as outdated as horses and carriages (just like the 9600 bps modems), and they will be replaced by new technologies such as cable modems and ADSL. In fact, most connections will soon exceed 1Mbps in speed.

With the decrease in prices, the use of the network will continue to increase, bringing about congestion issues. If you are trying to access an overloaded server, then no matter how fast your network connection speed is, you cannot access it normally.

When to use text

Text is not outdated. For some users, text is the only accessible part of their documents. We suggest that in most cases, documents should be accessible to anyone, including those who cannot view images or those who disable the browser's automatic download of image features to improve network connection performance. Although the need to add images to documents may be very strong, there are times when a plain text document is indeed more meaningful.

Documents converted from other formats to web pages rarely contain embedded images, while references and other serious content are usually available in pure text form.

When access speed is very important, it is advisable to create plain text documents. If you know that users may be competing to access your document, you should avoid using images in the document to meet the needs of these users. In some extreme cases, you might provide a homepage (gateway page) that allows users to choose between two copies of your work: one with images and the other without (popular browsers have special image icons to reserve space for images that are yet to be downloaded, and these placeholders may mess up the document layout, even turning it into something unreadable).

If you want your document to be easily searched by a multitude of index services on the Web, text is the most suitable form - simply supporting images, without decorations and unnecessary graphics. However, these search engines usually ignore the existence of images. If the main content of the page is provided through images, there will be very little information about your document in the online Web directory.

Speed up the download speed of images

In addition to carefully selecting the content to be included in the document, there are many methods to improve the load and latency issues brought by images:

Maintain simplicity

A full-screen 24-bit color graphic will still occupy most of the network bandwidth even after the size is reduced through standard format compression (such as GIF or JPEG, etc.). Therefore, it is best to use various image management tools to optimize the size of the images and reduce the number of colors to the minimum pixel count. Simplify your drawings and avoid using landscape photos, and also avoid large blank backgrounds in images, unnecessary borders, and other space-consuming elements. Additionally, avoid using dithering effects (mixing two similar colors to obtain a third color), as this technique can greatly reduce the compressibility of the image. Instead, try to use large areas of consistent colors, as they can be easily compressed in GIF or JPEG formats.

Reuse images

This point is particularly applicable to icons and GIF animations. Most browsers cache the introduced document components in local storage, which allows for faster data retrieval and uses fewer network connections. For smaller GIF animation files, it is advisable to prepare each consecutive image so that only the parts that have changed in the animation need to be updated, rather than refreshing the entire image (which can also speed up the display of the animation itself).

Split large documents

This is a general principle for including images. Many small document fragments are organized together using hyperlinks (of course, they are used!) and effective tables of contents, which makes them easier for users to accept compared to large blocks of text in the entire document. Generally speaking, people prefer to flip between several pages rather than waste time waiting for a large document to download (which is somewhat similar to the TV channel browsing syndrome). A good rule of thumb is to keep each document around 50 KB in size, so even readers with the slowest connections will not feel frustrated.

Isolate large graphics when necessary

Provide a link specifically for very large images, which may be a thumbnail of an image, allowing the reader to decide whether to spend time downloading the entire image and when to do so. Moreover, since such images are not mixed with other elements in the document like inline images, they are easy to identify and store in local storage for future reference.

Specify the size of the image

Finally, another method to improve performance is to include the height and width of the image rectangle in its label. By specifying these dimensions, some additional steps can be saved, so that browsers with extended functionality do not need to download, check, and calculate the size of the image in the document any more. However, there is a downside to this approach. If the user turns off the automatic download of images, the browser will still display the space reserved for the image in the specified size. This usually leaves the reader with an empty frame, although there is no solution to this problem yet, we still encourage you to use these size properties because we encourage all behaviors that can improve web performance.

JPEG or GIF?

If the source of the image or your tool software tends to favor a certain format, you may only be able to use one of JPEG or GIF images. Now, both formats are widely supported by browsers, so there will be no problem with whether users can browse them.

However, we still recommend that you use certain tools to create or convert these two formats to make full use of their respective functions. For example, you can apply the transparency feature of GIF to icons and small decorative symbols. And use JPEG to compress larger color-rich images to speed up download speed.

<img> Tag

The <img> tag allows to reference or insert graphic images in the current document flow. For more detailed information about this tag, please refer to: