" "Curiosity about life in all of its aspects, I think,
is still the secret of great creative people."
Optimizing Website Graphics and Photographs
is still the secret of great creative people."
Optimizing Website Graphics and Photographs
How long do you wait for a website to load before clicking away and trying another URL? Most people won’t wait longer than an average of 8 seconds with a 56K modem. Although many things can effect the load time of a website, improper and overuse of graphics and images is one of the more frequent problems.
Optimizing website graphics involves discovering the balance between image quality and image size. To optimize your website images follow these three steps.
Resize the image
Reduce the colors used in the image
Save the image in a compressed file format
Step 1 – Resize the Image
Use an image-editing program to resize your photograph or graphic to the exact size that you will need for your website. For example, if you have a photograph that is 7” wide by 5” high or 504 x 360 pixels, but want it to appear on your website at 150 x 107 pixels do not place the larger image on your website and resize it using your web building software. The image will still load (slowly) at the full pixel size and force the browser to resize it to 150 x 107 after the image has loaded.
Always include the height and width attributes. This will tell the browser what size the image is going to be and allow for a quicker page load.
Step 2 - Reduce the colors used in the image
Eliminating unnecessary colors is another way to reduce your image size. A graphic saved with 2 colors is logically going to be smaller than one saved using 256 colors. Utilize your image editing software to experiment with different options to locate the optimal balance in image quality and size.
When the number of colors used in an image are dramatically reduced it will result in color banding. The gradations in areas where colors have been eliminated are filled in with solid bands of color.
Dithering can help reduce the color banding. Although dithering will increase your file size slightly, it can help the image quality by combining existing colors to replace eliminated colors in the banded areas. This actually tricks the eye by giving the appearance of more colors in your image.
Step 3 - Save the image in a compressed file format
Lets start with understanding the correct types of image files to use on your website. The two common file types that you will find on a website are Gif and JPEG.
GIF (Graphics Interchange Format) pronounced Jif.
GIF files are loss-less compressed image files. This means that when the image file is compressed data is not lost, however the file is limited to 256 colors or less. This format optimizes images with large continuous areas of color. Since you will loose some color fidelity with a GIF image, use them for simple line drawings, shapes, small icons or other non-complex graphics.
When optimizing an image as a GIF you will need to determine how much image quality you are willing to sacrifice to obtain a smaller file size.
GIF files also allow you the option of setting transparent backgrounds. This is necessary if your image is being placed on a patterned or gradient background. Otherwise you will end up with a solid block of color surrounding your image. This does not look attractive or professional.
Use the interlaced option for larger GIF images. This will cause a blurry image to appear first which will then load to the final image. Although the load time will not decrease this does give the impression of a faster loading page, as the image appears gradually.
JPEG (Joint Photographic Experts Group) pronounced Jay-Peg.
JPEG images use a lossy compression technique. Every time you save an image as a JPEG it will loose some data. To avoid this, be sure to save your original image in a lossless format (such as PNG) for editing purposes.
A JPEG image is saved in a 24-bit format, which allows for millions of colors. This is why JPEG files should always be used for photographs or complex graphics that use many colors or gradations. Most image editing programs offer three levels of JPG compression. You may need to experiment to find the correct balance of image quality and size.
For larger images use the progressive option, again to allow the image to load gradually giving the viewer the impression of a quicker loading page.
Remember to reuse the same image as much as possible to utilizing the Cache (pronounced cash) feature on the hard drive. This way once the image has loaded, it will store on the hard drive and be readily available for the next request.
Written by Patrice Roarke, Creative Director of Artisan Design Studio.
This article may be re-printed on your website, newsletter or ezine
Optimizing website graphics involves discovering the balance between image quality and image size. To optimize your website images follow these three steps.
Resize the image
Reduce the colors used in the image
Save the image in a compressed file format
Step 1 – Resize the Image
Use an image-editing program to resize your photograph or graphic to the exact size that you will need for your website. For example, if you have a photograph that is 7” wide by 5” high or 504 x 360 pixels, but want it to appear on your website at 150 x 107 pixels do not place the larger image on your website and resize it using your web building software. The image will still load (slowly) at the full pixel size and force the browser to resize it to 150 x 107 after the image has loaded.
Always include the height and width attributes. This will tell the browser what size the image is going to be and allow for a quicker page load.
Step 2 - Reduce the colors used in the image
Eliminating unnecessary colors is another way to reduce your image size. A graphic saved with 2 colors is logically going to be smaller than one saved using 256 colors. Utilize your image editing software to experiment with different options to locate the optimal balance in image quality and size.
When the number of colors used in an image are dramatically reduced it will result in color banding. The gradations in areas where colors have been eliminated are filled in with solid bands of color.
Dithering can help reduce the color banding. Although dithering will increase your file size slightly, it can help the image quality by combining existing colors to replace eliminated colors in the banded areas. This actually tricks the eye by giving the appearance of more colors in your image.
Step 3 - Save the image in a compressed file format
Lets start with understanding the correct types of image files to use on your website. The two common file types that you will find on a website are Gif and JPEG.
GIF (Graphics Interchange Format) pronounced Jif.
GIF files are loss-less compressed image files. This means that when the image file is compressed data is not lost, however the file is limited to 256 colors or less. This format optimizes images with large continuous areas of color. Since you will loose some color fidelity with a GIF image, use them for simple line drawings, shapes, small icons or other non-complex graphics.
When optimizing an image as a GIF you will need to determine how much image quality you are willing to sacrifice to obtain a smaller file size.
GIF files also allow you the option of setting transparent backgrounds. This is necessary if your image is being placed on a patterned or gradient background. Otherwise you will end up with a solid block of color surrounding your image. This does not look attractive or professional.
Use the interlaced option for larger GIF images. This will cause a blurry image to appear first which will then load to the final image. Although the load time will not decrease this does give the impression of a faster loading page, as the image appears gradually.
JPEG (Joint Photographic Experts Group) pronounced Jay-Peg.
JPEG images use a lossy compression technique. Every time you save an image as a JPEG it will loose some data. To avoid this, be sure to save your original image in a lossless format (such as PNG) for editing purposes.
A JPEG image is saved in a 24-bit format, which allows for millions of colors. This is why JPEG files should always be used for photographs or complex graphics that use many colors or gradations. Most image editing programs offer three levels of JPG compression. You may need to experiment to find the correct balance of image quality and size.
For larger images use the progressive option, again to allow the image to load gradually giving the viewer the impression of a quicker loading page.
Remember to reuse the same image as much as possible to utilizing the Cache (pronounced cash) feature on the hard drive. This way once the image has loaded, it will store on the hard drive and be readily available for the next request.
Written by Patrice Roarke, Creative Director of Artisan Design Studio.
This article may be re-printed on your website, newsletter or ezine
0 komentar:
Posting Komentar