#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    113
    Rep Power
    12

    Jpeg or GIFs? Image compression?


    Which is better and why, to use for Webdesign or flash design, or design which requires a smaller file of images. Which is more flexible and more compatible in general as well.

    Be blunt about it and as detailed if you can. I am trying to figure out which format to work in. I currently use jpegs and save it for web, but I am so concerned about what quality to use. I currently use 60 as a general rule, but I would like to know what most people use as a general. eg. For images full color I usually use 60, for images with mainly 3 colors 40. I know its see and decide, but theres a general rule that people use that can help me work off. Even with 2 colors I find that some files are bigger depending what colors they are, why? Does anyone know how color affects the size of the file. I want to try to optimise my webdesigns the best I can.

    cheers
    TIA
    INE-Kpro...
    (eye-yen-kay pro)
    http://www.INE-Kpro.com
    enquiries@INE-Kpro.com
    <--- watch this space --->
  2. #2
  3. This is only a test
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Location
    Off the air
    Posts
    2,893
    Rep Power
    153
    It really depends on the picture you're using. A few rules of thumb:

    If it's a photo, go jpg (gif's are limited to 256 colors, and photos often need more)
    If it's a drawing, go gif (jpgs tend to create 'artifacts' around the edges of differently-colored elements, and they're pretty obvious and ugly in pics with solid colors)
    You shouldn't run into many pic/jpgs you need to run higher than 60, and many will look fine at 30
    Don't run gifs lower than 8 colors; you'll start to lose the integrity of your edges
    Only run gifs at 256 colors if there's a lot of detail (mainly in shading); if there's a big difference between 256 and 128, you may be better off using jpg
    Smaller pics are usually better as gifs, even if they're photos

    Remember these are very general rules; your mileage may vary.

    Also remember that jpg doesn't support transparency or animation.
    "Not to offend our Swedish listeners ... if we have any, that isó"
    "óBut your team's rubbish."
    (Sun webcast, Sweden vs. Paraguay)

    Who needs corporate radio?
    WeFunkRadio.com | Global Pop Conspiracy | Radio Paradise | SomaFM | The Classic Soul Network | Boot Liquor | WFMU Freeform Radio
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    113
    Rep Power
    12
    isnt when ur doing saving for web in photoshop, its only 256 colors in jpegs. is it good to mix n match jpegs and gifs when using it for website designs both in flash or html.

    which is better 256 color jpeg or 256 color gifs?
    30 quality jpegs looks blotchy though in PS.

    How do you prevent gradients to not look so blotchy in thousands of colors, or is it not preventable?
  6. #4
  7. This is only a test
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Location
    Off the air
    Posts
    2,893
    Rep Power
    153
    Can't help you with flash, but it's often advantageous (if not necessary) to mix jpgs and gifs in html pages.

    As for comparing jpg and gif quality: it all depends on the picture. I find 30-quality jpg works fine with most photos -- not perfect, but perfectly acceptable for the file size. For some pictures, a 256-color gif may look better, but the file size is far too high. The same goes for most jpgs over 60 quality.

    I have found that for most pics, if I have to go over 60 to make it look decent, I'm usually better off making it a gif. Or just sucking it up for file size and have it not look as nice as I'd like. Again, it depends on what you're working with.

    Another thing you can do to help blotchiness in jpgs is a little bit of blurring. You can set it in the save for web properties. I've never been able to set it higher than .2, though, before it's been too blurry for my tastes. But even that little can help with artifacts.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    9
    Rep Power
    0
    in general you make photographs and photograph quality images jpg, other images like text on white or cartoonish looking stuff gifs

    jpg keeps track of every pixel
    gif keeps track of shapes of color

    when using photoshop to create images for websites always 'save for web'. once there it's easy to switch between gif and jpeg, check the size of the output file, the smaller the sized output file is the one to go with. if the gif is using all 256 colors that's a good indication that the image is probably too complex for gif and you should use jpeg.

    use 'save for web' to create jpegs, dont go below 60 quality unless it's thumbs or there's some other reason to not care about quality. more and more people have lcd monitors and they require an even higher quality jpeg. i save at 70.

    for flash, create a png file for import, flash does its own optimization.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    113
    Rep Power
    12
    i know flash does its own optimisation if u set it, but isnt that not as good as optimising it in photoshop. why do i create a png file for import?

    can someone help me with my other questions please.

    TIA
    INE-Kpro...
    (eye-yen-kay pro)
    http://www.INE-Kpro.com
    enquiries@INE-Kpro.com
    <--- watch this space --->

IMN logo majestic logo threadwatch logo seochat tools logo