Images

Today we are going to talk about images or pictures.  There are basically 3 different types commonly used on websites.  JPEG (Joint Photographic Experts Group Format), GIF (Graphic Interchange Format), and PNG (Portable Network Graphics).

Unlike drawing with a pencil on a piece of paper or painting with a paint brush, picture and images on a computer screen are not continuous, but are a series of dots (squares) that are small enough and close enough together that they appear to be solid and continuous.  These dots are called pixels (picture elements) and are the basic building blocks of computer images.  You’ve seen the use of pixels to describe screen resolutions, for example 1920 by 1024.  This means horizontally 1920 pixels and vertically 1024 pixels.

Pictures files are quite large and the industry has resorted to compression techniques to make the distribution and storage quicker and easier.  The compression techniques are divided into 2 classes, lossy and lossless.  In the lossy version you lose some quality for the reduced file sizes.  There is no loss of quality for the lossless compression technique.

Jpeg is the most popular format.  It is best used typically for images such as human portraits and landscape scenery where you have many colors with subtle differences.  The compression technique discards color data that people would not normally perceive such as small color changes.  The discarded information is permanently lost and can not be recovered.  This technique is lossy compression.  It does not support transparency.  Click here to see  comparisons from modifications to my introduction post.

GIF formats are used when you have large amounts of flat colors and sharp edges as typically found in computer generated art like logos and text.  The GIF compression technique uses a lookup table to determine the pixel colors.  It gains its efficiency by having a large number of pixels referencing the same lookup table color element.  The compression technique is lossless.  GIF images are limited to 256 colors.  They also support transparency.  This means that on a portrait the areas that do not have pixels (actual portrait) can be made transparent or clear.  This will allow the background color of a web page to “see through” the transparent areas.  Click here to see comparisons from modifications to my introduction post.  The GIF format is the only one of the 3 formats that can support animated graphics.

Png is the newest of the formats and combines the best of jpeg and GIF.  It has lossless compression and supports transparency as GIF does and has an unlimited amount of colors as the jpeg formats have.  Click here to see comparisons from modifications to my introduction post.  The original format for the image was png.

We will continue our discussion on images in the next post.