Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorArun
    • CommentTimeJan 20th 2006 edited
     permalink
    When we are creating a better and quality design, which image file format is good to use ( eg: PNG, GIF, JPG )? I am using more images as Gif format. Gif is less size but quality is less.

    Can anyone suggest better solution
    •  
      CommentAuthortrovster
    • CommentTimeJan 20th 2006 edited
     permalink

    It all depends on what the image is!


    If it's a few solid blocks of colour, such as a logo or a vector graphics, then a GIF is the most appropriate.


    If the image is a photograph, then the best format you can use is a JPG because of the type of compression.


    If you want to use an image with more colours than GIFs support and have transparency, then you will have to use a PNG. PNG is also for alpha-transparency, which means it allows more than one level of transparency. But beware, IE has problems with 24bit PNGs (alpha transparent images) and hue/color matching for normal PNGs. This can be fixed, but should be avoided.


    You can read up on image formats anywhere you like, but here's a starter - Image formats.com

  1.  permalink
    Jpeg for digital media (Photos, things with tons of colors), PNGs should replace GIFs.

    That is all you should be using for Web-design.
    •  
      CommentAuthortrovster
    • CommentTimeJan 20th 2006
     permalink

    nick1presta: That's in an ideal world, but like I mentioned IE6 (80% general usage) doesn't properly render PNGs. However, this can be fixed with JavaScript, and is fixed in IE7


    PNGs should also be fine if you're colour matching to background colours or GIFs, as IE (again) gets the colour slightly incorrect, but noticeable.

    • CommentAuthorRisK
    • CommentTimeJan 20th 2006 edited
     permalink
    yep it all depends on the needs. but i really think PNG is the best format there is....it supports transparency, and it can also be used for hi-res images.

    but wait a second, are we supposed to count on IE7 already? isn't it way too soon? unless IE7 is available for download to be used on XP, i think the transition process from XP to Vista will take some time. at least not until a year or two...
    • CommentAuthorSam K
    • CommentTimeJan 20th 2006
     permalink
    All three. Eahc one has a use for something. Never, NEVER use just one.
    •  
      CommentAuthortsk
    • CommentTimeJan 21st 2006
     permalink
    I do agree with nick1presta. Gif has lived-out its goal. Good use of PNG should replace GIF in further development.
  2.  permalink
    Yes. Also, if you run your PNGs through this program, PNGout, they look great. Photoshop sucks with saving PNGs.

    And as long as you don't use 24bit transparency, IE is fine.
    •  
      CommentAuthorFilipo
    • CommentTimeJan 28th 2006
     permalink
    I haven't used PNGs ever, but maybe I should start to. I'm reading your posts and it makes in my mind a dilema.

    GIFs are supported in all browsers but the PNGs not in IE, so if we want better transparency we use PNG. OK. but what if IE doesn't take it so what then ?...

    And for photos I use JPG, of course.
    • CommentAuthorArun
    • CommentTimeJan 28th 2006
     permalink
    Thank u very much for all of you,
    i have one more
    Q. How we can reduce our loading time if png filese are uploaded ?? also is it possible animatted png?
    •  
      CommentAuthornifkin
    • CommentTimeJan 28th 2006
     permalink
    How we can reduce our loading time if png filese are uploaded ??

    Um, change your compression settings when saving them to make smaller files?

    also is it possible animatted png?

    no.
    •  
      CommentAuthorFilipo
    • CommentTimeJan 28th 2006
     permalink
    Animate PNG is impossible, so we still using GIFs because sometimes we need little animation. for button etc.

    And my dilema ended :)
  3.  permalink
  4.  permalink
    Like mentioned before, photoshop pngs are rendered slightly incorrectly in IE. Is there any program to use that will make it so the pngs are rendered nicely in IE (perhaps more user friendly than PNGout) ?
    •  
      CommentAuthortsk
    • CommentTimeJan 29th 2006
     permalink
    I've used this PNGout app but I am sorry to say that I had no useful results. The transparency issue didn't get fixed with IE. Am I getting it wrong? Is it supposed to fix that or am I feeding some inapropriate PNGs to it?
    • CommentAuthorspyyddir
    • CommentTimeJan 30th 2006
     permalink
    Ummm, guys... PNGout doesn't fix the IE transparency issue. It just makes the PNG itself look nicer.
  5.  permalink
    Yeah, as I said.
    •  
      CommentAuthortsk
    • CommentTimeJan 30th 2006
     permalink
    My bad then/ Forget the silly question
    • CommentAuthorartcore
    • CommentTimeJan 30th 2006
     permalink
    That's in an ideal world, but like I mentioned IE6 (80% general usage) doesn't properly render PNGs. However, this can be fixed with JavaScript, and is fixed in IE7

    any tip on how we can use png's transparency on IE using javascript?
  6.  permalink
    Use Dean Edwards IE7.

    http://dean.edwards.name/IE7/

    Include it in a global header or something similar to reap the benefits of CSS2 selectors, :hover psuedo-classes on all elements and transparency.
  7.  permalink
    Ummm, guys... PNGout doesn't fix the IE transparency issue. It just makes the PNG itself look nicer.

    Sorry, when I said "rendered slightly incorrectly in IE" I meant that the colors are rendered slightly incorrectly, nothing to do with transparency.
Add your comments
    Username Password
  • Format comments as (Help)