7 Replies Latest reply on Nov 28, 2010 10:25 PM by pixlor

    How do you optimize an image?

    lizard81288 Level 1

      this seems easy and it should be, but for some reason i am having an issue. For my class we are suppose to optimize our images,

      this should be a simple thing, however, when i click on my image in fireworks and go into the optimize panel and change it, it doesn't

      change the image i have selected, but the entire document instead. so how do i make fireworks optimize the image i have selected, instead of the

      whole document? (we can't use any other program either, just fireworks, so no PS or anything else)

        • 1. Re: How do you optimize an image?
          pixlor Level 4

          You do your design work and save it to a native Fireworks .png file. This file format is an enhanced version of a standard .png file and contains the additional data for the vector objects, code exports, and other information that is specific to FW. Other programs that read .png files can read FW .pngs, but they will ignore the extra informations.


          When you want to produce output for the Web, you need to select an image type and optimize it, based on the image content. Your optimize settings will be saved when you save the FW document, but the document maintains its original data and does not change. It is the output file that gets optimized.


          To produce an image for the Web, you use export, instead of save. Personally, I like using the File>Image Preview... menu. From there, I can choose my output file type and the parameters for the file. There's also File>Export Wizard...


          If you decide you want to export to one of the .png formats, you need to be careful to export to a different file name from your working FW document, or you can overwrite your master file with a flattened file, losing all your work. I read a suggestion here to name FW documents as .fw.png as a reminder, but you still need to watch what you're doing.


          For file formats...


          • JPEG stands for Joint Photographic Experts Group and this format is optimized for photographs or other images where the variation in color between adjacent pixels is low. When you optimize .jpg images, you have controls for compression/quality and also for adding sharpness.
          • GIF is a good format when you have line art with few colors. This format uses a palette of 256 or fewer colors, one of which can be fully transparent. This format also can support animations.
          • PNGs (bitmap) come in three versions. PNG24 is a full-color image with no transparency; the 24 bits are 8bits each of red, green, and blue. PNG32 is a full color image with full transparency; 8 bits each of red, green, blue, and alpha. PNG8 is a limited palette similar to the GIF, but you can have semitransparent colors.



          There appears to be a long-standing bug in Fireworks where, if you choose GIF or PNG8, Fireworks may not give you all the colors in your image. You can manually add colors using the eyedropper.


          Hope that helps!

          • 2. Re: How do you optimize an image?
            lizard81288 Level 1

            So you can't just change one image then correct, you have to change the whole file?

            • 3. Re: How do you optimize an image?
              pixlor Level 4

              The way you're stating it doesn't quite make sense, or reflect the Fireworks workflow.


              Your Fireworks document is your master file. You design in FW as perfectly as possible. You save this document. Then, you export from the master file into as many different optimized versions as you like. The FW document always remains your "perfect" master file. (Save and export are not the same function!)


              If you use File>Image Preview... for export, you will see a live preview of what your exported document will look like under the current export settings. As you change the export settings, the preview window will reflect your changes. There's no need to export and see what the results are, you can see what the results would be before you export. You can experiment with the settings until you are satisfied that you have met the best optimization between file size and image quality that meets your purposes; then export.


              Once you export, you can save the FW master document, again, and your final export settings will be saved as well. Then, if you make changes to your master document and want to export again, your previous optimizations are still active.


              Your FW document is not optimized, it is the exported image that is optimized.

              • 4. Re: How do you optimize an image?
                lizard81288 Level 1

                ok, so say i import an image into fireworks, and its a really big file and i would like to optimize that image only, how do i do that?

                • 5. Re: How do you optimize an image?
                  pixlor Level 4

                  What kind of image did you import? Is it a photograph? Is it line art? There is no "one size fits all" optimization. The optimization should be tailored to the image.


                  If it's a photograph, you should probably export it as a .jpg. Go to File>Image Preview... and first select the JPG file type. Then experiment with the quality/compression value, watching the file size number above the preview. See what happens if you sharpen edges or remove colors. Note that every time a .jpg file is opened and re-output, the artifacts get worse. (It's like making a photocopy of a photocopy.) You should always work from the original file.


                  If it's line art with limited colors, try a GIF. If you know your image should have 64 colors, but FW only gives you 20, use the eyedropper to select additional colors where you see they're needed. If you have long horizontal rows of pixels of the same color, the GIF format will encode that very efficiently. If it's line art with a gradient, you might try a PNG24.

                  • 6. Re: How do you optimize an image?
                    lizard81288 Level 1


                    i'll show you what i mean, maybe that will help, or something.i want the image to change types, not my whole thing.


                    here is my canvas with nothing selected:




                    i selected my image an obtimize it:




                    now my canvas has changed:



                    • 7. Re: How do you optimize an image?
                      pixlor Level 4

                      This is not "one image." This is a Fireworks design. From here, you want to add slices for the areas to export and set the optimizations for the slices. Then, you export the slices. Each slice can be optimized separately.


                      You do not optimize the elements within a Fireworks document. You optimize for export.