by Hanuka
22 replies
Guys.. I have a possbile problem.
Almost all my site is made out of .PNG format images for transperancy,
and I hear that some older browsers have problems with that format..

Is using .PNG images, especially in an e-Commerce store is a bad idea or just fine?

plzzzzz help
#png
  • Profile picture of the author askloz
    I wouldn't worry about it, it's only a "small" percentage of them.
    Signature
    {{ DiscussionBoard.errors[463128].message }}
  • Profile picture of the author Jared Alberghini
    Bad idea, for 2 reasons,

    #1. Many older browsers are not able to display .png's
    #2. .png file format is typically much larger file size than .jpg or .gif, so your site will load much slower.

    Why not use transparent .gif's?

    - Jared
    Signature

    P.S.

    Join The Future: Telekinetic Marketing

    {{ DiscussionBoard.errors[463131].message }}
  • Profile picture of the author Mark Brian
    .PNG transparency has issues with IE. You can still use .PNG for as long as it's not a transparent image.
    Signature

    {{ DiscussionBoard.errors[463135].message }}
  • Profile picture of the author Hanuka
    Transperent .gif's are rubbish quality. My site is sort of "fancy" so I can't
    have them.. :/

    Mark, the this is I'm using .png images solely for their transperancy,
    otherwize I'd just use .jpg and forget about it.. but I can't.

    From what I know the problem occurs only in IE6.

    I was thinking of 'later' putting a browser identification script on my site.
    So for IE6 it'll give the worst looking yet workable .gif built site, for all others
    the normal .png site.. what do you guys/gals think?

    But as my site is still unfinished I have to live only with my .png based site...
    Signature

    ~Good Brother~

    Advertising is 85% confusion and 15% commission.. ROFL! xD

    {{ DiscussionBoard.errors[463163].message }}
    • Profile picture of the author YiKeS
      G`day Hanuka,

      you need a fix here is the JS file and instructions you need

      PNG FIX

      Christopher J.
      Signature
      AUSSIE MADE
      WSO --> HOMEPAGER <--- WSO
      {{ DiscussionBoard.errors[463217].message }}
      • Profile picture of the author Hanuka
        Originally Posted by Christopher J. View Post

        G`day Hanuka,

        you need a fix here is the JS file and instructions you need

        PNG FIX

        Christopher J.
        What is this png fix thingy?
        Signature

        ~Good Brother~

        Advertising is 85% confusion and 15% commission.. ROFL! xD

        {{ DiscussionBoard.errors[463236].message }}
        • Profile picture of the author Kate Davies
          Thanks for highlighting this Hanuka, I didn't know this could be a problem. Most web designers that I have worked with recently want me to use .png files.

          I agree that transparent gifs are rubbish ... but I was wondering whether anyone has ideas on how to make transparent gifs work well. It could be an alternative if someone has some top tips.

          Also, very interested to know more about Christopher's JS workaround?

          thanks again

          Kate
          Signature
          Local internet marketing in the UK
          Only the businesses who can be found online will succeed. Improve online visibility with www.vizzibiliti.co.uk
          {{ DiscussionBoard.errors[463252].message }}
          • Profile picture of the author Jesus Perez
            To get transparent GIF to look right in Photoshop, you need to make sure the background color is identical (or resembles) the destination location. Otherwise the outline will look screwy.


            Originally Posted by digileaf View Post

            Thanks for highlighting this Hanuka, I didn't know this could be a problem. Most web designers that I have worked with recently want me to use .png files.

            I agree that transparent gifs are rubbish ... but I was wondering whether anyone has ideas on how to make transparent gifs work well. It could be an alternative if someone has some top tips.

            Also, very interested to know more about Christopher's JS workaround?

            thanks again

            Kate
            Signature

            {{ DiscussionBoard.errors[463259].message }}
            • Profile picture of the author Jared Alberghini
              Originally Posted by BlueSquares View Post

              To get transparent GIF to look right in Photoshop, you need to make sure the background color is identical (or resembles) the destination location. Otherwise the outline will look screwy.
              Thanks, I forgot about that little trick.

              To the OP: I would work on getting your .gif's to look suitable instead of doing all the work of detecting browsers, having several different versions of the site like you were thinking of, installing javascripts (that may not even work if the user has js disabled) and who knows what else... and after all that, STILL not be 100% compatible???

              Just bite the bullet and work on your .gif's.

              It sounds like it's a graphic intense site, so that's the last thing you want, is for your graphics NOT to show up isn't it? :confused:

              - Jared
              Signature

              P.S.

              Join The Future: Telekinetic Marketing

              {{ DiscussionBoard.errors[463389].message }}
        • Profile picture of the author YiKeS
          Originally Posted by Hanuka View Post

          What is this png fix thingy?
          It`s what you need to show the PNG images correctly in IE6
          small (less than 2kb) file ... instructions included ... no rocket
          science needed either

          Christopher J.
          Signature
          AUSSIE MADE
          WSO --> HOMEPAGER <--- WSO
          {{ DiscussionBoard.errors[463332].message }}
    • Profile picture of the author Kirk Ward
      I think this is a good idea.

      Originally Posted by Hanuka View Post

      Transperent .gif's are rubbish quality. My site is sort of "fancy" so I can't
      have them.. :/

      Mark, the this is I'm using .png images solely for their transperancy,
      otherwize I'd just use .jpg and forget about it.. but I can't.

      From what I know the problem occurs only in IE6.

      I was thinking of 'later' putting a browser identification script on my site.
      So for IE6 it'll give the worst looking yet workable .gif built site, for all others
      the normal .png site.. what do you guys/gals think?

      But as my site is still unfinished I have to live only with my .png based site...
      Signature
      "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

      Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
      {{ DiscussionBoard.errors[463218].message }}
      • Profile picture of the author MikeWords
        IE6 won't display .png files. Believe it or not a significant portion of web users still browse with IE6.

        IE6 users are not the most tech savy web surfers. They're more likely to be the kind of surfer who randomly goes on the internet to specifically find or buy something.

        The kind of web surfer any marketer would be a fool to ignore...
        {{ DiscussionBoard.errors[463257].message }}
  • Profile picture of the author rlnorthcutt
    Search Google for "png fix" and you will find a TON of info.

    IE 5 and 6 don't have native support for transparent PNG files... its another in a series of reasons why IE is a very poor browser... but we do need to support it for now.

    Proper web dev is to build using FF, and then make changes to accommodate IE (using browser specific style sheets or CSS hacks).

    I would caution against using too many large images... it makes for a slow site especially if you want to scale up to alot of traffic.

    Ron
    {{ DiscussionBoard.errors[463284].message }}
    • Profile picture of the author Kate Davies
      Originally Posted by rlnorthcutt View Post

      Search Google for "png fix" and you will find a TON of info.

      IE 5 and 6 don't have native support for transparent PNG files... its another in a series of reasons why IE is a very poor browser... but we do need to support it for now.

      Proper web dev is to build using FF, and then make changes to accommodate IE (using browser specific style sheets or CSS hacks).

      I would caution against using too many large images... it makes for a slow site especially if you want to scale up to alot of traffic.

      Ron

      Great advice to caution against too many large images. I'm just wondering what is considered a 'large image' these days? The internet has moved on a bit since I first started adding graphics to websites and things are getting funkier.

      I don't want to hi-jack this thread and wander off the point, but it may be helpful if an expert could give some guidance on sensible image file sizes.

      thanks

      Kate
      Signature
      Local internet marketing in the UK
      Only the businesses who can be found online will succeed. Improve online visibility with www.vizzibiliti.co.uk
      {{ DiscussionBoard.errors[463424].message }}
  • Profile picture of the author Aaron Moser
    I looked into the solution of using the javascript fix for PNG images before but then that presents a new problem if their browser is blocking javascript.

    Best thing to do would be to just not use PNG's and convert them to jpg's.
    Signature



    {{ DiscussionBoard.errors[463297].message }}
  • Profile picture of the author Kurt
    Can Macs dispaly .png? Years ago they couldn't, but how about OSX? How about linux? png is basically a Microsoft format. Have the other two "updated"?
    Signature
    Discover the fastest and easiest ways to create your own valuable products.
    Tons of FREE Public Domain content you can use to make your own content, PLR, digital and POD products.
    {{ DiscussionBoard.errors[463312].message }}
  • Profile picture of the author Hanuka
    Or a sensible page size if possible. thanks xD
    Signature

    ~Good Brother~

    Advertising is 85% confusion and 15% commission.. ROFL! xD

    {{ DiscussionBoard.errors[463445].message }}
  • Profile picture of the author Josh Anderson
    I looked into the solution of using the javascript fix for PNG images before but then that presents a new problem if their browser is blocking javascript.
    If a person is browing with IE 6 and has javascript blocked...

    1. They are probably not your target market.
    2. They know what they are doing and can unblock it and view your site in Firefox if they really wanted to see your graphics to begin with.

    This is not an issue in current versions of IE, Firefox, Chrome, and Safari...

    Look at your stats see what your visitors are using. Make your decision from there.

    I researched this issue recently and came to the personal conclusion that it was not an issue that should concern me at all.
    Signature
    {{ DiscussionBoard.errors[463604].message }}
  • Profile picture of the author Hanuka
    ooo yah yah I can always check my site's visitor statistics!
    thanks for the heads up, almost forgot about it xD
    Signature

    ~Good Brother~

    Advertising is 85% confusion and 15% commission.. ROFL! xD

    {{ DiscussionBoard.errors[463641].message }}
  • Profile picture of the author xy7luke
    I wouldn't worry about it. In my opinion .PNG is the way to go
    {{ DiscussionBoard.errors[463678].message }}
  • Profile picture of the author Anna Johnson
    Hanuka, go into your web analytics and see just what percentage of YOUR web visitors use which version of which browser. That will tell you whether or not it's safe to use .png images. If only a tiny percentage of your visitors use old browsers, then it shouldn't be an issue.
    Signature
    Discover a REAL Internet marketing newsletter
    News, comment, research, tips and more.
    (And great freebies when you subscribe...)
    {{ DiscussionBoard.errors[463679].message }}
  • Profile picture of the author indexphp
    All the Internet Explorer issues can be fixed with the Png Fix javascript file. The only thing you need to do is put one line of code in the header section linking to the "Unit Png Fix".
    {{ DiscussionBoard.errors[463964].message }}

Trending Topics