8 Replies Latest reply on Nov 5, 2010 12:19 PM by jmackenthun

    Exporting two many .gifs

    jmackenthun

      I've been using Fireworks for a few weeks, and have not been able to relieve the following issue :

       

      I've created a somewhat complex image in Fireworks and need to cut down on the number of .gifs that are exported. Other than simplifying the image (i.e. removing objects, aligning more objects, deleting some of the content, etc..) is there a way I can cut down on the number of image files that are exported?

       

      I'm currently at 106 files (1 .htm & 105 .gifs), and as a result I'm experiencing slow load time on the SharePoint site that I've inserted the .htm file in as a Web Part. The number or .gifs are a result of the Web Slices which are storing a simple rollover behavior and an link.  What solutions are out there for someone in my posistion to keep the design mostly unchanged, but increase my images load time? 

       

      Any help or direction would be very much appreciated.

       

      Thanks!

       

      - Jeff

        • 1. Re: Exporting two many .gifs
          pixlor Level 4

          Somewhat complex?!? Crikey.

           

          Can you share your Fireworks file? It's easier to make suggestions when you have something concrete to work from.

          • 2. Re: Exporting two many .gifs
            jmackenthun Level 1

            The slices are around all of blue, bronze, and red shapes you see. Ending up with 105 .gifs. Would LOVE to cut that in half. I've searched countless blogs/forum/random Fireworks FAQ sites and haven't found a usable solution. I would appreciate any advice!

            HomePage_v11.png

            • 3. Re: Exporting two many .gifs
              pixlor Level 4

              Oooohhhh.... Okay. I don't see any way you can do this without a table. However, your table could be more efficient. (Actually, someone who's really good with CSS could probably do it, but...that isn't me! ) Or...just make one image and use an image map? That's what those are for.

               

               

              However...let's see if this helps you at all...

               

              The first thing to do is print this out (without the Web slices) Use a ruler and pencil and draw the minimal number of vertical and horizontal lines you need to create images. (New guidelines for a re-slicing of this diagram.) Consolidate where possible, even if that means adding white pixels to some images. It might be easiest to mark off where you have horizontal areas that are (mostly) all white.

               

              For instance. Rather than having one line right below your Assessment and Execution shapes and another just above Strategy, Prioritization, etc, place one line. Maybe split the difference, maybe place it at the top of the second row of shapes, doesn't matter. Just have one.

               

              Make the lower guideline for Strategy, Prioritization, etc match the lower guideline for the Toll Gates.

               

              Next, you have a row of all white, except for the dotted vertical lines. You'll only need one slice on one of the vertical lines.

               

              Make a consistent-height row that includes the Project Charters and Manage Changes shapes. All the way across. These odd-height shapes are making your table more complex. (Plus, if you have a regular table where some cells are filled with white images, you can usually remove those contents if the width and height are fixed by images in other cells. It simplifies. If nothing else, you can use a single 1x1-pixel white image and set the width and height to what you need.)

               

              Keep going down the image.

               

              Next, vertical lines...

               

              You have teeny little spaces on either side of your Toll Gate shapes. Don't. Hmm. You'll have to split The Toll Gate regions in two, but have the actual slices for the diamond shapes span two vertical guidelines. If you can put the guidelines on the same side of the dotted line for each Toll Gate, then you will be able to use the same image for the dotted lines in rows that are otherwise white.

               

              Are you doing rollovers? If so, then because of the tightness of the table, I would recommend that you limit your rollover effects to the text only. That way, you can have cells with images that might be the ends of two different colored shapes and you don't have to worry about changing colors.

              1 person found this helpful
              • 4. Re: Exporting two many .gifs
                jmackenthun Level 1

                Thanks for all the advice!

                 

                I was able to trim the number of images, that I was exporting, however the image is still loading slowly. I don't know if this has something to do with the fact that I'm using the Image as a Web Part in SharePoint, but when I get the image count to under 50 (from 136!) it still shows noticeable lag when opening.

                 

                My only other thought is if there's a way to not have any of the image appear until all of it is ready to be displayed. That way if there has to be a slight delay for a few of the .gifs, the whole image holds off on displaying until all of them are ready. If there's anyway that could be done I think it's my only option at this point.

                 

                Thanks again!

                • 5. Re: Exporting two many .gifs
                  pixlor Level 4

                  The only thing you can do is cut out the number of things that actually are images and to reuse images where they're the same. You have a large graphic, and that means lots of pixels and that means lots of time.

                   

                  For example, where you have whitespace, you don't need images at all or you can use a 1x1-pixel image and set the height and width (this is old-school stuff ).

                   

                  Going further, if you can let go of the rounded corners, you could make a narrow, vertical slice of a gradient, use that as a background for a table cell and then use text in HTML rather than in images. You would save a bundle in download time with that approach.

                  • 6. Re: Exporting two many .gifs
                    jmackenthun Level 1

                    I'll give it a shot. I'm not 100% clear on that last paragraph, or how to implement that solution, but I appreciate all of the advice.

                     

                    I'm thinking I may just have to bite the bullet and set up some time with a web developer within the organization and have him school me on the very basics of html

                     

                    Thanks again!

                    • 7. Re: Exporting two many .gifs
                      pixlor Level 4

                      Yeah...knowing the tricks helps.

                       

                      You could also try one or both of these:

                      http://www.sitepoint.com/article/html-css-beginners-guide/

                      http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

                       

                      Also, I like the book HTML, XHTML & CSS (Visual QuickStart Guide Series) by Elizabeth Castro. It's in it's 6th edition, and can usually be found locally, definitely online.

                       

                      • 8. Re: Exporting two many .gifs
                        jmackenthun Level 1

                        Thanks bunches!

                         

                         

                        I'll check those resources out and hopefully I can work through my first Fireworks Project.