PNG, JPG, or GIF images?

I don't think it will scale as simple as that.

 

i'm using PNG if want to make transparent background,
if not, i'll still using jpg format

 

I just use whatever gives best quality/size trade off. I use GIF's a bit where I need transparency. Generally I use JPEG though. I have been meaning to try PNG's but havent really gotten around to it.

I still use PaintShop Pro 5.0 and it wont save any alpha channel. So, I honestly don't even know if transparency works on webpages with PNG files.

 

There's a lot of theories on what image types you should use for what purpose.
I use JPG mainly if I want my pictures printed out.
PNG for website images and I rarely use GIF because of the bad quality. GIF is outdated, animations should be done in Flash .

 

I prefer JPEG for over any other format, it's like what you see is what you get with JPEG, so most of my images are JPEG on my website.

 

I usually avoid Flash where possible as it doesn't SEO well. I am not aware if there is any equivalent to 'alt' tags for flash content.

 

I use PNG for Template Layout for good quality
Gif for the buttons
and JPG for the content graphics.

 

I use gifs for simple images that aren't too detailed, i.e. images with large areas of the same colour.

jpgs for images with more detail such as photos.

png for images that contain detail aswell as large areas of the same colour or if an image requires transparency

 

Ah, so you can use transparency for HTML using PNG's.

Might be time for me to upgrade from PaintShop Pro 5.0

 

and

BULLCOOKIES, they aren't if you just don't use alpha transparancy. They can be as small or smaller than .gif when palettized, and palettized transparancy actually WORKS in IE back to IE4. Besides, 99% of alpha transparancy effects can simply be pre-composited with very rare exceptions, so those fat bloated alpha .png aren't neccessary in most cases. Alpha .png is just art ***'s getting lazy or not bothering to understand that while very pretty, their bandwidth chewing bullshit is pretty much ruining any site it ends up on. Of course it doesn't help that people actually seem to think that photoshop actually saves well encoded images, that fat bloated pig's image saves being about as lean as the application itself... There's a reason image optimization programs exist (though even when I'm using photoshop, I use Paint Shop Pro to cut and save my finals because it has one of the best save-time optimizers around)

AS to the OP's question, IE does not apply the same gamma correction to .png that it does everything else (including color and background-color declarations)... All that really means is that if you are using .png just don't try to interact with background-color, colored borders, etc unless you are interacting with pure black or pure white.

The problems can mostly be avoided so long as if you are using .png, you use .png, and if you use other image types use JUST the other image types IF color matching between elements matters - like for borders. Basically so long as you use them in a consistant manner, it's not a problem.

Generally your best bet is to TEST, if it looks OK in IE, don't worry about it.

I use the following rule of thumb:

16 colors or less at less than 32,768 pixels, use a .gif

17 to 256 colors and less than 512K pixels, or transparancy required, use a .png

truecolor required or more than 256K pixels, use a .jpg

Pretty simple rules that can keep filesizes well under control... But again, image formats are YET ANOTHER aspect of web development that many people never even bother thinking of - which is why I can get paid a grand or two to go into most existing websites and cut their bandwidth use in half or more

 

I tend to use JPG. Its one of the best formats ive found so far. I compress my pictures on different programs that do a good job on compressing. But if you feel comfortable using PNG, you should continue working with it. PNG is an interesting format also.

 

Geez, where do you find your clients? So many sites could pay me even $500/hr and still make a huge ROI... tons of them have extremely oversized images that could be compressed a lot. I've offered my services before and been told all sorts of things, from "it would barely make a difference, an image is an image" to "we don't need that service". Even worse, all of them seem to have 100% faith in the original developer and doubt that there could be that much wrong - or even worse still, they did it themselves!

Hmm, spend a few hundred bucks and save thousands on server bills... nah, what a rubbish investment I wonder why so many businesses are going bust nowadays, they're run by such geniuses.

 

I know what you mean by that - many of the biggest businesses out there continue to chew through bandwidth like a five year old with a pez dispenser.

Hell, you done a view source at google lately? The site held up for simplicity and speed... has it's javascript and CSS inlined in their PRESENTATIONAL markup (at which point WHY are they using CSS at all?). They could cut their bandwidth use almost in half by way of simply moving stuff that can be cached to static files, and probably net more reductions through separating presentation from content (though that MAY bone their continuing support for netscape 4 and Lynx)

In most cases convincing a prospect involves listing what's wrong, and explaining it in terms they understand - in my posts you will often see I make a lot of similies, this is because when you are explaining things to the non-technical minded comparing it to something they understand works like a charm... and speak to their wallet.

Though a lot of businesses operate, well, like the average person when it comes to money - they will borrow and take the cheap way out in the here and now, to hell with what it's going to cost tomorrow. Can't afford a sofa? Pay five times what it's worth over the next year at a rental agency. Can't afford that Plasma? Pay three times as much for it on credit. Can't afford a car? Pay twice as much for it over four years on a car loan. Can't afford Home? Pay three times as much for it over the next four decades on a mortgage. Can't afford a military?

People often seem to be trained from birth to make themselves slaves to the bank so they can have something they WANT now, instead of waiting until they can actually afford it. Credit, Loans, Mortgages - and you see it extended into business, government and even simple things like websites. Be a cheapskate about it now, who cares what it's going to cost me later.

Then piss and moan about how much it's costing you to "make the payments." or how mysteriously we're having a recession in an economy where people spend money they haven't even made yet. The phrase from Gerald Ford about how we've gone from "A nation of savers to a nation of debters" rings in my ears constantly now.

 

There's tons of sites I want to be let lose with.

This is a place I was going to work at, and due to external events beyond my control (such as ridiculous rent prices + availability) www.news.com.au.

830kb just the homepage. 28 javascript files (they can be combined for a reason), and according to firebug there are 74 inline scripts. Jqeury... common, jquery is amateur hour. It should be used only by people with no JS knowledge to make life easy, with the cost of bloat. Any site with a decent amount of hits has the budget to afford a real javascript programmer. Again, same thing - why skimp a couple hundred bucks in order to fork out thousands for loading jquery? That makes no sense. There are also no expires, many of the objects could be set (even if just a month in the future because they're updated every now and then). Not to mention, COMPRESS. My god: http://www.news.com.au/js/news/common/home/functionality/0,,,00.js. For a live site, no no no! There is no need to have a bloated unformatted script on the live site, have a local copy that is for sure, but as soon as its on minify it.

CSS can be compressed by around 20% just removing all the white space (excluding line breaks). 1 damn minute to save GB's of bandwidth. We're not even talking hundreds of dollars here, it literally takes 1 minute to run it through a basic compressor and slap it online. Heck, $1 to save $$$ of GB of bandwidth. Why oh why would you not? I simply cannot understand, I really can't.

The images are pretty good, but there is still room for improvement. As soon as the word "optimisation" is mentioned, it's funny basically the only thing that is done is images... compress them, use sprites etc. Many other aspects are basically ignored. http://www.news.com.au/common/imagedata/0,,6602615,00.jpg 9kb for this image, that can easily be halved with little visible change. This one could be 4 times better, if not more: http://www.news.com.au/common/imagedata/1,9211,6569567,00.jpg

It's not like the people working there aren't smart enough, or don't have the ability - it's either lack of caring, or someone up top saying it's a waste of time work on other things instead.

Google sucks, anyone that thinks they're awesome is delusion.

Adsense = bloat.
Analytics = bloat.

Put these 2 simple, "do not much" scripts in your page, and its instantly weighed down. As much as I like analytics statistics with it's pretty graphs and all, from a developer perspective it's frustrating.

I guess "server wasting" is the same as "water wasting" and "electricity wasting". People just couldn't be bothered.

Talking about this makes me want to slap together a site specifically targetted to optimisation. Do one client for free, then use the case report to get more.

They spent $500.
They saved $1000 within a month.

Perhaps that will get the message across - screw how it's done, why it should be done... just plainly give them the figures. It's not an expense, it's an investment that kicks ass ROI wise.

</rant>

 

EXACTLY the type of thing I've been talking about - another good example is one I ripped a new hole a few months ago - the newest incarnation of hotmail. They claim it's faster... I call bullshit. They claim it's better - I point out that it even breaks forward/back functionality AND tabbed browsing making things like the search feature useless.

It's an excellent example of ajax for nothing since they are spending 721k uncompressed / 200k compressed total, 531k of that in javascripts, but 120k(36k compressed) of 'document' spread over 7 files since they went to using FRAMES.

to deliver 3k of page content.

Oh yeah, that ajax loads so much faster and smoother and has such desireable behaviors - NOT. Any programmer with half a brain could make it run faster in a tenth the resources they are currently consuming WITHOUT sacrificing normal browser functionality instead of this useless "Ain't it neat" AJAX bullshit. Nothing wrong with AJAX for ENHANCING a page's functionality or implementing things that cannot be done without it, but they forgot the most important rule of putting scripts or any other 'gee ain't it neat' technology on a page, enhance functionality, do not REPLACE it, and certainly don't reduce functionality through it's use.

Hell, the only thing they do get right is the topic of this thread - Image optimizations... Most of them being (now here's a good laugh) optimized palettized .png

 

Jpg images can be perfectly balanced between quality and size, so I like JPG.

 

I found that png images load very slowly for my blog (in Firefox and IE). So I always make it a point to change them to jpg before using them on my site. Then it loads smooth and fast. Actually this issue perplexes me a little, not sure if its a WP, browser or image problem? Judging by these posts PNG loads fine for most webmasters.

 

You would be using 24bit PNG not 8bit. A PNG will kick ass GIF for anything over ~100 bytes, and JPGs should be used when there are lots of colours (such as photos).

 

I use gif for a small graphic jpg for general images and png when I need transparent image.

 

Always had better results and quality using PNG rather than JPG.