Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
There are plenty of instances where a GIF or a JPEG would do just fine... and no one is getting rid of JPEGS anytime soon, for a multitude of reasons.
To answer the question you may or may not have even asked, people use GIF or JPEG formats instead of PNG because:
A)they don't know what a PNG is
B)they don't have, or don't know that they have software that can create PNGs
C) they don't need the transparency benefits
D)they worry about browser support. In the case of D, it is quickly becoming a non-issue, but the problem still remains, in the same way that there are only a handful of "safe" fonts to use on a webpage. You COULD use PNGs, and you COULD use "Univers" font-family in a webpage... but there will be PCs out there that still aren't on board. In the case of a GIF however, every PC that can access the internet was built with the ability to view GIF files, so it's one less thing to worry about when making your site accessible.
E) Refusal to use PNG until it is 100% supported in IE (which is pretty shooting yourself in the foot).
To say the lease, PNG is a nearly complete replacement of GIF except when it comes to animation, which PNG can't do. And PNG usually does those things efficiently. PNG was not intended to replace JPEG, which is more efficient in storing photorealistic images.
About a year ago I used a great little utility, pngout, to convert all the GIFs on my site to PNGs. I was close to putting them live when my wife mentioned that twice recently, once at home and once at work, she'd been unable to view PNGs in IE6. Sure enough, if you google for, say, "Internet Explorer doesn't display PNG images", this is a well documented problem.
I don't need alpha transparency, but I do need visitors to be able to see the images on my site. So GIFs it is.
Actually they've been working on animated Portable Network Graphics for a while now... I think it might be called MPNG? Don't remember. But the point is that PNGs could indeed render GIFs totally obsolete if they only the support was there.
PNGs could indeed render GIFs totally obsolete if they only the support was there
Ahh, and there in lies the problem... If only there was support for CSS3 too ;)
One thing worth mentioning - png maintains vector, layer and fonts data. Something a raster img like jpg of gif cannot. While I do not use png's for the graphics themselves (for the support reasons above) I found the to have certain offline advantages - particularly as source files using fireworks.
Creating a site for a client with png's is like biz suicide...
When the client views it at a friends house to show them their shiny new $10,000 web site and the graphics don't load because the friend has a 5 year old computer running an old browser.
Love those phone calls.
png's are fine for non-commercial sites or perhaps your own site where you have nobody to answer to but yourself.
I use PNG as much as I can get away with, primarily because it can be a transparent image with real shading. I've forgotten how its done at the c-code level in creating a PNG image, but PNG can be transparent and STILL contain dropped shadows or other shadings that transparent GIFs just cannot do.
Create a transparent PSD in Photoshop, add all the shading and dropped shadows. Then save-it-for-web as a PNG-8 or even better PNG-24. Save a GIF version for the web, and you'll instantly see what crap it looks like compared to your PNG. This means you can place a PNG on top of a colored background--a background that can be changed, without having to change the PNG.
You can get quite creative with layering ala z-index levels, and CSS, and start to creat images that can be placed in pieces with div tags instead of the old method of being forced to create images that can't be transparent or shaded. You can create little 1x1 PNG images that are a percentage of 100% opacity for great looking background colors and shades.
There is however one one small problem with transparent PNG...IE.
<!--[if gte IE 5.5000]>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
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 + ";"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
Just place this piece of code at the beginning of your page, right after the HEAD section and voila, it fixes the problem. The only problem with it is that it is visible if your page loads slowly, and you're using the retarded IE browser. Other browsers such as Opera ( which is now FREE ) and FireFox ignore the script completely and your even-more-cool web page now has a way-cool image with all the stunning visual appeal you wanted in the first place. You'll see how crappy GIF is once you get with the PNG way. You can still use JPG when you don't need the transparency. Between JPG and PNG your web pages should be looking sharp!