2D Image File Formats and their use in Web pages and Documents

There are many, many file formats that are in presently in use. Most of these formats are associated with a specific application and are referred to as the native file format for that application. For example Microsoft’s Paint program uses a well known format call the Windows bitmap format. It is an uncompressed simple format that uses the .bmp extension. This module in the course will look as several of the formats and the effect of their attributes on their use within web pages and documents.

Although there are many graphics file formats (here is a comparison) the following raster graphics files are often seen and used.  Due to a variety of storage methods and compression schemes(or not) their sizes vary widely.

.jpeg       :   Heavily compressed file format use in the photographics world.   No transparency.  Web acceptable.

.bmp     : An old windows (Microsoft) file format that is uncompressed.  Very large files. Do not use in a web page.

.png      : A modern file format that is very popular.  Compressed, Web acceptable.

.gif       : A file format that stores only 1 byte per color.  It can only handle 256 DIFFERENT colorls in an image.  Used for small images and animated gifs for embedding in web pages. Compressed.

Raster Image storage within a Computer

The majority of computer systems that you will work with store an image in a varitey of ways, depending on the desired resolution and range of colors. The raster image that is drawn on the screen is made up of millions of tiny rectangles called pixels(or texels if you are refering to the data within the file itself). Many of todays monitors have resolutions which start at 1280 x 1024 and go much higher.. This means we have 1,310,720 pixels arranged in a rectangle 1280 pixels by 1024 pixels. At each pixel we must specify some color to draw. Each pixels color is usually specified by its RGB value or RGBA value where R is red, G is green and B is blue. The A is used when we also need to add transparency to a scene. Most graphics tools (Paint, Gimp, Photoshop, Photopaint, Paint Shop Pro and others) can handle this format as well as other formats including Grey scale, HSB, and CMYK. Wikipedia has a nice discussion on color.

RGB Monitors color each pixel by mixing the intensity of three colors red, green and blue. The intensity is represented by the range of numbers from 0 to 255( exactly 1 byte). Zero represents 0 intensity and 255 is maximum intensity. An RGB setting of (0,0,0) is black and a setting of (255,255,255) is white. Using all possible variations between 0 and 255 for each component gives 256*256*256 = 16,777,216 different colors. On can create varying shades of gray by seeting the RGB components to the same value. For example (200,200,200) would be a light gray and (30,30,30) would be a dark gray.

RGB coloring of monitors ia an example of additive coloring. RED, Green and Blue are the primary colors of light. A pixel starts as black and is lit up (light added). Color printers use CYMK( Cyan, Yellow,Majenta,Black) for laying a color on white paper. This is known as subtractive coloring. The color starts at (255,255,255) , ie the white paper, and drops in value. See applet for color space conversion.

Scalable Vector Graphics Images stored within a Computer

These images, created by programs like InkScape and . Vector graphics applications  use polygons, point, line segments, mathematical curve definitions etc to represent images in computer graphics. They are not stored as a set of pixels.  The file format (.svg) is really a text file containing a set of instructions on how to construct the image.  If you care to you can look at a .svg file using notepad++ and see the instructions.  The language often used is a web page construction language called XML (extended markup language)

Comments are closed.