3.1 Graphical Elements

3.1.1 Format

Theorectically speaking, there is no limit in the Web specifications to the graphical formats that can be used on the Web. You just need a MIME type so that the format is labelled correctly for transfer across the Web, and so that a suitable viewer (if one exists) can be located at the other end.

(Ref.:  W3C Graphics Activity statementXML specification )

In practice, certain formats are more widely understood than others; certain formats are more suited to one type of graphical data than another; so you should make an informed choice about what format to use. (Tips: Actually a lot of graphical formats are not supported, e.g. even .jpg image of CMYK color mode is not able to be display oon screen with all current browsers.)

Portable Network Graphics (PNG)W3C Overview of PNG
PNG Group homepage
Joint Photographic Experts Group (JPEG)W3C Overview of JPEG
ISO JPEG homepage
Graphics Interchange Format (GIF)to be added
Scalable Vector Graphics (SVG)W3C Overview of SVG
Web CGM ProfileW3C Overview of the WebCGM Profile
CGM Open website

3.1.2 Implementation with Html

Graphics may be associated with an HTML document in 5 standard ways:

1. External link, using A

This allows any stand-alone viewer to be used, which can (but need not) be a different program to that used to display HTML. Useful for unusual image formats. Use the A element in HTML for this, e.g.:

<A HREF="anameexample_img.jpg">anexample_img</A>

2. Inline image, using IMG, OBJECT or APPLET

There are three ways to include inline objects in HTML.

2.1 The IMG element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is alt, used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A longdesc attribute lets you point to a longer description - often in HTML - which can have markup and richer formatting. e.g.:

<IMG SRC="starflower.gif" ALT="Starflower">

2.1 The OBJECT element in HTML can contain other elements nested within it, unlike IMG which is empty. This means that several different formats can be offered, using nested OBJECT elements, with a final textual alternative (including markup, links, etc) right at the center. The outermost element which can be displayed will be used, e.g.:


2.3 The APPLET element is used for embedding applets into the HTML page. These applets can do many things biut o\a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason, e.g.:

<APPLET CODE="MyApplet.class" WIDTH=100 HEIGHT=100>
<P>Hi There<P>

3. Background image, using CSS

Any HTML element can (when displayed visually) be given a background image using Cascading Style Sheets (CSS). The background color can also be specified, and the image will composite onto the background color if it has transparent portions. This allows the same image to be re-used with different visuall presentations. The width and height of the image can be adjusted. It can repeat in the horizontal(x) direction, vertical (y) direction, both , or neither. The position of the image relative to the box taken up by the element can be adjusted.

CSS does not prescribe or limit which graphics format you can use. (Note: Again, don't think that it is true; you cannot use extrodinary graphic elements.), e.g.: image using CMYK color mode for printing cannot display on the screen when browsing with browser.

p {  
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}

3.1.3 Pixel Base Image Introduction

The resolution of a pixel base digital image is defined in terms of pixel per inch (ppi). Pixel is the basic element of a digital image which is square in shape and uniform in color. The quality of an image is positively related to the number of square pixels per inch. When talking about the resolution of a digital image, either a digital photo or an image generated by software, only the original pixel density at 1 to 1 scale is significant. It doest not make too much sense to enhance the resolution using else software in anyway. On the screen, the usual resolution is 72dpi or 96dpi depending on the hardware configuration of monitor. Examples for pixel base images on www are png, gif and jpg of which png and gif format support transparent background. All these images are featured by their distinctive compression capability.

The following diagram shows  the square pixels of a digital foto under microscope.

(Image Soure: uncle ming's gallery)

pixel base image

Question: What is the basic elements that make up a pixel?

Ans.: ......................................................................................................................................

3.1.4 Vector Image Introduction

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.  The most popular vector graphic in use on internet should be Scalable Vector Graphics (SVG), which is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create these types of images with drawing programs such as Inkscape.

pixel base image vs vector graphic (image source: wikipedia)
pixel vs vector

3.1.5 Compression Algorithm for Image

In computer science and information theory, data compression, source coding or bit-rate reduction is the process of encoding information using fewer bits than the original representation would use. Compression is useful because it helps reduce the consumption of expensive resources, such as hard disk space or transmission bandwidth. Lossless Compression

Lossless compression algorithms usually exploit statistical redundancy in such a way as to represent the sender's data more concisely without error. Lossless compression is possible because most real-world data has statistical redundancy. e.g.: The Family of Zipping Algorithm

The Lempel–Ziv (LZ) compression methods are among the most popular algorithms for lossless storage. DEFLATE is a variation on LZ which is optimized for decompression speed and compression ratio, but compression can be slow. DEFLATE is used in PKZIP, gzip and PNG. LZW (Lempel–Ziv–Welch) is used in GIF images. For other image format like TIF, some software like photoshop also provide the LZW compression function for reducing the file size without sacrificing the image quality.
Also noteworthy are the LZR (LZ–Renau) methods, which serve as the basis of the Zip method. LZ methods utilize a table-based compression model where table entries are substituted for repeated strings of data. For most LZ methods, this table is generated dynamically from earlier data in the input. The table itself is often Huffman encoded (e.g. SHRI, LZX). A current LZ-based coding scheme that performs well is LZX, used in Microsoft's CAB format.
The patent of zip algorithm was expired in all regions all over the world for many years. Now it becomes the most popular compression method for reducing the size of data. For example, the dox format is actually an xml format with built in zipping fuction.
(Source:  modified from wikipedia) Lossy Compression

In information technology, "lossy" compression, also called perceptual coding, is a data encoding method that compresses data by discarding (losing) some of it. The procedure aims to minimise the amount of data that need to be held, handled, and/or transmitted by a computer. e.g.:

In computing, JPEG is a commonly used method of lossy compression for digital photography (image). The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.
JPEG/Exif is the most common image format used by digital cameras and other photographic image capture devices. it is also the most common format for storing and transmitting photographic images on the World Wide Web.
The term "JPEG" is an acronym for the Joint Photographic Experts Group which created the standard. The MIME media type for JPEG is image/jpeg (defined in RFC 1341), except in Internet Explorer, which provides a MIME type of image/pjpeg when uploading JPEG images. It supports a maximum image size of 6553565535.
The algorithm of jpeg compression make use of the statistical approximation to rrepresent the contour of zoned data for reducing the size of bytes. Therefore, fidelity of the image decreases along with the increase of apporximation.

A chart showing the relative quality of various JPEG encoding settings and also compares saving a file as a JPEG normally and using Photoshop's "save for web" option (Source of Image: Wikipedia)
(Source of Image: wikipedia)

3.1.6 Tips for Using Images

If not necessary, don't use high resolution image. The large size image will increase the traffic load of data line A hd monitor can only display 1920 pixel across the screen. Image bigger than the monitor resolution will cause the screen to scroll for viewing the whole image.

References Links