I'm not sure if this question should be here or in the Beginners part.

Which format should be used for what?? Should graphics always be gif files, or jpgs? Photographs - jpgs? When should you use pngs? Lastly, aren't there some browser issues when using pngs?

Are there advantages to using one format over the other?

Is there a programme that can compress images without really messing up the resolution?

Thanks in advance.

Hmm..

Photo's: JPG. Play with the qualitly-level a little to make the best balance between quality and file size
Design/vectors: PNG. if there's not too many colors in the image a PNG can get really small, without losing quality. It also supports transparency, except for when you're using IE6 or lower. There is a hack for that, which works excellent.
Animated banners: GIF. This is pretty much the only time I'd use GIF, beacause it only supports 256 colors..

Thank you!

I'll play around with the photographs in PSD to see how that works. Great!

The logos on the website are basically 2 colours. So a png should be an acceptable format, so that should help too.

This post has been edited by Popje: May 1 2008, 11:36 AM

Only when dealing with transparent PNG. To fix that problem with use JS to hack it

PNG in Windows IE: How To Use
IE PNG Fix

Thank you!

There is a way to produce portable network graphics (png’s) so that they render correctly across all browsers without the need to employ complicated hacks and ie filter-based solutions or heavy javascript files, such as the twin helix approach or the supersleight.

Most times when a png is exported it is done so as a png32, which provides lossless compression and allows for more complex settings. All the goodies we love when designing a site.

However, within Fireworks you can also export png’s as a png8, which provides a palette based colour model (like gif’s) and which many believe only offers a 1 bit transparency option. However, if we play with some of the settings we are able to offer similar semi-transparency colors as a png32.

So if you use the export wizard and set it to export as png8 with indexed transparency, you will see the palette colours have been flattened and you are offered one, single transparent colour.

However, if you change these settings to alpha transparency, you will notice a few small “chunks” cut out of the some of the palette colours. These are the new semi-transparent colours.

The only downside is that complicated fade effects on images are not seen on IE5.5 & 6, but it still is a transparent image.

This works for IE5.5 and above (I haven’t tested lower than that), FF, Safari and Opera, so it’s a winner all round.

Also, the generated image files are smaller, which will increase delivery time, and , more importantly, there is no need to implement hacks, javascript files or any other third party coding, making the total delivery package smaller and therefore increasing the speed of your site.

Hope the above helps you all.

This post has been edited by welshstew: May 2 2008, 08:45 AM

Hmmm ... I'll have to try the PNG8 thing again but I'm pretty sure last time I did it didn't work.

Hey guys,

Some more info to pass on...

Because of the underlying algorithm of GIF's they render faster when they are solid colors or patterns, so anytime you have a picture or something with complex or random pixels you should save as a JPG.

The more blur you add to a JPG when saving, the faster it will render. (obviously quality vs load time here)

I've pretty much given up on PNGs for the web as they're heavy and you have to write hacks for transparent pngs. (I'll have to give welshstew's post a shot though)

Rich

In what sense are PNGs heavy? Animation aside, they beat GIFs in every respect, including filesize.

Photoshop spits out monstrous PNGs, but these can be cut down to size with PNGcrush.

Nowadays, I only use JPGs and PNGs.

This post has been edited by MikeHopley: May 2 2008, 11:00 AM

Yeah that's probably why! I haven't used PNGCrush yet... I'll give it a go.

Rich

I always use .jpg's unless I need a transparent background.
I mostly rely on .gif since my graphic program allows web images to be saved in high quality.
I can usually get by with a high quality .gif.

I use PNG8 for most of my images as they are a tad smaller than GIF's, and I haven't noticed a color difference with them between browsers like there are with PNG24. Just a note, saving text in the JPG format will look really bad unless you save it in high quality. It's best to deal with GIF or PNG when dealing with special fonts the web doesn't support.

i havn't read all the posts so sorry if i repeat what has been said.

jpg . i use these when i have a big file like a banner or header that has quite alot of colours in. basicly couse u can just fiddle with the quality and smothing the get the file size down without loosing to much quality.

gif. if you have a small image like a background with a shodow or something this is what i would use basicly couse if its only plain you cant relaly notice the quality that much and gifs are normaly realy small files so they load quite fast, also for animation bt if your gona animate things i normaly use flash. basicly couse i find it easyer and the quality is a hella lot better. oh and for anything transparent this is what id use.

png . i hardly ever use pngs basicly couse i just forget about them lol but they are good for files with hardly any colours like gifs and they also have small file sizes ( normaly ) but id use them for somthing like a gradient nav background or something.

also for photos use jpg's

man i realy should have looked at the date.. sorry peeps :\

There is nothing wrong with bumping a topic if you have something constructive to add.

I don't think any format is the 'best'. What you need to look at is which format preserves image quality while giving you a small image size. I usually use a combination of jpegs and PNG8 images. My choice of format is decided by which image format gives me the smallest time while looking crisp.

If I don't need an image to be web ready I output my images in PNG24 format.

IF you want to do text though in a special font in a few different places, it might be worth checking out sIFR . You basically upload your font, tell sIFR which things you want to be in the font and this lovely little script will convert those items (via flash) into nicely fonted selectable text. Hard to believe, but true.

If using jQuery as well the Sifr plugin makes doing this very simple and quite a treat

Personally, I stay away from GIF because of the potential landing of a royalty payout...



I stick away from food that leaves a disgusting after taste. A big bill years and years later to me is disgusting and hiked up the price of a lot of our software ladies and gents. Every program that wants to save in GIF are actually paying a hefty fee which results in bigger shelf dollar.

So for small things on the web, I suggest PNG at 8bit. Transparent images? PNG at 24bit. And hey, people hit your site with an old browser that doesn't support this transparent format, leave them a nice bold message which says "Dude, you're surfing the web on an arcaic dinosaur of a browser... Dinosaurs are like, extinct man... Its all mammals these days. Getfirefox or go on safari with tiger or leopard and see the webiverse in its full glory.

In php, I do that with something like


For us something like 20% of internet explorer users who see this message end up getting firefox. The uptake is incredibly successful despite suggestions this is an annoying practice. Sorry, I push for new paradigms not sit around and wait for Bill Gates and the people at Unisys to set me free from the prison. I mention Billy because Microsoft run a similar jig... they are aware that 90% of computer users in China run bootlegged Microsoft Windows and have yet to take any action what so ever to charge. Yet for the last 10 years have been working out a way to systematically identify and seek money from ALL their users for their software.

Animated GIFS is so 90's. Can't say I'm a fan.

Kick gifs in the bin. Jpeg and PNGS is where its at. Use portable network graphics and save yourself a possible portable headwork hazzard. plug plug.

This post has been edited by cosmicbdog: Jul 10 2008, 05:56 PM