A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: png vs jpeg

  1. #1
    Senior Member tayjax's Avatar
    Join Date
    Jan 2004
    Posts
    365

    png vs jpeg

    PNG Vs Jpeg

    which is better for creating a nice clean crisp image ?
    talking memory wise and visibly

    just interested as lots of people always talk about png but i've always just used jpegs dont really know what the difference is.

  2. #2
    Old Member gecko2's Avatar
    Join Date
    Aug 2000
    Location
    New Yorkshire, UK
    Posts
    627
    I don't know too much about pngs either. I did a quick search on google for 'png vs jpg' and got some interesting results.
    Keep it rural.

  3. #3
    bidibidibidi clicky2's Avatar
    Join Date
    Mar 2004
    Location
    Indianapolis, Indiana
    Posts
    470
    the png file format supports a transparency channel. The problem is, it's not supported by all browsers.

    At this point the only thing I ever use a PNG for is exporting from photoshop to flash, and this is only if there will be transparency or level of opacity that I wish to maintain.

  4. #4
    Senior Member tayjax's Avatar
    Join Date
    Jan 2004
    Posts
    365
    yeah just read through lots of websites from a google search - seems like jpegs are normally the way to go

  5. #5
    Junior Member
    Join Date
    Aug 2004
    Posts
    23
    Some browsers that do recognize png files won't allow for transparent backgrounds.
    Last edited by spudwick; 09-17-2004 at 08:59 AM.

  6. #6
    japanese nayades's Avatar
    Join Date
    Mar 2002
    Location
    neptune's mercenary canteen
    Posts
    1,713
    it depends on the image. sometimes you'll find images that saving them in jpg format will rise the filesize compared to png. and viceversa. i usually save jpg, but for tranparency or very simple images i use png or gif.

  7. #7
    Junior Member
    Join Date
    Jul 2003
    Posts
    29
    It doesn't really depend on the image at all, to pretend some images work better in one format or another by accident is just silly, (I'm assumming it's a raster photo realistic image as you say you normally use JPEG, of course vectors etc differ) it depends on what you are using it for. PNG's are useless in a HTML page but great it Flash, PNG is a lossless format that Flash supports very well. (+ transparency, if needed, but not the only reason for using PNG's)High contrast images will look great via PNG format in Flash. JPEG's can look great but by design JPEG loose certain part's of a graphic.

    If it's important I would recommend further reading via Google, bearing always in-mind your intended end use.

    (ps. I would avoid using .gif transparencies in Flash use .PNG)
    Last edited by Peter Rogers; 09-15-2004 at 09:43 PM.

  8. #8
    Senior Member tayjax's Avatar
    Join Date
    Jan 2004
    Posts
    365
    yeah basically at the moment i'm using lots of small photos of valves so i guess jpegs are the way forward for me... i think

  9. #9
    japanese nayades's Avatar
    Join Date
    Mar 2002
    Location
    neptune's mercenary canteen
    Posts
    1,713
    Originally posted by Peter Rogers
    It doesn't really depend on the image at all, to pretend some images work better in one format or another by accident is just silly, (I'm assumming it's a raster photo realistic image as you say you normally use JPEG, of course vectors etc differ) it depends on what you are using it for. PNG's are useless in a HTML page but great it Flash, PNG is a lossless format that Flash supports very well. (+ transparency, if needed, but not the only reason for using PNG's)High contrast images will look great via PNG format in Flash. JPEG's can look great but by design JPEG loose certain part's of a graphic.

    If it's important I would recommend further reading via Google, bearing always in-mind your intended end use.

    (ps. I would avoid using .gif transparencies in Flash use .PNG)

    you talk as if the only way of designing was flash. and you think all the images to be used are destined to end in a swf file.
    one of the prior objectives of a site is to be compressed and low in file size. and yes, i go for the lowest filesize without sacrifying quality. and some times jpg is unable of compressing simple images.

    try it. open photshop. just fill the background with red. click on save for web and look at the filesizes.
    of course depends of the canvas size, but take a for example a 300x400px one.

    jpg set at QUALITY "0%" sets the image file size to 1.2k's.
    png set's it to 546 bytes
    and gif to around 200.

    but take for example a photo picture of 500x500px.
    jpg compresses it at 60% (high quality) at a filesize of 60k's.
    png8 raises the file sixe to a 120.
    not to mention png 24, which raises it to 350k.
    gif sets it at 140k.

    the kind of image you're are trying to save does count to choose the type of image compression file you want.

  10. #10
    Junior Member
    Join Date
    Aug 2004
    Posts
    23
    I know this wasn't your question, but still it's worthy to mention.

    When talking about images for the web, you would use jpgs for photo images, and gifs for images of few and solid colours. This is because of the compression techniques of each format that leads to a good balance between image quality and file size. This isn't anything new.

    That being said, putting a transparent image on the web is a bit more difficult. The easiest way, and the way that is supported by practically any browser is using a GIF89a. The problem is a GIF image can either use no transparent colors at all or have one colour that’s completely transparent – there are no degrees of transparency.

    So if you -really- want to put up transparent GIFs, you may have to settle for comprimised image quality. The edges of the image come up looking like ass and many times you'll have a matte colour on the edges making the image look like it was torn from a magazine.

    The PNG format is your alternative to this. It supports full transparency, true colous, and the file compression is lossless. Image quality is better, but the file size will be larger than a JPG. Netscape 6 Win/Mac, Mozilla 1 Win/Mac, Opera 6 Win, Opera 5 Mac and IE 5/Mac will all support PNGs with no problems. However, Internet Explorer on a Windows system will NOT natively support the transparency channels on a PNG, and will display to the user a gray matte colour where transparent pixels should be.

    There is a way around this with javascript.

    http://www.alistapart.com/articles/pngopacity/

    This site gives you the javascript necessary to force Internet Explorer 5.5 and up for Windows to read and display the transparent channels.

    Hopefully this post helps some people out.

  11. #11
    japanese nayades's Avatar
    Join Date
    Mar 2002
    Location
    neptune's mercenary canteen
    Posts
    1,713
    ^^ exactly. file type depends on image.

  12. #12
    Junior Member
    Join Date
    Aug 2004
    Posts
    23
    Of course it does.

    Most of Peter Rogers' entire post is grossly incorrect. If you're having problems with image quality from JPG files (eh hem, "by design JPEG loose certain part's of a graphic"), it's time you graduate from MS-paint to a graphic editing program that allows you to control compression.

  13. #13
    ¤ ¤ ¤ PAZ ¤ ¤ ¤ nordberg's Avatar
    Join Date
    Nov 2000
    Location
    east of west
    Posts
    4,704
    number of colors greatly affects the size of a png.

    screen shots of software (few colors) are tiny with .png (12-36k) - great for importing into flash.
    those same screen shots as .jpg are huge!

    however, a photo saved as a .png, even though it may be the same dimensions as the screenshot, would have a huge file size (500k).

    also, am i wrong to think that there is zero distortion/compression with a .png?

    Ah, these boys is all swelled up. So this was earlier...getting set to trade. Then, woooaaah differences.
    Blog ¤ Photos ¤ Book

  14. #14
    Junior Member
    Join Date
    Aug 2004
    Posts
    23
    PNGs are compressed by grouping patterns and exact colours within an image. No information gets discarded, but the file is saved a bit more efficiently.

    So there is no distortion with a PNG file because of the way the file is compressed.

    A BMP, on the other hand, doesn't use compression.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center