Intro to Image Manipulation
One of the most important aspects of our work is images. Attractive images
can be quite helpful in persuading the surfer to buy whatever it is we happen to be selling. Good images set the mood we want and make our pages stand out in the visitors mind and eyes. We have to keep in mind that images can also load slowly, take up a lot of our server space, and sometimes look fuzzy and well, just plain ugly.
The following chart compares JPG and GIF file compression. It should give you an idea
of which one to use under different circumstances.
|
GIF |
JPG |
| Color Depth |
8 bit maximum. |
Up to 24 bit. |
| Compression |
Compresses solid areas of color. |
Compresses color transitions. |
| Transparency Support |
Yes |
No |
| Advantages |
Good compression and transparency. |
Ability to control quality loss in compression. Excellent compression of photographic images. |
| Disadvantages |
Maximum 256 colors. Does not compress gradient colors well. |
No transparency. Loss of quality when compressed. |
| Typical Uses |
Cartoon images, Logos, Animated images |
Scanned photos, Images with complex textures, Images with complex gradient colors |
There are predominantly two types of images that we use, .gif and .jpg.
Which one we use determines how our images look as well as how quickly they load. Generally, animated images use less then 256 colors. An animated image will usually be a .gif image. When we need to design a page with photographs we normally use .jpg images which have thousands or millions of colors. These image files are compressed or reduced in quality so that they load quicker and take up less space.
Cropping and compression are two ways to make an image use less space.
Cropping involves cutting parts of the image off in order to make it smaller. Cropping a photo image means getting rid of extra background areas and bringing the viewers attention to the model or the part of the image that you want him to focus on. Lets imagine you have a picture that is 1024 pixels wide by 768 pixels tall. It is in .jpg format and takes up to 145k of space on your server. You have a nice grassy background, a girl in the center, a swing on the right and a tree on the left. You need to focus on the girl, so youll "crop" the tree and the swing set out of the picture.
All image programs have some kind of cropping tool that will allow you to
grab a side of the image and pull it in towards the center of the picture
or create a box around the part of the image you want to save. Look over
the directions for the image program you use to become familiar with how your program handles cropping. So now you have cut the extra parts off the image and the width is reduced to 683 pixels wide by 768 pixels tall. You could also crop some of the top and bottom off the picture bringing it to a final cropped size. The image is now only taking up 95k of the space on your server.
To get your image even smaller you can compress it. Compressing
the picture reduces its quality because it removes pixels from the image. Most image programs provide a means to compress .jpg photographs. Some programs are also available that solely do .jpg compression. The Best programs will let you see the effects of compression before the change is actually made. A balance between the amount of space the image will take up on your server and the fuzziness that will result from compression must be achieved. The more the image is compressed, the fuzzier it will become. It is almost always possible to compress an image to 70%-80% of its prior number of pixels. In fact, it can usually be reduced to 60% or less and still look acceptable. Some other functions such as smoothing and sharpening of color edges can also be used to help achieve this balance. Using the example above you are able to compress the original image to 60% of its original quality. Now the picture is only taking up 57k on our server.
Images can often have the resolution changed by resizing, because many
surfers use a browser setting of 800 pixels x 600 pixels. Any good image program will have a built in method to resize images. When
resizing it is important to keep the proportions of the original picture. If you dont tell the program to maintain the original proportions when it resizes an image, you will end up with stretched or skewed images.
Again, using our 683 by 512 pixels picture, if we resize, changing the 683 pixels side to 500, the 512 pixels side automatically becomes 300 pixels, and the original shape of the image is maintained, while shrinking all four sides.
The amount of space the image takes up on our server has now changed to 18.5 k and you can barely notice the difference from the original size of 149k. It will take up less space and will load in 5 seconds on a 28.8 modem, rather than the 60+ seconds the original image would require.
Using the resizing function in an image program, or by using specific programs called
thumbnailers, a miniaturized copy of the original image can be made. Thumbnails of the larger images are very useful since they take up less space than the original image and can be linked to the full size .jpg. In this way you have a well organized page with previews of larger images, allowing your surfers to decide which image they want to see in full size. A good example of the use of thumbnails is the TGP, or thumbnail gallery post site.
Reader Comments: (2 posts)
Marcyelly says:
If you're looking to buy these arteilcs make it way easier. |
April 25th, 2014
at 4:42am EST
Rating: |
Claudia says:
Alright alrhgit alright that's exactly what I needed! |
May 3rd, 2012
at 12:49pm EST
Rating: |
Post Your Comments
