Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post

    Different Image Types (.png, .gif, etc.)

    I'm having a little trouble understanding the differences in image types (such as .png, .gif, and .jpg). The problem I have is figuring out what to choose when I am slicing a PSD for a site. Are there any tutorials that show you what extensions to choose when slicing?

    Thanks!

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Normally I go for .jpg on most of my slices which are detailed, such as photo's of people, or graphics. For things like gradients, icons I will use a .gif. I rarely use the .png format unless I need transparency which then obviously needs hacking to work in IE 6

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    PNG is superior to GIF in practically every way. Just be sure to export as PNG-8 if your image has fewer than 256 colors in it, PNG-24 (or PNG-32 without transparency) for images without alpha transparency over 256 colors, and PNG-32 (or PNG-32 with alpha transparency) if it does have transparency.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Apostropartheid View Post
    PNG is superior to GIF in practically every way. Just be sure to export as PNG-8 if your image has fewer than 256 colors in it, PNG-24 (or PNG-32 without transparency) for images without alpha transparency over 256 colors, and PNG-32 (or PNG-32 with alpha transparency) if it does have transparency.
    But just to add to this so there won’t be any confusion: if you have photos or images with millions of colors, use JPEG. PNG 24/32 does handle millions of colors but the file size is way too big then because PNG is lossless.

    A general rule of thumb: it’s always a compromise between image quality and file size.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by JJackson View Post
    I'm having a little trouble understanding the differences in image types (such as .png, .gif, and .jpg). The problem I have is figuring out what to choose when I am slicing a PSD for a site. Are there any tutorials that show you what extensions to choose when slicing?

    Thanks!
    This is a good source of explaining image file formats: Wikipedia

    Additionally...

    Image Formats
    Understanding Web Graphics and Choosing the Right Format for the Web
    Choosing the Right Format For Your Web Images
    Which Image Format is Best

    Hope these help you get a better idea.
    ☠ ☠RON☠ ☠

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    137
    Thanks
    3
    Thanked 10 Times in 10 Posts
    Allow me to actually answer this question:

    - Before you export your image, turn off all layers except for the one(s) you need to export
    - When you are exporting a normal square shaped image for the web, choose jpg at "very high" quality, and check "convert to sRGB"
    - When you are exporting an image with any transparency in it (AKA if you can see any of the grey and white grid showing through), choose png-24 with transparency checked.

    Those are the only two formats you should ever have to use.

    When building sites, I have mostly pngs (because I don't have that many square images, mainly, and use lots of drop shadows and glows)

    The only other issues you could possibly have with exporting and image formats is color profile management. If you have a problem with that come back and ask - otherwise leave it along

    Oh, and one more thing, for gods sake never integrate photoshop with dreamweaver. But having answered your posts in the CSS forum, I assume you know this
    Last edited by jenius; 02-11-2010 at 06:02 PM.

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Location
    Lawrence, KS
    Posts
    9
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Apostropartheid View Post
    PNG is superior to GIF in practically every way. Just be sure to export as PNG-8 if your image has fewer than 256 colors in it, PNG-24 (or PNG-32 without transparency) for images without alpha transparency over 256 colors, and PNG-32 (or PNG-32 with alpha transparency) if it does have transparency.
    Except often it's a significantly larger file.

    GIF - Best for simple graphics such as a logo where you have larger areas of solid colors. Or if you need to export text as a graphic.

    JPG - Best for photos.

    PNG - I only use if I've got a combination of text and photo. Image is large, but handles solid areas of color and text much better than JPG.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by abink View Post
    Except often it's a significantly larger file.
    That’s not true. PNG is only larger for very small images (dimension wise), like if you export a 2 by 2 background image with one color. But if you have a larger graphic with less than 256 colors then PNG 8 is definitely smaller than GIF.
    There is a point (i. e. a range of image dimensions) where the size of GIF and PNG are mostly equal but I haven’t really investigated this so far. If you have a small logo then yeah, GIF could be a little smaller. But PNG is still to be preferred as it’s just a more modern format and an open standard.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by abink View Post
    Except often it's a significantly larger file.

    GIF - Best for simple graphics such as a logo where you have larger areas of solid colors. Or if you need to export text as a graphic.

    JPG - Best for photos.

    PNG - I only use if I've got a combination of text and photo. Image is large, but handles solid areas of color and text much better than JPG.
    Stephan is indeed right. Have you ever heard of PNG-8? I had made this same mistake for a long time too.

  • #10
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts
    I was looking for this info, thxs!


  •  

    Posting Permissions

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