...

View Full Version : Different Image Types (.png, .gif, etc.)



JJackson
02-08-2010, 09:27 PM
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!

XJDX
02-09-2010, 11:56 AM
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 :(

Apostropartheid
02-09-2010, 07:57 PM
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.

VIPStephan
02-09-2010, 08:10 PM
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.

Major Payne
02-10-2010, 04:46 PM
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 (http://en.wikipedia.org/wiki/Image_formats)

Additionally...

Image Formats (http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479931)
Understanding Web Graphics and Choosing the Right Format for the Web (http://graphicssoft.about.com/od/formatswebchoose/Understanding_Web_Graphics_and_Choosing_the_Right_Format_for_the_Web.htm)
Choosing the Right Format For Your Web Images (http://www.irt.org/articles/js206/index.htm)
Which Image Format is Best (http://snook.ca/archives/design/which_image_for/)

Hope these help you get a better idea.

jenius
02-11-2010, 05:58 PM
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

abink
02-11-2010, 09:35 PM
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.

VIPStephan
02-12-2010, 12:23 PM
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.

Apostropartheid
02-12-2010, 11:15 PM
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.

Azzaboi
02-16-2010, 08:09 AM
I was looking for this info, thxs!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum