1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

PNG, JPG, or GIF images?

Discussion in 'HTML & Website Design' started by tong1991, Apr 8, 2009.

  1. #1
    I usually use PNG for most images on my sites since I seem to get the quality I want with the smallest size compared to other formats displaying the same quality. But, I've seen some threads about gamma differences when using PNGs so I don't know what to choose now.

    Which format do you use and why?
     
    tong1991, Apr 8, 2009 IP
  2. Oxi

    Oxi Peon

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I use PNG for the majority for the same reasons you do. I remember when i first started out in web design those many years ago, i always used JPG (so im guessing many other beginners might still do the same). I barely ever use gif's though as i barely use animation.
     
    Oxi, Apr 8, 2009 IP
  3. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #3
    I use JPG for busy images with a lot of random patterns to them like it's designed for, sometimes I use it for thumbnails for the sake of consistency even if it means a few sub-par quality thumbnails.

    I use GIF for simple animation and experiment with it for small icons and other small images with a small number of colors. Sometimes it will produce smaller files than PNG with an indistinguishable quality difference.

    I use PNG for pretty much everything else.

    I have to use PNG for iPhone Web Clips. I been thinking about using PNG for favicons instead of ICO for consistency-sake.
     
    joebert, Apr 8, 2009 IP
  4. geekos

    geekos Well-Known Member

    Messages:
    3,365
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    140
    #4
    I use PNG for Template Layout
    Gif for the buttons
    and JPG for the content graphics.
     
    geekos, Apr 8, 2009 IP
  5. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #5
    I generally use whatever format is the smallest without compromizing the quality too much
     
    qazu, Apr 8, 2009 IP
  6. ahsan_ma07

    ahsan_ma07 Peon

    Messages:
    97
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I agree with joebert, for using JPEG for images with patterns, textures or more number of colors and GIF for images with same or very little color. But you also need to consider cross browser compatability as well. IE 6 does not support PNG 24 transparent images without hacks. Although PNG 8 transparent images saved from fireworks don't need any hack for IE 6. All in all, it's a matter of what works best for different types of images.
     
    ahsan_ma07, Apr 8, 2009 IP
  7. Rad_Dev

    Rad_Dev Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I'm with you.. I also like to use png files in flash content.
     
    Rad_Dev, Apr 8, 2009 IP
  8. omglol

    omglol Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I've only found PNG color problems when using Safari/webkit. You just have to make sure they're saved in the correct color space.
     
    omglol, Apr 8, 2009 IP
  9. prasxz

    prasxz Peon

    Messages:
    392
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I like PNG , it's small size with good quality
     
    prasxz, Apr 8, 2009 IP
  10. BadBoyzStudioZ

    BadBoyzStudioZ Peon

    Messages:
    760
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Good topic.

    Transparency PNG is great, just too large. No compression algorithm works to reduce the size. Gif is OK, but won't dither. Has to be clean. Still a good choice over png for one other reason... IE6 and below does not recognize png as a format. Messes up your intended look.

    People like us, that is we are much more savvy than the average user, take for granted some important facts. 60% of the Internet users are still on phone modems. I have had broadband forever, I could be guilty of taking that for granted. And number two... Many more people than we can imagine are using aged computers and will not upgrade browsers. The other portion are running illegal OS's and won't out of fear, and many yet do not know that you can run a Firefox and IE on the same machine.

    The general rule of graphic size is under 21k. Tiny for sure. Graphics are not the thing that makes a website relevant either, they are only of passing interest to the end user. They see them once and then ignore them. Content is still King, so an all graphics site has to really work it to make the cut.

    What I do now is that I use jpg only wherever I can. Compressed to the max and I attempt to keep the integrity of the graphic wherever possible. I love graphic heavy pages myself, I mean I love to create them. But use DP as an example, or Craigslist. Totally accessible by anyone anywhere with any Internet set up. That fact alone will keep people interested. More so than graphics.

    That is what I do anyway. It's hard and a compromise from time to time.
     
    BadBoyzStudioZ, Apr 8, 2009 IP
  11. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #11
    Are any of you still getting many IE6 users ?
    I just checked my logs and my average IE6 segment is between 2.5 and 3.5 percent of all visits.
     
    joebert, Apr 8, 2009 IP
  12. BadBoyzStudioZ

    BadBoyzStudioZ Peon

    Messages:
    760
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sure. But multiply that by a site that has 2-3 hundred thousand hits a day and that is a huge number. It's all relative.
     
    BadBoyzStudioZ, Apr 8, 2009 IP
  13. dekree81

    dekree81 Peon

    Messages:
    202
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Transparency PNG doesn't work for certain browser & version like ahsan_ma07 said. Hence, for tranparensy images, I use GIF. I also using GIF for animated image.

    PNG is used for almost everything: layout, buttons.

    JPEG: seldom using it recently.
     
    dekree81, Apr 8, 2009 IP
  14. tong1991

    tong1991 Peon

    Messages:
    215
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    PNG seems to be dominant
     
    tong1991, Apr 8, 2009 IP
  15. waxman1000

    waxman1000 Peon

    Messages:
    1,365
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #15
    PNG give the best quality but take so much space. when memory is an issue, i don't use PNG.
     
    waxman1000, Apr 8, 2009 IP
  16. BadBoyzStudioZ

    BadBoyzStudioZ Peon

    Messages:
    760
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #16
    PNG was original an answer to a legal dilemma. Gifs, especially the animated variety were protected by a patent. The patent owner went around staking their claim and a developer created the PNG format as open source. PNG's rock really, way cleaner than Gif, and they dither so you can make effects work like glow or shadow. But they are HUGE no matter what you do. I have tried many tactics to drop the size and no one has an effective algorithm for compression.

    I have them on my site. My logo is a PNG. I have the work around for IE 6 coded in there, but for the first few seconds on an older browser you can see the transparency is gone. Then the .php script handles it. They do rock though, just too big. More graphic equals slower loading time. I factor that in, sometimes I just don't care, but I always pay for it.
     
    BadBoyzStudioZ, Apr 9, 2009 IP
  17. tong1991

    tong1991 Peon

    Messages:
    215
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #17
    But I see the quality of its good
     
    tong1991, Apr 9, 2009 IP
  18. eamiro

    eamiro Well-Known Member

    Messages:
    274
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #18
    I also use PNG image format, it provides good quality with a small file size.
     
    eamiro, Apr 9, 2009 IP
  19. bam

    bam Peon

    Messages:
    53
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Use png, good quality and minimal size
     
    bam, Apr 9, 2009 IP
  20. jessicasamuel

    jessicasamuel Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I'm using png for my background images..:eek:
     
    jessicasamuel, Apr 9, 2009 IP