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.
  2. Better Analytics for WordPress Get It Free

PNG, JPG, or GIF images?

Discussion in 'HTML & Website Design' started by sowers, Oct 26, 2008.

  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?
     
    sowers, Oct 26, 2008 IP
  2. Yukio

    Yukio Peon

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I always use GIF - mostly because it's small and can also use transparencies. I tend to avoid PNG mainly as its easier for me to keep everything as one file format.

    It doesn't really matter at the end of the day - whatever makes it easier for you.
     
    Yukio, Oct 26, 2008 IP
  3. joebert

    joebert Well-Known Member

    Messages:
    2,152
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #3
    I've never heard anything about "Gamma differences" with PNG.

    Have any sources available ?
     
    joebert, Oct 26, 2008 IP
  4. SEOAnalytic.com

    SEOAnalytic.com Member

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #4
    I like PNG most of all, but because of the many naive people who still use IE6, i have to use gif and spend more time adjusting the gif images to look well on my web pages.
    Transparent png images can be put on any background color and they will look fine. if you put a gif image on a yellow background, but the gif was adjusted for the blue background, then you will notice some jagging around the image.
    JPG- not at all.
     
    SEOAnalytic.com, Oct 26, 2008 IP
  5. Scoty

    Scoty Active Member

    Messages:
    620
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #5
    I use PNG and GIF, used to be strictly PNG but after some loading issues with PNG I started using GIF for my layouts to keep the load down, if an image within the layout needs higher quality then I'll use PNG. For all other images not part of the layout I use PNG.

    JPG loses quality far too quickly so never.
     
    Scoty, Oct 26, 2008 IP
  6. Sensei.Design

    Sensei.Design Notable Member

    Messages:
    3,843
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    260
    Digital Goods:
    1
    #6
    I'm using png files vor nearly everything only in my content I use gif or jpg but for the layout only png
     
    Sensei.Design, Oct 26, 2008 IP
  7. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,429
    Likes Received:
    94
    Best Answers:
    7
    Trophy Points:
    0
    #7
    I might have read something about gamma differences, but that doesn't mean it favors gif over png.

    PNG, btw, compresses smaller than gif so I don't know what Yukio is talking about.
     
    drhowarddrfine, Oct 26, 2008 IP
  8. cipals15

    cipals15 Well-Known Member

    Messages:
    1,086
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    100
    #8
    JPEG for high quality images.
    PNG for regular images
    GIF for Speed
     
    cipals15, Oct 26, 2008 IP
  9. joebert

    joebert Well-Known Member

    Messages:
    2,152
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #9
    The rounded corners at phpBB.com are a good example of when you can use PNG to get better quality alpha channels in a layout for browsers with good support, while using IE conditional comments to load an alternate stylesheet which uses GIF images instead.
     
    joebert, Oct 26, 2008 IP
  10. skateme

    skateme Peon

    Messages:
    162
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I thought PNG images weren't widely supported across different browsers. I mainly use JPG and GIF images for what cipals15 said, but I never use PNG.
     
    skateme, Oct 26, 2008 IP
  11. joebert

    joebert Well-Known Member

    Messages:
    2,152
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #11
    You'll get a better quality gradient from a 24-bit PNG than you will from a JPG or GIF. GIF can however match the quality of a PNG on short gradients covering 255 shades or less.

    JPG is for photographs, not general quality.
     
    joebert, Oct 26, 2008 IP
  12. Tempera

    Tempera Banned

    Messages:
    288
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Only really see photo's using JPG
    I would adree using PNG for higher quality

    Tempera
     
    Tempera, Oct 26, 2008 IP
  13. shipit

    shipit Peon

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I agree. GIF is also good for logos/images with few colors.
     
    shipit, Oct 26, 2008 IP
  14. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,429
    Likes Received:
    94
    Best Answers:
    7
    Trophy Points:
    0
    #14
    Wrong. PNG files will beat GIF files in size, and therefore speed, in almost all cases. PNG replaces GIF, though animated PNG is not generally available...yet. Though PNG can be used for lower quality images, the preferred format is JPEG
     
    drhowarddrfine, Oct 26, 2008 IP
  15. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #15
    http://www.matthewrochow.com/optimisation/image-optimisation/

    8bit PNG will loader faster than a GIF. So for photos you use PNG or GIF?

    Yes, there are gamma problems, however they are easily fixed.

    Considering PNG is smaller than GIF for basically anything over 100bytes, not sure why you consider GIF is "speed"
     
    rochow, Oct 26, 2008 IP
  16. outspan

    outspan Active Member

    Messages:
    420
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #16
    PNG has no quality loss
    JP(E)G is in between
    GIF is compatible with most browsers but the quality isn't that great
     
    outspan, Oct 27, 2008 IP
  17. gfxmachines

    gfxmachines Peon

    Messages:
    366
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I use jpg's... coz its compatible with most browsers...

    but u can use PNg's and there's a solution for that gamma differences..

    just use PNGfix script... it should solve the prob.....
     
    gfxmachines, Oct 27, 2008 IP
  18. jooria.com

    jooria.com Banned

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    see this
    jooria.com/details-30.html
     
    jooria.com, Oct 27, 2008 IP
  19. fotoviva

    fotoviva Active Member

    Messages:
    262
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #19
    All down to file size/quality - jpegs for images with gradients and gifs for solid colour images. Using PS 'save for web' function you can compare side by side the different formats, together with the file size.
     
    fotoviva, Oct 27, 2008 IP
  20. web-master

    web-master Peon

    Messages:
    839
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I only use PNG's while developing the site and then for the final release I export to JPEG.
     
    web-master, Oct 27, 2008 IP