Image Optimization
| Optimized Images | |
| *Zoom in to see image detail | |
 |
 |
| 89KB jpeg at 430X375px, 100ppi | 21KB jpeg at 430X375px, 100ppi |
 |
 |
| 23KB gif at 215X190px | 15KB jpeg at 430X375px, 100ppi |
 |
 |
| 61KB png at 430X375px | 157KB png at 430X375px |
 |
 |
| 4.06MB svg at 430X375px | 705Kb at 523X414px, 72ppi |
Understanding optimization?
Optimization is the important task of formatting files for the web. Compression and resolution are key to making images display well. A resolution of 72ppi is usually used for web images. If a photo or drawing is sized incorrectly or saved in a bad format, the designer can run into unexpected results.
Choosing the format for images placed on the web is essential. GIF files are typically used for line drawings and images with a small number of colors. Drawings are renderings with a large number of colors may not work well in GIF format because of a lack of colors. For this reason, JPEG formats should be used. Because GIFs only use 256 colors, extra colors are discarded and shouldn't be used for most photos. If a photo has been digitally enhanced with editing software, GIF format should be used because it supports transparency.
JPEGs support a larger range of colors than GIFs. Many people use jpeg format because of this. Line drawings and renderings many intricate designs and a wide variety of colors should format as jpegs because of a wider color pallette. If the drawing contains transparency like drop shadows and filters jpeg will not work and gif should be used.
Optimization of Images
In the images above, look at the camera lens. The gif image shows the least amount of detail but has less noise than the 15Kb jpeg because the JPEG doesn't support transparency. The 89 and 21 Kb jpegs are the best quality jpegs but the 21Kb image has some noise. The 15 Kb jpeg has the worst quality overall because of file size and transparency.
PNG, TIFF, and SVG files fall into a different category of images. PNG files are typically not used on the web because of their size.This ultimately affects load time. In the past, PNGs were not well supported on some computers and web browsers but now this is not the case. The benefit of using PNGs is that they don't use lossy compression and display images at very high quality.
TIFF files are almost never used on the web, because file size is extremely large. The benefit is that TIFFs use no compression at all.
SVG files are different from all file types because they areScalable Vector Graphics. If you have created a vector image in a program like Adobe Illustrator, it can be saved as an SVG and viewed in a web browsers. On a web page the page can be resized or zoomed without distorting the image. SVG files are not well supported however but browsers like Safari and Opera view them fine. SVG files are also extremely large like TIFFs.
Considerations
Before optimizing an image it's important to know what you plan on doing with that image. Size, destination, resolution, detail, and color should be considered. What is the destination of the file, who or where is it going to? If it's going to print it needs to be high resolution; if it's going to the web it doesn't. If you plan on scaling a photo up or down, doing so in a lossy format may distort it. The amount of detail an image has as well as the number of colors it contains can determine what file format to use. Most importantly, use the simple Save As function doesn't allow for optimization because it is used mostly for saving a master file to a specific folder.
Working with Fireworks and Photoshop
I found Fireworks didn't import Illustrator files well as they didn't display certain layers like parts of the digital camera. I found the optimization panel to be handy and simple to use but Photoshop may have a better interface. In Photoshop, Save for web allows for more control over optimization settings. For example, Photoshop has a separate WebSnap slider where Fireworks relies more on presets like WebAdaptive 216. I also found that Fireworks had a wide ranger of filters than photoshop when it comes to shapes and symbols.