14 Replies Latest reply on May 23, 2008 1:41 PM by Newsgroup_User

    Cut Down Image size

    PH Admin Level 1
      I have two main images on my site: the header which has rollovers and the background image of the body. The header especially seems much larger than it has to be. It's a simple image a rectangle with a gradient and a glow and transparent background, with text added for use in the rollovers. It exports at over 20kb as a gif and larger as png files.

      Is there anyway to make the image smaller and therefore load quicker?

      www.ncss-soccer.com

      Thanks so much for the help!
        • 1. Re: Cut Down Image size
          Level 7
          There are only two ways that I know of -

          1. Reduce the image's dimensions
          2. Reduce the # of colors (if GIF) or the quality (if JPG)

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "Mack879w" <webforumsuser@macromedia.com> wrote in message
          news:g114tr$r5$1@forums.macromedia.com...
          >I have two main images on my site: the header which has rollovers and the
          > background image of the body. The header especially seems much larger
          > than it
          > has to be. It's a simple image a rectangle with a gradient and a glow and
          > transparent background, with text added for use in the rollovers. It
          > exports
          > at over 20kb as a gif and larger as png files.
          >
          > Is there anyway to make the image smaller and therefore load quicker?
          >
          > www.ncss-soccer.com
          >
          > Thanks so much for the help!
          >

          • 2. Re: Cut Down Image size
            Level 7
            Mack879w wrote:
            > I have two main images on my site: the header which has rollovers and the
            > background image of the body. The header especially seems much larger than it
            > has to be. It's a simple image a rectangle with a gradient and a glow and
            > transparent background, with text added for use in the rollovers. It exports
            > at over 20kb as a gif and larger as png files.

            Export that one in JPEG format.

            --
            Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
            --------------------------------------------------------------
            http://www.projectseven.com
            Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
            CSS Newsgroup: news://forums.projectseven.com/css/
            http://www.adobe.com/communities/experts/
            --------------------------------------------------------------
            • 3. Re: Cut Down Image size
              PH Admin Level 1
              Exporting the header as a jpeg is actually larger than the gif. I took Murray's advice and dropped down the color and got it down to about 16k. I just think that's a bit large for the image. It doesn't seem that complicated. I was expecting something closer to 10k in size at the larges. I know transparencies and gradients take up more space but i didn't think that much.
              • 4. Re: Cut Down Image size
                Level 7
                Mack879w wrote:
                > Exporting the header as a jpeg is actually larger than the gif. I took
                > Murray's advice and dropped down the color and got it down to about 16k. I
                > just think that's a bit large for the image. It doesn't seem that complicated.
                > I was expecting something closer to 10k in size at the larges. I know
                > transparencies and gradients take up more space but i didn't think that much.

                I exported a sliver of it that you could use as a background tile of a
                div. It was only 373 bytes as a JPEG.

                --
                Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
                --------------------------------------------------------------
                http://www.projectseven.com
                Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                CSS Newsgroup: news://forums.projectseven.com/css/
                http://www.adobe.com/communities/experts/
                --------------------------------------------------------------
                • 5. Re: Cut Down Image size
                  PH Admin Level 1
                  That was my original thought on how to do it, but I would l lose the glow effect either on the left and right, or top and bottom, depending on which way I tiled the image, would I not? I want to keep the glow effect if possible.
                  • 6. Re: Cut Down Image size
                    Level 7
                    You could still have the 'glow' by using left/right glow slices as
                    non-repeating background images (or even vertically repeating depending on
                    the rest of the arrangement) in outer, nested wrapper containers.

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    ==================


                    "Mack879w" <webforumsuser@macromedia.com> wrote in message
                    news:g11pv6$mor$1@forums.macromedia.com...
                    > That was my original thought on how to do it, but I would l lose the glow
                    > effect either on the left and right, or top and bottom, depending on which
                    > way
                    > I tiled the image, would I not? I want to keep the glow effect if
                    > possible.
                    >

                    • 7. Re: Cut Down Image size
                      PH Admin Level 1
                      Awesome. I broke the background up into divs and it loads much quicker with lower file sizes!
                      • 8. Re: Cut Down Image size
                        Level 7
                        Huh? Slicing an image will not make it load faster, it will just make it
                        load differently.

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        ==================


                        "Mack879w" <webforumsuser@macromedia.com> wrote in message
                        news:g13mmm$obk$1@forums.macromedia.com...
                        > Awesome. I broke the background up into divs and it loads much quicker
                        > with lower file sizes!
                        >

                        • 9. Re: Cut Down Image size
                          PH Admin Level 1
                          Sorry, bad terminology! I made images of the left and right shadows, and a 1 pixel wide image of the background and tiled it across.
                          • 10. Re: Cut Down Image size
                            Level 7
                            That will definitely work.

                            --
                            Murray --- ICQ 71997575
                            Adobe Community Expert
                            (If you *MUST* email me, don't LAUGH when you do so!)
                            ==================
                            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                            ==================


                            "Mack879w" <webforumsuser@macromedia.com> wrote in message
                            news:g143gm$8e7$1@forums.macromedia.com...
                            > Sorry, bad terminology! I made images of the left and right shadows, and
                            > a 1 pixel wide image of the background and tiled it across.

                            • 11. Re: Cut Down Image size
                              TareeInternet
                              quote:

                              Originally posted by: Mack879w
                              Sorry, bad terminology! I made images of the left and right shadows, and a 1 pixel wide image of the background and tiled it across.


                              Looks like you nailed it, thanks for the tip i'll give the same method a shot on my headers.

                              Your is 678x65 and 8.91kb which is much improved on the original.

                              I was just reading an article saying you could put all your images on a subdomain, and this makes the browser download more concurrently resulting in faster load times. So i'll give that a try after i refine all my image sizes.

                              • 12. Re: Cut Down Image size
                                Level 7
                                > I was just reading an article saying you could put all your images on a
                                > subdomain, and this makes the browser download more concurrently resulting
                                > in
                                > faster load times. So i'll give that a try after i refine all my image
                                > sizes.

                                Huh?

                                There is no free lunch. A 10K image will behave like a 10K file no matter
                                where it's located.

                                --
                                Murray --- ICQ 71997575
                                Adobe Community Expert
                                (If you *MUST* email me, don't LAUGH when you do so!)
                                ==================
                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                ==================


                                "TareeInternet" <webforumsuser@macromedia.com> wrote in message
                                news:g15391$b4a$1@forums.macromedia.com...
                                >
                                quote:

                                Originally posted by: Mack879w
                                > Sorry, bad terminology! I made images of the left and right shadows, and
                                > a 1
                                > pixel wide image of the background and tiled it across.

                                >
                                > Looks like you nailed it, thanks for the tip i'll give the same method a
                                > shot
                                > on my headers.
                                >
                                > Your is 678x65 and 8.91kb which is much improved on the original.
                                >
                                > I was just reading an article saying you could put all your images on a
                                > subdomain, and this makes the browser download more concurrently resulting
                                > in
                                > faster load times. So i'll give that a try after i refine all my image
                                > sizes.
                                >
                                >
                                >

                                • 13. Re: Cut Down Image size
                                  Richard_Blank
                                  quote:

                                  originally posted by: newsgroup user
                                  there are only two ways that i know of -

                                  1. reduce the images dimensions
                                  2. reduce the # of colors (if gif) or the quality (if jpg)

                                  --
                                  murray --- icq 71997575
                                  adobe community expert
                                  (if you *must* email me, dont laugh when you do so!)
                                  ==================
                                  http://www.projectseven.com/go - dw faqs, tutorials & resources
                                  http://www.dwfaq.com - dw faqs, tutorials & resources
                                  ==================


                                  mack879w <webforumsuser@macromedia.com> wrote in message
                                  news:g114tr$r5$1@forums.macromedia.com...
                                  >i have two main images on my site: the header which has rollovers and the
                                  > background image of the body. the header especially seems much larger
                                  > than it
                                  > has to be. its a simple image a rectangle with a gradient and a glow and
                                  > transparent background, with text added for use in the rollovers. it
                                  > exports
                                  > at over 20kb as a gif and larger as png files.
                                  >
                                  > is there anyway to make the image smaller and therefore load quicker?
                                  >
                                  > www.ncss-soccer.com
                                  >
                                  > thanks so much for the help!
                                  >




                                  Ace,

                                  Thank you for the helpful information.


                                  Richard


                                  .
                                  • 14. Re: Cut Down Image size
                                    Level 7
                                    You're welcome.

                                    --
                                    Murray --- ICQ 71997575
                                    Adobe Community Expert
                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                    ==================
                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                    ==================


                                    "Richard Blank" <webforumsuser@macromedia.com> wrote in message
                                    news:g16enf$ouf$1@forums.macromedia.com...
                                    >
                                    quote:

                                    originally posted by: newsgroup user
                                    > there are only two ways that i know of -
                                    >
                                    > 1. reduce the images dimensions
                                    > 2. reduce the # of colors (if gif) or the quality (if jpg)
                                    >
                                    > --
                                    > murray --- icq 71997575
                                    > adobe community expert
                                    > (if you *must* email me, dont laugh when you do so!)
                                    > ==================
                                    > http://www.projectseven.com/go - dw faqs, tutorials & resources
                                    > http://www.dwfaq.com - dw faqs, tutorials & resources
                                    > ==================
                                    >
                                    >
                                    > mack879w <webforumsuser@macromedia.com> wrote in message
                                    > news:g114tr$r5$1@forums.macromedia.com...
                                    > >i have two main images on my site: the header which has rollovers and
                                    > >the
                                    > > background image of the body. the header especially seems much larger
                                    > > than it
                                    > > has to be. its a simple image a rectangle with a gradient and a glow
                                    > > and
                                    > > transparent background, with text added for use in the rollovers. it
                                    > > exports
                                    > > at over 20kb as a gif and larger as png files.
                                    > >
                                    > > is there anyway to make the image smaller and therefore load quicker?
                                    > >
                                    > > www.ncss-soccer.com
                                    > >
                                    > > thanks so much for the help!
                                    > >
                                    >
                                    >

                                    >
                                    > Ace,
                                    >
                                    > Thank you for the helpful information.
                                    >
                                    >
                                    > Richard
                                    >
                                    >
                                    > .
                                    >