Tutorial on Graphics and Web Images
IntroductionThe purpose of this tutorial is to provide Crafters Home Network members with a good explanation of computer graphics and the formatting of images for use on the web. Since most of our members already have or will have a web page soon, and obviously graphics are a vital aspect of good web design, it is our hope that you find it informative and useful. This tutorial, combined with some practice with your favorite graphics software application, will enable you to become proficient at web graphics in no time.First things first. If you do not have a decent graphics program, we recommend Paint Shop Pro by Jasc which is one of the best graphics apps you can get for the money. PSP stands up to both Adobe Photoshop and Corel Photopaint which cost hundreds of dollars. You can download Paint Shop Pro directly from Jasc at http://www.jasc.com/download_4.asp?. (But please read our tutorial first!) Image Basics This was an icon including the Win95 Shortcut arrow. We converted it from an icon to a graphic image in GIF format with size 32x32 pixels for use as an example. We chose this image because it is a small and manageable image, not to endorse any particular product.
We added some grid lines on the enlarged version to help distinguish the rows and columns. What exactly is a pixel?More than unit of resolution measurement, a pixel actually consists of numbers. A digital color image pixel is just a RGB (Red, Green, Blue) data value. An image is composed of numeric data which are RGB color values. For example, three 8-bit numbers like 255, 255, 0 (meaning Red=255, Green=255, Blue=0) denote one Yellow pixel. A byte (consisting of 8 bits) can contain numeric values up to 255 maximum. The pixel data shows what degree Red, and Green, and Blue, and the colors and intensity level will be combined at that image dot at that specific pixel location. Black has an RGB value of (0, 0, 0) and the RGB value for White is (255, 255, 255). The composite of the three RGB values creates the final color for that one pixel area. In RGB, we know Red and Green make Yellow. So, (255, 255, 0) means Red and Green, each fully saturated (255 is as Red or Green as 8 bits can be), and with no Blue at all (0), the resulting color is Yellow. A gray scale image (Shades of Black and White) stores only one 8 bit value for each pixel instead of three. A 2-color LineArt image stores one bit per pixel, and the bits are packed 8 bits in one byte. What's in an image file?Those numbers in a formatted series. The image file contains a specified RGB color value for every pixel, or location, in the image grid. The data is organized in the file in rows and columns. File formats vary, but the top of the file contains numbers specifying the number of rows and columns (the image size, like 300x200) and it is followed by huge strings of data representing the RGB color of every pixel. Image viewing software (such as a web browser) then knows how many rows and columns, and therefore how to arrange the RGB pixel values accordingly. For the icon above, every location on one of the 32 rows and one of the 32 columns is a pixel, with three values, for the RGB color sample, written into the image file. If the image were larger, say 300x200, then there would be 200 rows of 300 columns of data values, 200x300 = 60,000 pixels. That is typically why larger images generate larger file sizes. Every pixel is the same size, because it is simply the area between the grid lines, and will be colored by the one appropriate corresponding data value. Larger areas are just multiple identical pixel colors, including the blank background, which are actually colored pixels where that color is designated as transparent. The image data is just a series of RGB numeric values in a grid, 32x32 in this case. Icons are usually graphic images, built of pixels with distinct color differences, instead of being
continuously smooth tones like photographs. Some graphic artist has worked very carefully
on the icon above, carefully designing one pixel at a time. But a photograph (example below) will have a
more blended continuous image, adjacent pixels are more likely to have similar
colors. And of course, photographs are typically much larger than 32x32.
Each square pixel is simply one numeric RGB color value in the image file. In any image, regardless how sharp and clear it is, blow it up about a dozen
times, and you'll have only pixels.
Web Specific Image FormatsMany newcomers to web design are often confused by image file formatting. In other words, which type of image file to create for use on the web. If you have ever looked at the "Save As" option in your graphics application, there is no wonder why, many include as many as 30 file types. As far as web graphics go, there are only TWO primary file types that you need to be concerned with. These are GIF format (first introduced by CompuServe) and JPEG (or JPG) format. On this page, both icon images are GIFs, and the bird images are both JPEGs. What's the Difference?Well, without getting too technical, the main difference between these two formats is the method of compression each one utilizes. For example, the enlarged icon in its native uncompressed format is actually over 147KB which means that it would take more than 45 seconds to view with a 28.8 modem. Because of the inherent compression capabilities of the GIF file format, the image above has been reduced to just above 11KB which means that the exact same image can be downloaded in around 2 seconds with the same 28.8 modem.ABOUT GIFs. GIF image file formatting tends to be the best choice with images requiring fewer colors. The fewer the colors, the smaller the file size. Additionally, there is a maximum number of 256 colors that can be used in a GIF image. In other words, no matter what the image is, must be reduced to 256 colors or less before it can be saved in a GIF format. Typically, the more colors the image contains (up to 256), the wider the variation in the spectrum of those colors, and the darker the colors are, the larger the GIF image file will be. With GIFs the rule of thumb is, the fewer and lighter the colors in the image, the smaller the file size. If you want to learn More About GIFs - Click Here. ABOUT JPEGs. JPEG (or JPG) files are also compressed image files, however, there is no maximum color limitation. For this reason, JPEG is usually the best formatting choice for scanned images. Technically, a single JPEG can be a true color image comprised of over 16.7 million different colors. Further, most graphics software applications which support the JPEG format will enable you to control the amount of compression. The thing to remember is, the more you compress a JPEG file the more it tends to distort the image. So why don't we all just stick with JPEG? Because images containing a lot of colors in the red spectrum tend to distort quickly and unsatisfactorily. Additionally, in smaller images containing text such as navigation buttons and banners, text will also be distorted to the point of being illegible. Another major difference between the two file types is that a GIF will support a transparent color as well as animation, while the JPEG will not. When to use Which FormatIt depends on the image. The best thing to do is to experiment with both as see which provides you with optimal results - the best quality image with the smallest file size. The more you practice, the easier you will be able to determine the best format to use. The best web designers often use a combination of both GIF and JPEG.Web Image TroubleshootingThere are 3 common reasons a properly formatted image will fail to display on a web page.
|
In the image on the right we magnified the icon image 12X so you can clearly see the
different pixels composing the image. Each small square represents an individual pixel in the original
image. Pixel is simply a computer term for "picture element." Icons are just small
low resolution images, usually computer generated instead of photographic. Most icons are composed of 32 rows
by 32 columns of pixels. Otherwise, they are just like any other electronic image.
We chose this image because of the wide array of different colors and tones. Blends are also prevalent. The original scan was actually composed of over 38,700 different colors (we counted them). Considering that there are only 46,284 total pixels in this image (203 pixels wide x 228 pixels high) the percentage of duplicate colors is actually very small.
The image to the right is the area around the bird's beak and throat. The image was
enlarged 12 times to demonstrate that photographic images are also composed of pixels
in the same way as the icon.
|
 ©2001 Crafters Home Network. Digital Focus, Inc. Terms of Use
|