...

View Full Version : PNG instead of GIF?



htcilt
02-23-2010, 09:12 AM
Just out of interest, should new websites use GIFs or PNGs?
I know some very old browsers dont support them...

What are your thoughts?

mlseim
02-23-2010, 01:31 PM
I like PNG's simply because they support more colors than GIF.
You're right about IE5,6 (and 7?) ... PNG support is bad.

VIPStephan
02-23-2010, 01:34 PM
PNG support is perfect in all major and many minor browsers. The only thing that’s not supported natively is alpha transparency in IE 6 (but there are workarounds). And yes, PNG is supposed to be the preferred format for web graphics.

arindra
02-23-2010, 02:05 PM
Yes - true that the GIFs are more dull. But at the same time PNG images can make a website load slow as these images are larger in size. I would prefer JPG.

VIPStephan
02-23-2010, 03:13 PM
There is no either/or, both formats (JPEG and PNG) serve completely different purposes. Please browse the forum for similar discussions before you spread ill-conceived claims, I don’t wanna repeat myself.

Azzaboi
02-23-2010, 04:14 PM
Use the PNG Fix to handle transparency in older IE browsers...


/*
Correctly handle PNG transparency in Win IE 5.5 & 6.

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
}
}
}

htcilt
02-23-2010, 08:43 PM
Thanks for the replies.
I wont be using PNG's transparency capabilities - just flat images with a white background.
Also, from what I've seen saving from Photoshop/Illustrator, they are a little smaller in filesize than a GIF.

Google also use PNG, so I think I'll go with that ;)

_Aerospace_Eng_
02-24-2010, 07:17 PM
You may need to fix the png gamma issue with IE.
http://f6design.com/journal/2006/12/01/fixing-png-gamma/

Mochentes
02-25-2010, 09:41 PM
As for the file size, you cannot say that any image will weight less when saved as JPG than PNG.

PNG can be much more efficient when the image is simple and with a small color palette. PNG is pretty much lossless, while JPG isn't. In PNG you can set BPP (bits per color) - JPG is restricted to 24BPP (or 8BPP for grayscale).

On my website I use GIF's only for animated images, JPG's for detail- and color-rich images, and PNG's for everything else (like layout elements).

SSCR9
03-02-2010, 08:00 AM
PNGs are fantastic. I use them alot. One could argue I use them too much, but still, I'll advocate for PNGs for as long as possible, until most major browsers start providing full support for TGAs. hehe.. just imagine completely lossless images filling up the web.. That would be fun.

Apostropartheid
03-02-2010, 05:37 PM
PNGs are lossless, though?

masterofollies
03-02-2010, 06:11 PM
I use GIF as much as possible, way way faster to load by being a smaller file, and they are good at being transparent. PNG are huge files.

Apostropartheid
03-02-2010, 06:15 PM
If your PNGs are huge, you're doing it wrong. You may want to look into PNG-8--these have similar constraints as GIFs, except allow alpha transparency AND have a lower file size.

Azzaboi
03-02-2010, 06:47 PM
PNG high in colours and using semi-transparent can be huge in size. PNG-8 seems quite good to use too to keep down this size.

I also found PNGOut compression software quite good to use to crutch the PNG format even more without losing any quality. It's best to save in a few formats like JPG, GIF as well as PNG and compress, picking the best quality / smaller file size.

masterofollies
03-02-2010, 08:39 PM
When I save a PNG it comes out huge. Like I will save a banner as GIF and it comes to 84kb but when I save as PNG it's 155kb

Apostropartheid
03-02-2010, 09:12 PM
What software are you using to create these images?

masterofollies
03-03-2010, 12:04 AM
Usually Compact Draw 1.0

If not then I use Corel Paintshop Pro Photo XI

Azzaboi
03-03-2010, 12:27 AM
For the Corel Paintshop Pro Photo X2,
use the Save As > Options... > Run Optimizer

Also note that all Corel software is labeled spyware in my eyes, I highly recommend anyone using this product to remove the protexis-licensing 'PSIService.exe' from your services (at least when you uninstall this software) as it's a major computer slow down and doesn't do anything when registered.

Uninstalling XI or X2 will not uninstall 'PSIService.exe', but removing that service Corel Paint Shop Pro Photo may cease functioning. There is a hack for it if you really want to look into this: http://www.mydigitallife.info/2009/07/19/how-to-disable-and-uninstall-protexis-licensing-service-psiservice-exe/

Seriously if my computer is a second slower than normal, I notice and get annoyed with it (should be click / done, no waiting) :P
After installing Corel Paintshop Pro Photo X2 I was horrified, affected all over performance.

fredmil1
03-03-2010, 07:56 PM
definitely use png's. I've never had a problem with them.

Fumigator
03-03-2010, 09:19 PM
For the Corel Paintshop Pro Photo X2,
use the Save As > Options... > Run Optimizer

Also note that all Corel software is labeled spyware in my eyes, I highly recommend anyone using this product to remove the protexis-licensing 'PSIService.exe' from your services (at least when you uninstall this software) as it's a major computer slow down and doesn't do anything when registered.

Uninstalling XI or X2 will not uninstall 'PSIService.exe', but removing that service Corel Paint Shop Pro Photo may cease functioning. There is a hack for it if you really want to look into this: http://www.mydigitallife.info/2009/07/19/how-to-disable-and-uninstall-protexis-licensing-service-psiservice-exe/

Seriously if my computer is a second slower than normal, I notice and get annoyed with it (should be click / done, no waiting) :P
After installing Corel Paintshop Pro Photo X2 I was horrified, affected all over performance.

Oh my... I've heard similar stories and that's why I'd stayed with PSP X. I've seen other people who stopped at PSP8 or even 7 due to new bugs and general instability. It's sad when a great piece of software gets sold off to some other publisher and then destroyed.

Azzaboi
03-03-2010, 11:49 PM
The think is it works fine and I still use it. If you have registered your Corel Paintshop Pro Photo, just carefully follow the hack above to remove that service and still have it running without an issue. It's 100% not needed after you have registered and can be cut out.

But to not inform about installing a service which pretty much just slows your boot up and system to fone home... that's just evil.

SSCR9
03-06-2010, 06:52 AM
When I save a PNG it comes out huge. Like I will save a banner as GIF and it comes to 84kb but when I save as PNG it's 155kb

Does 71KB really make a huge difference?
I have standard broadband connection to the internet, and I can load at over 600KB/second, so with file sizes that small, who really cares any more?

Apostropartheid
03-06-2010, 09:27 PM
Does 71KB really make a huge difference?
I have standard broadband connection to the internet, and I can load at over 600KB/second, so with file sizes that small, who really cares any more?

Well la-de-dah. But the Internet is global. Not everybody has a 600kbps connection.

Azzaboi
03-07-2010, 09:52 PM
I have a bandwidth cap which takes me down to dialup speed if I go over it. So I would be really annoyed with any site like that. It's also shared net. The filesize should be less than 20kb for good streaming over 56k modems (some people still use them).

I guess the same can be said for developing your website for multiple browser support, no one uses IE6 anymore, less just rule it out! (screw the major companies that can't be bothered updating) :P

You will just lose customers with a slow website! Most the time, you can quarter the filesize of a image (if not more) without any quality loss.

oracleguy
03-08-2010, 07:00 PM
Does 71KB really make a huge difference?
I have standard broadband connection to the internet, and I can load at over 600KB/second, so with file sizes that small, who really cares any more?

In addition to Apostropartheid's reason, there is another reason: your own bandwidth. Unnecessarily large images increase page load times and reduce the number of simultaneous visitors you can have.

Plus if you have 100,000 visitors a month, that is nearly an extra 7GB of data transfer for that one image alone that was wasted. Take that to 10 million visitors and it is 677GB.

scripts99
03-15-2010, 08:18 AM
PNG - good result in all browser and big size of image file

GIF - dull result but very small size of image file

Apostropartheid
03-16-2010, 12:31 AM
PNG - good result in all browser and big size of image file

GIF - dull result but very small size of image file

Read the contributions to the thread: PNGs are almost always smaller than GIFs if optimized correctly.

bancs
03-28-2010, 10:07 AM
I use PNG & JPG

code beginner
04-03-2010, 02:23 AM
typically, you use gifs for backgrounds and buttons,and png's for actual pictures.

if somebody has a browser that can't view a png, *they* are the ones who need to adjust... to perhaps, let's say, this century.

broward
04-05-2010, 07:26 PM
I like to use JPG images rather than PNG Images. PNG images take lot of time to load. More over if your site is a image based site I would recommend to go for jpg image format.

Apostropartheid
04-05-2010, 11:32 PM
*bangs head on desk* It's like nobody even bothers to read the thread!

VIPStephan
04-06-2010, 01:33 PM
That broward guy is a spammer (oracleguy has already removed the spam link). Hes most likely not at all interested in giving an honest and thought out reply.

It is interesting, however, that certain threads seem to draw certain suspicious people like turd draws flies.

bermuda
04-06-2010, 10:52 PM
PNG graphics can be really great, especially when it comes to handling the transparent areas of the items and no wonder they can be great for making icons for the websites or some logo images. GIF items have always been broadly used for a variety of projects.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum