SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which one is better to use in a site .JPEG or .GIF?

    Hello Friends

    I have a large background image in a site.
    I wanted to know if .JPEG or .GIF is the best.

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    You should decide based on the type of image.

    Jpgs are lossy. They lose information every time they are saved, but this helps make them smaller while representing complex images such as photographs.
    If your image is photographic, choose a jpg to get the best-looking image at the smallest size.

    Gifs, I'll trade for indexed PNGs. PNG has a better compression algorithm than gif. Like gifs, png's are lossless. They remember every bit of information in the image. Like jpg's, png's can have a bazillion colours (I think it's 16 billion).

    Unlike either, png can do alpha transparency (though IE6 can't deal with it without help).

    So any work that a gif would be considered for (logos, images with few colours), a png (with indexed colours to reduce filesize) should do that job.

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,426
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Both types are widely supported. The two things you need to consider are quality and weight. You want it to look as good as it can (better qualty, more weight) and weigh as little as possible (less weight, less quality).

    As Stomme poes mentioned, pngs are probably your better choice, but through trial and error you should be able to find the best of both, quality and weight.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You could always create the image in each of GIF, JPG, and PNG formats and see which one gives you the nicer looking image at the smallest size. Usually it will be the PNG format (since that's the only one of the three specifically designed for web use) but sometimes you may find that your image is smaller in one of the other two formats.

    For images where you want to discourage theft you may want to consider using JPG images with a watermark since every time a JPG image is edited the image quality is reduced and so anyone editing it to remove the watermark will end up with a far poorer quality image than your original.

    For images where you want to include animation a GIF is the only alternative.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Stephen, what ever happened to animated PNGs?

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Stephen, what ever happened to animated PNGs?
    Anoia, the Goddess of Usability and Accessibility, descended from the Heavens and smote them all with thunderbolts.
    Birnam wood is come to Dunsinane

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Black Max View Post
    Stephen, what ever happened to animated PNGs?
    I had never seen anything before now to suggest that such a thing existed. Obviously I was mistaken. Which browsers support animated PNGs? Unless they all do that would be a good reason to not use them.

    Tommy has of course already provided a better reason for avoiding them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    As I understood it, they weren't pngs but apngs.

    I've seen them in a site or two, where I was informed by my browser that I need to download a plugin : )
    Last edited by Stomme poes; Feb 16, 2010 at 02:24. Reason: mpeg to apng... ah lookt 'm up

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Firefox (Windows) is happy with native APNG http://en.wikipedia.org/wiki/APNG I was going to mention it yesterday and that nearly always I'd use PNG-8 over GIF - for static images. But I though Stephen just meant GIF in the "de facto" sense and that other animated image formats were not widely supported just to keep things simplified - apparently he didn't. Anyway Tommy struck.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Since APNG is not widely supported natively it isn't a practical format to use. That explains why I hadn't come across it before. Doesn't change what I originally said about GIF being the format to use for animated images.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Anoia, the Goddess of Usability and Accessibility, descended from the Heavens and smote them all with thunderbolts.
    You mean this guy? Although he's not female...

    Stephen, wasn't suggesting APNGs as a viable alternative, just wondering what happened to the concept. These guys are still fighting the good fight.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    You mean this guy? Although he's not female...
    Yeah, she's female, male artists just tend to get it wrong : )

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Goddess of Things That Get Stuck in Drawers, [Tommy] was talking about and he doesn't believe in either.

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Goddess of Things That Get Stuck in Drawers
    Quite right. Although she used to be a volcano goddess.
    Birnam wood is come to Dunsinane

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Black Max View Post
    You mean this guy?
    No that's not the same god at all.

    See http://wiki.lspace.org/wiki/Anoia
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by felgall View Post
    You could always create the image in each of GIF, JPG, and PNG formats and see which one gives you the nicer looking image at the smallest size. Usually it will be the PNG format (since that's the only one of the three specifically designed for web use) but sometimes you may find that your image is smaller in one of the other two formats.
    Since PNG use a lossless compression algorithm, it can't generally be more efficient than lossy compression algorithm. As per the pigeonhole principle, a lossless image compression algorithm must always make some images larger than the original images, if it is to be able to make other images smaller than the originals. It is true that PNG image will usually give a smaller file size than a JPG image at 100 percent quality, but I haven't met anyone who would set the JPG quality to 100 percent.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Off Topic:



    Since PNG use a lossless compression algorithm, it can't generally be more efficient than lossy compression algorithm. As per the pigeonhole principle, a lossless image compression algorithm must always make some images larger than the original images, if it is to be able to make other images smaller than the originals. It is true that PNG image will usually give a smaller file size than a JPG image at 100 percent quality, but I haven't met anyone who would set the JPG quality to 100 percent.
    It depends on how much information you are prepared to lose from your JPG. Even with no compression you still lose quality at every edit. As you say, a PNG is going to be smaller than a JPG without compression applied and so it all depends on whether you are prepared to compress the JPG far enough to make it smaller than the PNG.It will be very dependent on how much of the image consists of areas that are mostly the same or similar colours.

    The other factor not mentioned before is that if you need any transparency in the image at all then you can't use a JPG.

    There is also the matter of whether or not you apply any compression to the PNG image.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    As you say, a PNG is going to be smaller than a JPG without compression applied and so it all depends on whether you are prepared to compress the JPG far enough to make it smaller than the PNG.
    Whoa, what program do YOU guys use? My plain (non-indexed) PNGs at full editor compression are always larger than jpgs, if the image is photographic (something complex like autumn leaves).

    The other factor not mentioned before is that if you need any transparency in the image at all then you can't use a JPG.
    I mentioned it in the first post.

    There is also the matter of whether or not you apply any compression to the PNG image.
    Good point, web comic artists have been using something called PNGcrush, though I don't have any personal experience with it.

    There's also an online (yahoo?) png optimiser/compressor where you can upload your file and get back an optimised file (where they simply remove any extra bits and bytes that aren't directly contributing to the image quality).

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Personally with PNG for web I'd use PNGOUT (DEFLATE optimization) rather than PNGcrush (Filter optimization) but they are similar. The problem historically with a lot of Image Editors is they are poor at saving and compressing PNG correctly (leading to bloated PNG files). So that's why Optimisers are used plus PNG Optimisers usually have have finer control over the file data.

  20. #20
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Whoa, what program do YOU guys use? My plain (non-indexed) PNGs at full editor compression are always larger than jpgs, if the image is photographic (something complex like autumn leaves).
    That is my experience as well, at 80 percent quality, which it entirely sufficient for most photographs.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  21. #21
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I agree with using PNG, I find they have smaller file sizes than JPEG as well (and there isn't the serious quality issue which JPEG suffers.

    PS: aPNG is currently supported in Firefox and Opera with Safari and IE left out in the dry. Though I doubt it'll get much swing as I'm more in favour (along with most other people) at getting animated SVG past the gates (which is even better due to it being vector not raster).

    Quote Originally Posted by AutisticCuckoo View Post
    Anoia, the Goddess of Usability and Accessibility, descended from the Heavens and smote them all with thunderbolts.
    I had to look up the reference (I don't know disc-world) but pretty funny

  22. #22
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I must say that I've never been able to get a smaller file size for a PNG than a JPG for a photograph. Graphics, yes, but not photographs.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Christian it is sometimes possible to get smaller PNG-8 than JPEG if the photograph is greyscale and not too complex I've just done it with a picture of a person... Though it depends on the image and how you save; I used an "uncompressed" 201 KB TIF and exported separately as; 100% quality JPG (77.5 KB); and as PNG-8 (70.9 KB). Perhaps I should have been more specific with the JPG settings then it might have been smaller but the PNG won in that instance (note: JPG was at 100% quality).

  24. #24
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    True, but as mentioned above, nobody use 100 percent JPG compression online (and there's really no discernable difference for most photographs). While there may be exceptions, JPG will almost always compress photographs better than PNG, is a quality loss is acceptable.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    While I will not blindly use jpg's for photograph-style images, when I'm in doubt I do as Felgall suggests and save in various forms to see who's the smallest.

    JPG usually wins. It looks okay and is way smaller. Again, this is for a photographic image.

    If it's photographic but small, I may just go ahead and let it look a bit funky and use an indexed file. http://michigan.gov/images/demo/banner4_279379_7.gif She looks indexed, but if you had some good reason to mix a logo (best as a png) with a photo that size, would you bother saving as jpg (or unindexed png?). I wouldn't.

    Why is it a gif? The word has apparently not gotten out about PNGs. I see gifs al over the place where pngs would be a bazillion times more awesome and often smaller size for exactly the same quality.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •