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.

Best Image format ?

Discussion in 'HTML & Website Design' started by markup, Apr 15, 2010.

  1. instantpage

    instantpage Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Oh, for those not so informed about image formats I should add:
    there's not only the format, you still have parameters like
    * compression/quality in jpeg
    * number of colours in gif and png

    The best is to play around, look at the previews (or results if your program doesn't have a preview) and learn yourself.

    I'd say that I could certainly compress the average web image* to less than 50% of it's current size without a visible quality loss. And very probably even more could be economized.

    *considering all of the images in the internet
     
    instantpage, Apr 17, 2010 IP
  2. Sheri11

    Sheri11 Peon

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #22
    as I'm using JPEG for best image format........
     
    Sheri11, Apr 17, 2010 IP
  3. Gr33ny

    Gr33ny Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    LOL Amen brother, I had a good laugh reading the last paragraph. "they don't know enough about web development to code their way out of a piss soaked paper bag", classic. xD
     
    Gr33ny, Apr 17, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #24
    You should try 8 bit palettized .png - same capabilities including single color transparency, same browser support as .gif (even works in IE), and usually smaller file sizes on anything more than 16 colors. You can even eliminate the color gamma issue using tweakpng.exe
    http://entropymine.com/jason/tweakpng/

    Though photoshop is a bit of a retard about handling them - which is why I do all my final saves from Paint Shop Pro.
     
    deathshadow, Apr 17, 2010 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #25
    as well as how much dithering if the program you are saving with supports it. Again, cannot recommend Paint Shop Pro's save time optimizer highly enough - much less it's leaner footprint making it better suited to 'fast' work like cropping/resizing or even simple edits. Long runs of the same color horizontally, and repeating patterns vertically can both result in smaller images, so what colors are chosen for the palette reduction and how much dithering is applied can have an effect on the final size. This is why many programs often have more than one algorithm for determining the best colors (like PSP's median cuts vs. Octree) to do the color reduction with - as well as choices like 'ordered' and 'random' dither, and even things like interlaced vs. non-interlaced images. Interlaced doesn't just give you that 'progressive image load' thing, it can sometimes result in smaller files; Though it can also result in larger files - which is why you have to TEST.

    I think those of us who work with the image sizes a lot can all agree that it's just not as simple as 'pick one format' as they all have advantages and disadvantages.

    Which is the best advice - there are not hard fast rules... you can develop a few guidelines but sometimes the encoders of each format can 'surprise' you with results you don't expect... See some small (64x64 or smaller) 16 to 64 color linearts that actually save SMALLER as 24 bit .png than any other format because there's no palette information saved and the encoder handles the long vertical runs - or how sometimes if you MUST fit a file into a certain size the dithering of a .png or .gif ends up doing less damage than the artifacting from high jpeg compression...

    There is no easy answer... Test each image, use what gives you the best result from each...

    Oh, and 320k is not 'best result' if the image is going into your template. ;)
     
    Last edited: Apr 17, 2010
    deathshadow, Apr 17, 2010 IP
  6. CaseyM

    CaseyM Peon

    Messages:
    289
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #26
    It all depends on what the images are of. If there arent many colours, then you can use gif to save on sizd. In terms of quality .png are better but come at the cost of being more expensive in terms of size. jpgs are a happy medium

    :)
     
    CaseyM, Apr 19, 2010 IP
  7. deaglezor

    deaglezor Member

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #27
    png for good quality.
     
    deaglezor, Apr 19, 2010 IP
  8. Nordvind

    Nordvind Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #28
    JPEG is the best format for general images and photos. No one can convince me that its quality is bad, unless you compress it lower than 60%. And when I need alpha channel I use PNG. It is really simple :) And GIF is terrible and outdated (come on, it was introduced in 80s).
     
    Nordvind, Apr 19, 2010 IP
  9. noahqw

    noahqw Member

    Messages:
    180
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #29
    Defiantly depends o nthe results your looking for. PNG if your designing website and want top results. .GIF if you want lower quality images but a high performance site. Really it all depend on your needs.
     
    noahqw, Apr 19, 2010 IP
  10. Plazey

    Plazey Member

    Messages:
    81
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #30
    I use GIF for smaller images or images with not many colors. And then JPEG for larger images with a lot of different colors. Why not PNG? Because if you make a PNG on a Macintosh and then view it on a Windows machine, the colors are slightly off. It's very noticeable in a layout. On the same note, if you create the image on a Windows machine, it may look nice on the Windows machine, but on the Macintosh machine it's going to look bad. Also PNG isn't supported buy the older IE versions... Which I know many people still use (Maybe not a huge amount but enough to matter)
     
    Plazey, Apr 19, 2010 IP
  11. javier.garcia.esteban

    javier.garcia.esteban Well-Known Member

    Messages:
    66
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    118
    #31
    Please, disregard most of the answers here except for those who said "it depends". How can people say PNG (or whatever) is "best" in absolute terms?. The "best" image format is the one that displays correctly the image (real colors, no blurry, etc.) with the minimum file size. And that of course depends on each image. JPGs are usually better for photo-realistic images due to its compression algorithm, PNGs and GIFs identify better simple patrons (shapes), GIFs of course use less colors... but until you haven't optimized the image (reduced colors, compress, etc.) you won't know exactly the format that makes the image lighter without noticeable loss (though of course experience is a grade).
     
    javier.garcia.esteban, Apr 20, 2010 IP
  12. casius

    casius Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Hello,

    gif image is the best. because its a transparent image. you can used everywhere, but in another case PNG is also transparent and has more features then gif.
     
    Last edited: Apr 22, 2010
    casius, Apr 22, 2010 IP
  13. linkssale

    linkssale Member

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #33
    i think PNG
     
    linkssale, Apr 22, 2010 IP
  14. Paweł

    Paweł Active Member

    Messages:
    210
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #34
    JPG - many colors (photos)
    PNG - few colors (up to 256), large image dimenshions, transparence
    GIF - few color (up to 256), small image dimenshions
     
    Paweł, Apr 22, 2010 IP
  15. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #35
    Such are DP forums. I'm sure one or two learn from our posts, Javier, but few bother to read anything here.
     
    drhowarddrfine, Apr 22, 2010 IP
  16. JustCause

    JustCause Guest

    Messages:
    192
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #36
    It all depends on what you are using the images for, if its part of the design i would use GIF where i can reduce bandwidth and loading times, things like logos etc that you want to look good use PNG and for the rest use JPEG
     
    JustCause, Apr 24, 2010 IP