10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Compressing PNG Graphic

by Bradley J Anderson
8 replies
  • WEB DESIGN
    • |
I have a WP portfolio blog (utilizing Sophisticatedfolio theme by Woothemes), and it has a HUGE carousel-type graphic on the main page. So big, in fact, that it takes almost 6 minutes for a dial-up connection to load it completely. Looks absolutely awesome but, obviously, this is not acceptable.

Of course, most people would say to reduce the size of the graphic but, being a portfolio page, I really would like to retain the same dimensions.

I've tried a few image compression tools, but they all want to take away the transparency. Again, this is not acceptable to the look I am wanting on the blog.

The last thing I thought of was slicing the graphic. However, the graphic has to be uploaded to the theme as a whole.

Anyone know of a way to compress the png without losing quality or transparency?

Or could I slice it, then edit the theme code somehow to load each part?

BTW, the site is at Latchkey Niche Blogs*|*Premium turnkey niche blogs You'll see the pic I'm talking about, I guarantee it.

Thanks in advance for any help.
#compressing #graphic #png
  • Profile picture of the author dassad
    First of all the Carousel don't works for me in firefox The look is the same for the theme images only that there are 4 ARROWS (3 left, 1 right) and it's only a static image that links to latchkey-niche-blogs.info/?cat=3.

    Also the size of the image is 373.65 kB (382,618 bytes) so don't think that is the problem. Try PRELOADING the image or something
    Signature

    {{ DiscussionBoard.errors[3738013].message }}
    • Profile picture of the author Bradley J Anderson
      Originally Posted by dassad View Post

      First of all the Carousel don't works for me in firefox The look is the same for the theme images only that there are 4 ARROWS.

      Also the size of the image is 373.65 kB (382,618 bytes) so don't think that is the problem. Try PRELOADING the image or something
      Thanks for the suggestion, dassad.

      Yeah, it's not actually a carousel, it just kinda looks like one. I'm hoping to convert it to an actual carousel at some point, but that's beyond my coding expertise, so it will probably be something I outsource at a future date.

      I didn't think the file size was all that big, either, but when a fellow Warrior tried to load the page with her dial-up, she said it took 6 minutes.

      I'm assuming I should preload the image in the CSS file, then? :confused:
      Signature
      BRADLEY ANDERSON - Tips, reviews & resources to make your online business more profitable.
      {{ DiscussionBoard.errors[3738035].message }}
      • Profile picture of the author dassad
        Originally Posted by Brad armPitt View Post

        Thanks for the suggestion, dassad.

        Yeah, it's not actually a carousel, it just kinda looks like one. I'm hoping to convert it to an actual carousel at some point, but that's beyond my coding expertise, so it will probably be something I outsource at a future date.

        I didn't think the file size was all that big, either, but when a fellow Warrior tried to load the page with her dial-up, she said it took 6 minutes.

        I'm assuming I should preload the image in the CSS file, then? :confused:
        First you should try JavaScript, i think that is faster:

        ONE IMAGE
        Code:
            
<SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
      preload_image = new Image(25,25); 
      preload_image.src="http://mydomain.com/image.gif"; 
    }
    //-->
    </SCRIPT>
        MORE IMAGES
        Code:
            <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://mydomain.com/image0.gif";
      image_url[1] = "http://mydomain.com/image1.gif";
      image_url[2] = "http://mydomain.com/image2.gif";
      image_url[3] = "http://mydomain.com/image3.gif";

       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>
        Paste it in your HEAD section


        PS. Just observed that those 4 arrows in facts are from the themes in the "carousel" LOL i'm tired
        Regards,
        daSSad
        Signature

        {{ DiscussionBoard.errors[3738065].message }}
        • Profile picture of the author Bradley J Anderson
          Originally Posted by dassad View Post

          First you should try JavaScript, i think that is faster:

          ONE IMAGE
          Code:
              
<SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
      preload_image = new Image(25,25); 
      preload_image.src="http://mydomain.com/image.gif"; 
    }
    //-->
    </SCRIPT>
          MORE IMAGES
          Code:
              <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://mydomain.com/image0.gif";
      image_url[1] = "http://mydomain.com/image1.gif";
      image_url[2] = "http://mydomain.com/image2.gif";
      image_url[3] = "http://mydomain.com/image3.gif";

       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>
          Paste it in your HEAD section

          Regards,
          daSSad
          Oh, that's awesome. I will definitely try that. Thanks again, daSSad.
          Signature
          BRADLEY ANDERSON - Tips, reviews & resources to make your online business more profitable.
          {{ DiscussionBoard.errors[3738074].message }}
          • Profile picture of the author dassad
            Originally Posted by Brad armPitt View Post

            Oh, that's awesome. I will definitely try that. Thanks again, daSSad.
            I'm happy to help you. Hit me up if you have any question

            Regards,
            daSSad
            Signature

            {{ DiscussionBoard.errors[3738101].message }}
  • Profile picture of the author Bradley J Anderson
    Many thanks to @spesialis for compressing the graphic for me with transparency still intact and then posting the links here. I'll have it tested again today to see how fast it loads now using dial-up.

    I'm not sure what happened to her post, but luckily I had subscribed to the thread and so the links were still intact in my email.
    Signature
    BRADLEY ANDERSON - Tips, reviews & resources to make your online business more profitable.
    {{ DiscussionBoard.errors[3741244].message }}
  • Profile picture of the author azzuhro
    I also need this information and I managed to try on my blog
    thank you
    {{ DiscussionBoard.errors[3746274].message }}
  • Profile picture of the author charles123krik
    Reducing color palette to fewer colors than the number of unique colors in the original image IS lossy. I use PngOut, which I find sometimes gives better results.I installed the prog and have the right click option but where in gods green earth does the program save the new crushed png.
    {{ DiscussionBoard.errors[3968224].message }}

Trending Topics