7 Replies Latest reply on Oct 16, 2009 5:13 PM by pixlor

    Optimizing images

    quality11 Level 1

      I thought I knew how to optimize images.  I was taught to use the Export Wizard in FW to not reduce the dimensions, but the size.  For some reason, this doesn't seem to be working for this site.  I am testing all the pages with this free tool someone showed  me and it's giving me a "too slow" or "way too slow" status.  Maybe I'm not optimizing them correctly using the Export Wizard?  I just choose JPEG or GIF or whatever and then save it.

       

      Any ideas to reduce the images would be so helpful.

       

      Thanks so much in advance!

        • 1. Re: Optimizing images
          pixlor Level 4

          On the logo, the red border will cause the image to be larger, as GIFs are "run length encoded," the number of pixels in a row that are the same color. Since you're placing that image on a red background, anyway, you don't need the red border.

           

          For the images with the drop shadows, the background color you've placed them on doesn't match your page background, so you should change that. Other than that, I don't know what you could do to make the images smaller. I like going through File > Image Preview and playing with the settings until I get a good quality image.

           

          On the can_logo, you would probably have better results optimizing that as two images, a .jpg for the photo and a b&w .gif for the actual logo. Then, maybe stick them together in a table. You could probably add a black border to the table in fewer bytes than it takes to draw it in pixels on the image. Again, since that image is on a red background, you don't need those pixels in the image at all.

           

          I think that testing site is out of touch. It seems to highlight the 28.8k modem as the download speed of concern. While I know not everyone is on broadband, I would start with a 56k modem and not concern myself with the 14.4k at all.

           

           

           

          One other small point. The background texture looks greenish, when compared to your red sidebar and the gold in the backgorund of the logo. You might want to adjust it. Here's a png with a solid rectangle of the logo gold and a greyscale version of your background image, with various blending modes. You might see if you like one of them better than what you have. (Or tell me to jump in the lake! )

          texture_bg-play.png

          • 2. Re: Optimizing images
            quality11 Level 1

            Pixlor,

             

            Bg color is sooo much better.  A friend/designer created it for me and I was thinking the same thing....color is off.  This is perfecto!

             

            I changed the bg color of the main content after I created the images on a white bg.  I tested it, and couldn't see the difference.  How do you catch these things?! :-).  I'll change the bg color.

             

            Thanks for the other suggestions and your feedback about that testing site.  I think you're right about the modem speed.

            • 3. Re: Optimizing images
              pixlor Level 4

              Glad you like the different bg...there are five versions there, though, and you can always copy-paste that greyscale bitmap and change the blending mode to see any other effect. I just happened to like these.

               

              As for seeing the color differences, um...I have a good monitor for color? I have a low-end pro (EIZO ColorEdge CD210W), not a business class and I just love it.

               

              cheers!

              • 4. Re: Optimizing images
                quality11 Level 1

                Five versions "there"?  Where?  Not sure what you mean?

                 

                Do you know what to Google to find out what monitor setting should be set to for the best color?  Especially web people.

                • 5. Re: Optimizing images
                  pixlor Level 4

                  The gold background image is created by blending a greyscale version of the original with a solid gold rectangle. There are five versions, because there are five greyscale bitmaps you can turn on, each has a different blending mode. Turn off the current one, turn on a different one, see what you like!

                  choices.png

                  To back up... I took the greenish texture, made a copy and then set the saturation down to 0 so it would be grey scale. I made a solid gold rectangle and placed the greyscale texture above it and experimented with different blending modes. Since more than one blending mode produced a pleasing result, I duplicated the greyscale texture a few times and set each one to a different blending mode. Only one can be visible at a time, because blending modes will interact with each other. You might want to duplicate the greyscale texture again, and just work through all the blending modes, just to see what they all do and if there's one choice you like better. I didn't make a version for every blending mode that looked good, just a few.

                   

                  Or, you could make the canvas and the gold rectangle larger and place the different greyscale bitmaps side-by-side, so you can compare them directly. That might be more useful.

                   

                   

                  As for your monitor, some can be calibrated with external devices, some can't. I opted to get a good monitor, but I haven't kept it calibrated. You'd search for "monitor calibration" or variations on that.

                  • 6. Re: Optimizing images
                    quality11 Level 1

                    Oh....I see.  Don't get how you made the gray blends but get how to play with them.  I like the one you chose too.  Thanks pixlor.

                     

                    Thanks too for the calibration term.

                    • 7. Re: Optimizing images
                      pixlor Level 4

                      Don't get how you made the gray blends but get how to play with them.  I like the one you chose too.  Thanks pixlor.

                       

                       

                      I took the original green background and copied it. Then, I went to

                      Filters > Adjust Color > Hue/Saturation...

                      and I set the saturation to 0 (making it a greyscale image).

                       

                      At first, I tried using the gold rectangle to colorize the grey texture, but that didn't work for me. So I just reversed the order and started playing with the blending modes on the grey image instead. When I found one I liked, I just copied the grey image and kept on playing. Some blending modes will change the hue (not what you want), others will only change the luminance, depending on what's in the grey image (and that IS what you want).