When I first learned web design, I was taught that you slice web graphics as JPG or GIF. Now I''m starting to see some people using PNG. Should I slice all my web graphics as PNG now? And when would I "not" want to use PNG?

Are you using PNG or GIF/JPG?

Thanks in advance.

It really depends on the situation. PNG is useful if you want alpha transparency (partial between 0-100% transparency, inclusive) or in the odd case it will create a file that is cleaner and smaller than a JPG.

I use all three, depending on the situation.

How well are png files supported by all the browsers. I was curious about this also, but a lot of articles I have read say that png support is sketchy at best. They seem to need some work arounds to get them to work in some browsers.

I have stayed away from them for now. I am interested in what the deal is with png files. I would like to use them. You can optimize png files a lot better than gif and jpeg's.

Transparent PNGs are not supported at all by IE 6 or below. For those there is either a filter option (MS only) or a javascript option. Neither can be used for a REPEATING transparent PNG in IE 6 and below.

IE 7, FF, Opera, and Safari all support transparent PNGs.

I would not use PNG myself, not every browser supports it. Everything supports jpg and gif!

Every CURRENT browser supports PNG's, transparency is the problem, and only if you want them to display properly in IE 6 and below. If the PNG contains no transparency, then even old IE 6 will display it properly. I would not worry about anything older than IE 5.5, and forget about IE for the Mac - it's DEAD.

Thats the problem, it has to be a current browser.... Not everyone uses the most current ( including me )

As others have said .PNG is supported my most latest browsers. Unless you are using transparency I see no problem in using it. Other websites using it should never be an excuse to change yours. It should depend on the statistics of your website visitors. Do majority of them use latest browsers? If no stick with .gif and .jpg why should you sacrifice potential traffic just because other websites have begun to use a specific graphic format?

Let's clear up a few things. First, unfortunately more people use IE 666 than 7, or at least more visitors to my site do.

Second, you can display png files properly in IE 6, you just have to use extra coding and hacks. Search for "pngfix" to find a java script that adds the necessary code to each img tag on a page; you use conditional comments to only run this in old versions of IE. Finally, if you don't use transparency, IE 6 can display png files just fine. On the other hand, jpegs come out much smaller for the same image data.

But there are some tremendous benefits to using them, enough that when it's appropriate to, you should go ahead. Don't just change all your jpegs, 150 KB will balloon to ~800 KB, but if you need to show the background to some degree, they're the right tool for the job.

PNGs are generally used for graphics while GIFs are good for text oriented images and JPGs are good for photographs.

As for transparency, I wouldn't bother with it on any of them, just copy the background and place it behind everything before saving.

BTW, if you use PNG be sure to use a compressor like PNGout.

Originally Posted by theseokit

I would not use PNG myself, not every browser supports it. Everything supports jpg and gif!

That's right! PNG is best for transparent backgound. But I dont like use it.

The thing is, you can't always just put the background that would be behind an image into the jpg file itself. If you use a gradient as a background image for the page, for example, the way different browsers render and different viewers have different screen sizes, your image could wind up in a lot of different places, and use the wrong background, standing out like a sore thumb.

Which makes the question a lot more complex than it should be.

I have not tried PNG yet. I only used JPG for my images. What is the advantage of PNG over JPG?

i would stick with .gif/.jpg, .png files dont appear in some of the browsers i have used, but they are a far better quality than .jpg and .gif files

Originally Posted by ChickenCamels

As for transparency, I wouldn't bother with it on any of them, just copy the background and place it behind everything before saving.

If you have done that in all your graphics and for some reason you decided to change the colors of your site then you'll have to do all your graphics again and again, doesn't sound good to me!

I have noticed and now use them solely, .gifs are much smaller in file sizes then a .jpg ever could be! I would only use .jpg for photos since .jpg is for maximum quality!

Originally Posted by joraime123

I have not tried PNG yet. I only used JPG for my images. What is the advantage of PNG over JPG?

As far asI know:

Jpg is a destructive 32 bits (over 16 millions coloers) compression format.
Each time you modify/save a jpg image, you lose informations, thus resolution.
Jpg can't do any transparency, nor be animated.

Gif is a 8bit (256 colors) non compressed format, with support for 1 color as transparency, meaning that a color in your gif can be fully transparent, or fully opaque, but not 50% transparent.
GIF can be "animated" by concatening several images in 1 file, and specifying an interval between each "frames"

PNG is a loseless 32 bits compression format, with full support for an alpha channel, meaning it can vary transparency from 0 to 100%.
PNG cannot be animated.

I have used this script.

The JS: save as pngfix.js

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }

}

The if statement:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

I guess the only reason I would use PNG is if I needed to use a drop shadow to outer glow on an image. Otherwise, just use Gif

I mostly use GIF or JPG, but PNG on occasion. Sometimes an 8-bit PNG will compress better than a GIF with the same number of colors.

It is best to know the in's and out's of each and use them where appropriate. As IE7 gains popularity, I anticipate using the PNG alpha transparency feature more, but for now I avoid the hacks if at at all possible.

i use almost all images styles, ico.tif.gif.jpg.jpeg.png, depends what u need,
but keep the site size lower, so u dont need to stay 15min until the page will be 100% charged.