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?
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
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.
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.
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
- 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
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.
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.
Before you post, read our: 
