Adobe Fireworks CS3 Tutorials
Optimizing Images / Optimizing JPEGs
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Optimizing Images / Optimizing JPEGs)
Let me now review some specific optimization techniques for JPGs. JPGs are a very important category of Web graphic, as most photographs will end up being optimized as JPGs. They provide better quality and lower file sizes than GIF or PNG files. Using the Optimize Panel you can optimize JPGs by setting compression values and smoothing options. JPGs are always saved and exported in 24-bit color, so you can't optimize a JPG by editing it's color palette. Notice the color table here is empty when the JPG option is selected from the Export File Format drop-down. As you experiment with different optimization settings, changing the quality and smoothing values, you'll want to use the two-up and four-up views to really narrow down exactly how much quality you can reduce while still maintaining good image quality and how much smoothing you can apply. I recommend setting to the four-up view and then changing the quality settings, maybe the first one to 90, 70, 60, and 40, with various levels of smoothing. Now, new in this version of Fireworks CS3, JPGs can be saved directly from within the Save As command, and so I choose File, Save As, there's a drop-down, Save as Type JPG is one of the options. This is a new feature in Fireworks CS3. In previous versions you had to export your files in order to convert them to JPGs. Now, it's important that you go to the four-up view and really narrow down how much quality you can reduce, because JPG, unlike GIFs and PNGs, are in a lossy format, which means that some image data will be discarded when you compress it. This will reduce the quality of the final file, however, image data can sometimes be discarded with little or not noticeable difference in quality, and that's really the reason for these 4 views here. Now to control how much quality is lost when compressing a JPG file you'll want to adjust the quality with the Quality Slider. A higher percentage setting maintains image quality, but compresses less, producing larger files. A lower percentage yields a smaller file, but produces a lower-quality image. Notice if I go all the way down to Quality 1 here, let's go ahead and preview this, it really gets blocky and as I increase this, the blockiness decreases, but the file size increases until you go all the way up to 100 and you have a very large file. But notice that between 100 and maybe 65 or 70, this image really experiences no noticeable loss of quality but the file size can be drastically reduced. Now you can also selectively compress specific areas of a JPG file. Selective JPG compression lets you compress different areas of a JPG at different levels. For example, in this photograph, the focal point is the woman's face, so you probably want to keep that face area at a very high level, high-quality level, but the other areas, the background areas are not that important, so they can be compressed much, much more without really degrading the overall image quality. To compress selected areas of a JPG first you want to move into Original View and then select an area of the graphic for compression using one of the marquee tools. Let's go ahead and select her face using the Rectangular tool with a very high curve set to it, so I get like an oval, and now I want to select JPG here from the drop-down menu in the Export File format in the Optimize Panel, and then from the Main menu, choose Modify, Selective JPG, Save Selection as JPG Mask, that creates a mask over her face, and now I can go ahead and increase the quality setting. Let's go all the way up to 90 to ensure that I have a very good quality for the important portion of that photograph, her face. Next, click on the Edit, Selective Quality options button here in the Optimize Panel. That's this kind of hidden button right here. Notice that it already says 90 because my quality was set to 90, but if you click on that you get some additional selective JPG settings including the quality setting, I can always change that, making it higher or lower. I can also change the overlay color, perhaps red is not really standing out enough, so I can change it to yellow. I can preserve text quality. With this setting all text items will be automatically exported at a higher level regardless of the selective quality value. You can also select Preserve Button Quality. This will ensure that all button symbols will automatically be exported at a higher level as well. click OK. Now, you could also notice that that goes kind of a yellow color there for my mask. Now you can always modify this selection. Perhaps you'll want to make more of the image or less of the image selectively compressed. What you'll want to do is from the Main menu choose Modify, Selective JPG, Restore JPG Mask as Selection, that brings my selection back. Now, to undo a selection, you could also select Modify, Selective JPG, Remove JPG Mask, now I can take off that selection, add a new selection, for example, this one here, let's double-click and close that off. Let's try that again. There we go. I double-clicked on the end there to finish off that selection. Now I can go ahead and choose Modify, Selective JPG, Save Selection as JPG Mask, and go through the whole procedure again of adjusting my quality and smoothing settings. So there you have some specific optimization techniques that are unique to the JPG file format. Let me now move on to the next movie and give you a summary review of some of the more important optimization techniques that I've covered in this section of the tutorial.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
