Hi,
When it comes to image optimization, many people simply neglect to pay any attention to how there images are saved. What results are images that are much larger in file size than is necessary. While some users on the internet have high speed internet access, others do not, and badly optimized images can cause extremely slow loading times.
Image file types:
You may not be aware of it, but there are many different ways an image can be stored on your computer through what File Type the image is saved as. Different image file types all serve the basic function of storing image data, but each provides different pros and cons for storing the image, and thus are used for different purposes.
When it comes to images used on the internet, there are three common File types used:
*.GIF = The Graphics Interchangeable Format. Features good handling of images with solid colors and text. This file type also supports Transparency.
*.JPG or *.JPEG = JPEG File interchange format. Features good handling of photos or images with many colors. Has good compression capabilities that can output small file sizes. Does Not support transparency and tends to be poor at handling text or large areas of solid colors.
*.PNG = PNG’s Not Gif (aka Portable Network Graphic). Features are very similar to gif files, but can support much higher color depth and is compressible. Supports Transparency. Works well with text or photos. Tends to create larger files than GIF format.
Optimizing your Images:
When using an Image on the Internet, selecting the right file type to use is the first step in ensuring you have a photo that retains quality while not having a large file size. As stated above, the JPEG format is best for use with photographs, while GIF and PNG are best for use with clipart, text, or other images that have a lot of flat color (unlike a photo).
JPEG format has the best compression that can create extremely small file sizes, but is prone to severe quality loss above 50% compression. PNG format, on the other hand, has Loss-less compression which ensures no image quality is lost during compression. However, it cannot compress an image nearly as much as the JPEG format can, and it tends to create larger file sizes. In addition, PNG and the GIF format feature color pallet optimization, in which you can remove unused colors or combine very similar colors to reduce filesize. Most image editing programs automatically optimize the color pallet during compression in the PNG format. Color pallet optimization may have to be manually selected for the GIF format, though.
A Note on Transparency:
As you may have read above, both the GIF and PNG formats support transparency. This feature allows you to make any single color of the color pallet transparent. Any time the image is viewed, the color marked “transparent†will simply not be displayed. Currently, the GIF format is most commonly used with transparency, since it is fully supported across the internet. The PNG format’s transparency only works in some browsers. Unfortunately for PNG, Microsoft Internet Explorer doesn’t render PNG transparency at this time. Most of the other browsers, such as Mozilla, Mozilla Firebird, and Netscape browsers currently do support some form of PNG transparency. Note that transparency does increase the image’s filesize, so only enable transparency when needed.
A Note on GIF Animation
You may or my not be aware that the GIF format also features a special mode called "Animated GIF." An animated GIF is basically a slide show of still frame GIF images, which are played frame by frame to appear as animation. Currently, GIF is the only widely used format for this style of simple animation used on the internet.
The Saving Process
You have the ability to take advantage of all the features of the file formats listed above when it comes time to save the image in your favorite image editing software.
There are many great Image editing programs available and most do a good job of optimizing images. A powerful (and free) image editor for example is Irfanview .
The following is a very general and quick description of the image file saving process where you can edit compression settings, etc.. Different editing programs will be slighty different:
1 ) Open your image editing software.
2 ) Open your image file.
3 ) If no other editing is to be done, use the program’s “Save As…†command, usually found under the “file†menu.
4 ) In the “Save as†window that appears, there will be a drop down list that says something like “save as type:†or “File type:â€. Select the appropriate format from the list (*.GIF, *.PNG, or *.JPG/*.JPEG).
5 ) Your program may or may not show all the image saving options. If you don’t see any other options, look for a button labeled something like “Advanced options†or “More options†and click it.
6 ) For compression of JPEG format files, you should see a setting labeled something like “Image quality†or “Compressionâ€. Set the compression level so that you can achieve a small file size (usually an image quality of 70 is optimal)
7 ) For compression of PNG format files, you should see a setting labeled “Compression†or “compress by filesizeâ€. Set the desired fie size (or compression % if available). There will also be a setting in the advanced options for PNG called “Pallet typeâ€, you want to select “Optimized Palletâ€
8 ) Click “Save†or “OKâ€
9 ) Post on Jeepz.com (instructions in my other post). :mrgreen:
-Nick :!:
When it comes to image optimization, many people simply neglect to pay any attention to how there images are saved. What results are images that are much larger in file size than is necessary. While some users on the internet have high speed internet access, others do not, and badly optimized images can cause extremely slow loading times.
Image file types:
You may not be aware of it, but there are many different ways an image can be stored on your computer through what File Type the image is saved as. Different image file types all serve the basic function of storing image data, but each provides different pros and cons for storing the image, and thus are used for different purposes.
When it comes to images used on the internet, there are three common File types used:
*.GIF = The Graphics Interchangeable Format. Features good handling of images with solid colors and text. This file type also supports Transparency.
*.JPG or *.JPEG = JPEG File interchange format. Features good handling of photos or images with many colors. Has good compression capabilities that can output small file sizes. Does Not support transparency and tends to be poor at handling text or large areas of solid colors.
*.PNG = PNG’s Not Gif (aka Portable Network Graphic). Features are very similar to gif files, but can support much higher color depth and is compressible. Supports Transparency. Works well with text or photos. Tends to create larger files than GIF format.
Optimizing your Images:
When using an Image on the Internet, selecting the right file type to use is the first step in ensuring you have a photo that retains quality while not having a large file size. As stated above, the JPEG format is best for use with photographs, while GIF and PNG are best for use with clipart, text, or other images that have a lot of flat color (unlike a photo).
JPEG format has the best compression that can create extremely small file sizes, but is prone to severe quality loss above 50% compression. PNG format, on the other hand, has Loss-less compression which ensures no image quality is lost during compression. However, it cannot compress an image nearly as much as the JPEG format can, and it tends to create larger file sizes. In addition, PNG and the GIF format feature color pallet optimization, in which you can remove unused colors or combine very similar colors to reduce filesize. Most image editing programs automatically optimize the color pallet during compression in the PNG format. Color pallet optimization may have to be manually selected for the GIF format, though.
A Note on Transparency:
As you may have read above, both the GIF and PNG formats support transparency. This feature allows you to make any single color of the color pallet transparent. Any time the image is viewed, the color marked “transparent†will simply not be displayed. Currently, the GIF format is most commonly used with transparency, since it is fully supported across the internet. The PNG format’s transparency only works in some browsers. Unfortunately for PNG, Microsoft Internet Explorer doesn’t render PNG transparency at this time. Most of the other browsers, such as Mozilla, Mozilla Firebird, and Netscape browsers currently do support some form of PNG transparency. Note that transparency does increase the image’s filesize, so only enable transparency when needed.
A Note on GIF Animation
You may or my not be aware that the GIF format also features a special mode called "Animated GIF." An animated GIF is basically a slide show of still frame GIF images, which are played frame by frame to appear as animation. Currently, GIF is the only widely used format for this style of simple animation used on the internet.
The Saving Process
You have the ability to take advantage of all the features of the file formats listed above when it comes time to save the image in your favorite image editing software.
There are many great Image editing programs available and most do a good job of optimizing images. A powerful (and free) image editor for example is Irfanview .
The following is a very general and quick description of the image file saving process where you can edit compression settings, etc.. Different editing programs will be slighty different:
1 ) Open your image editing software.
2 ) Open your image file.
3 ) If no other editing is to be done, use the program’s “Save As…†command, usually found under the “file†menu.
4 ) In the “Save as†window that appears, there will be a drop down list that says something like “save as type:†or “File type:â€. Select the appropriate format from the list (*.GIF, *.PNG, or *.JPG/*.JPEG).
5 ) Your program may or may not show all the image saving options. If you don’t see any other options, look for a button labeled something like “Advanced options†or “More options†and click it.
6 ) For compression of JPEG format files, you should see a setting labeled something like “Image quality†or “Compressionâ€. Set the compression level so that you can achieve a small file size (usually an image quality of 70 is optimal)
7 ) For compression of PNG format files, you should see a setting labeled “Compression†or “compress by filesizeâ€. Set the desired fie size (or compression % if available). There will also be a setting in the advanced options for PNG called “Pallet typeâ€, you want to select “Optimized Palletâ€
8 ) Click “Save†or “OKâ€
9 ) Post on Jeepz.com (instructions in my other post). :mrgreen:
-Nick :!:
