Introduction

In this blog I will try and make you have a good understanding of web graphics. Let’s get started with: 

Pixels- 

Pixels (Picture Element) are small little dots that make up the images on computer displays. The screen is divided up into a matrix of thousands or even millions of pixels. You cannot see the individual pixels, because they are so small. This is a good thing, because most people prefer to look at smooth, clear image rather than blocky, pixelated one. However, if you set your monitor to a low resolution, such as 640x480 and look closely at your screen, you may be able to see the individual pixels. A resolution of 640x480 is comprised of 640 by 480 pixels or 307,200 pixels all-together. The Bit rate of the camera/monitor determines how many unique different colours that can be used in a picture. For example, 8bit resolution gives you 256 different colours that a pixel could be, true colour is 24bit giving you 16 million colours. A pixel usually consists of a ratio between three component colours, red, green, and blue (RGB)

What is RGB –

RGB (Short for Red, Green, Blue) a monitor that requires separate signals for each of the three colours. An RGB monitor consists of a vacuum tube with three electron guns, one each for red, green, and blue. At one end of the screen and at the other. The three electron guns fire electrons at the screen, which contains a phosphorous coating. When the phosphors are excited by the electron beams, they glow. Depending on which beam excites them, they glow red, green, or blue. The three beams for each point on the screen should have a combination of the three colours to light up the pixels.

CMYK

CMYK (cyan magenta yellow Black), CMYK is a color model in which all colours are described as a mixture of these four process colours. CMYK is the standard colour model used in offset printing for full-colour documents. Because such printing uses inks of these four basic colours, it is often called four-colour printing.

In contrast, display devices generally use a different colour model called RGB. One of the most difficult aspects of desktop publishing in colour is colour matching properly converting the RGB colours into CMYK colours so that what gets printed looks the same as what appears on the monitor. 

What is a Resolution

Resolution refers to the sharpness and clarity of an image. 640x480 resolution gives you 307,200 pixels in a rectangle with which to display the image. The term is most often used to describe monitors, printers, and bit-mapped graphic images. The resolution indicates the number of dots per inch. For example, a 300-dpi (dots per inch) printer is one that is capable of printing 300 distinct dots in a line 1 inch long. This means it can print 90,000 dots per square inch.  

What is a Bit rate –

Bit rate as the name implies, describes the rate at which bits are transferred from one location to another. In other words, it measures how much data is transmitted in a given amount of time. Bit rate is commonly measured in bits per second (bps), kilobits per second (Kbps), or megabits per second (Mbps). For example, a DSL (digital subscriber line) connection may be able to download data at 768 kbps, while a Firewire 800 connection can transfer data up to 800 Mbps. Bit rate can also describe the quality of an audio or video file. For example, an MP3 audio file that is compressed at 192 Kbps will have a greater dynamic range and may sound slightly more clear than the same audio file compressed at 128 Kbps. This is because more bits are used to represent the audio data for each second of playback. A video file that is compressed at 3000 Kbps will look better than the same file compressed at 1000 Kbps. Just like the quality of an image is measured in resolution, the quality of an audio or video file is measured by the bit rate.

Bit Depth - 


To control the colour of each pixel on the screen, the computers operating system must dedicate a small amount of memory to each pixel. In the simplest form of black-and-white computer displays, a single bit of memory is assigned to each pixel. Because each memory bit is either positive or negative (0 or 1), a 1-bit display system can manage only two colors (black or white) for each pixel on the screen:

If more bits of memory are dedicated to each pixel in the display, more colours can be managed. When 8 bits of memory are dedicated to each pixel, each pixel could be one of 256 colours. (256 = 2 to the eighth power; in other words, 256 is the maximum number of unique combinations of 0’s and 1’s you can make with. This kind of computer display is called an "8-bit" or "256-colour" display, and is common on older laptop computers and desktop machines. If still more memory is dedicated to each pixel, nearly photographic colour is achievable on the computer screen. "True-color" or "24-bit" colour displays can show millions of unique colours on the computer screen.

What is a Raster Image –

A raster image, also called a bitmap, is a way to represent digital images. The raster image takes a wide variety of formats, including the familiar .gif, .jpg, and .bmp. A raster image represents an image in a series of bits of information which translate into pixels on the screen. These pixels form points of colour which create an overall finished image. When a raster image is created, the image on the screen is converted into pixels. Each pixel is assigned a specific value which determines its colour. 

The raster image system uses the red, green, blue (RGB) colour system. An RGB value of 0,0,0 would be black, and the values go all the way through to 256 for each colour, allowing the expression of a wide range of colour values. Raster images consist of a data file that stores the colour value of every pixel in the image and where in the picture that pixel can be found. When a raster image is viewed, the pixels usually smooth out visually for the user, who sees a photograph or drawing. When blown up, the pixels in a raster image become apparent. While this effect is sometimes a deliberate choice on the part of an artist, it is usually not desired. Depending on resolution, some raster images can be enlarged to very large sizes, while others quickly become difficult to see. 

The smaller the resolution, the smaller the digital image file. When a raster image is displayed in a higher resolution then it was designed for, the image becomes blocky and pixelated. There are several techniques that can drastically reduce the file size of a raster image, these are called compression.

Vector images –

Vector images are made up of many individual, scalable objects. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. Objects may consist of lines, curves, and shapes with editable attributes such as colour, fill, and outline. Changing the attributes of a vector object does not affect the object itself. Because they're scalable, vector-based images are resolution independent.

You can increase and decrease the size of vector images to any degree and your lines will remain crisp and sharp, both on screen and in print. Vector images have many advantages, but the primary disadvantage is that they're unsuitable for producing photo-realistic imagery. Vector images are usually made up of solid areas of color or gradients, but they cannot depict the continuous subtle tones of a photograph. That's why most of the vector images you see tend to have a cartoon-like appearance.

Lossy and lossless –

Lossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed.

With lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed. All of the information is completely restored. This is generally the technique of choice for text or spreadsheet files, where losing words or financial data could pose a problem. The Graphics Interchange File (GIF) is an image format used on the Web that provides lossless compression.

On the other hand, lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there (although the user may not notice it). Lossy compression is generally used for video and sound, where a certain amount of information loss will not be detected by most users. The JPEG image file, commonly used for photographs and other complex still images on the Web, is an image that has lossy compression. Using JPEG compression, the creator can decide how much loss to introduce and make a trade-off between file size and image quality.

Greyscale

Greyscale is a range of shades of grey without apparent colour. The darkest possible shade is black, which is the total absence of transmitted or reflected light. The lightest possible shade is white, the total transmission or reflection of light at all visible wavelengths. Intermediate shades of gray are represented by equal brightness levels of the three primary colours (red, green and blue) for transmitted light, or equal amounts of the three primary pigments (cyan, magenta and yellow) for reflected light.

In the case of transmitted light (for example, the image on a computer display), the brightness levels of the RGB components are each represented as a number from decimal 0 to 255, or binary 00000000 to 11111111. For every pixel in a RGB greyscale image, R = G = B. The lightness of the grey is direct to the number representing the brightness levels of the primary colours. Black is represented by R = G = B = 0 or R = G = B = 00000000, and white is represented by R = G = B = 255 or R = G = B = 11111111. Because there is 8 bits in the binary representation of the grey level, this imaging method is called 8-bit greyscale.

YUV

A color encoding system used for analog television, such as NTSC and PAL. The YUV colour model represents the human perception of colour more closely than the standard RGB model used in computer graphics hardware. In YUV, Y is the is the luminance (brightness) component while U and V are the chrominance (colour) components luminance (brightness) component while U and V are the chrominance (colour) components.

Image Capture

Image capture is an application that is used in computer to upload the photos directly from scanner and digital camera. This is helpful as these devices do not have any storage places and using image capturing software only the devices can directly upload the photos to computer without interruption.