Image extension choice

[Jessi]

So from what I understand, jpeg is for photographers, .gif is for low color images, and png is preferred for most everything else. So unless it's a photography site (or one that is very reliant on the photography), most of us should be saving images as .png, correct? Is there much else to take into account for if you're trying to optimize page load without sacrificing too much?

[Nathan]

I don't save in .png format for the web. Almost always .png is 2-3 times the size compared to a .jpg.

[Jessi]

And I was just reading the opposite:

 

"The formatting of images is a heated topic, and it seems to be because everyone believes a different format will increase speed, but there is a pretty prevalent school of thought on this, and we can always use this as a de-facto standard. JPEG’s are for photographs, GIF’s are for low color images/flat color images, and PNG’s are for everything else. Most web designers and developers that I know of prefer to use PNG’s for just about everything, unless they have a button perhaps that has one or two colors, whereby they find GIF’s to work great.

Now, of course you can play with those specifications but always remember that these are standards for what will save smaller and lighter vs bigger and heavier."

 

I almost always save as jpg, but was looking at switching if that's the better route, hmm.

[Nathan]

Huh, strange.

 

Is the source pretty credible you think?

 

I'm doing some searching now.

[Jessi]

Oops, the link didn't get put in there!

 

Source: http://www.webdesignerdepot.com/2012/05/how-to-speed-up-your-website/

 

The site itself is usually really reliable, although I'm not too familiar with this specific writer....hence asking for second opinions here. Nobody in the comments seems to have disagreed yet, so... hmm...

[crumblepie]

I have the least problems with the .png extension so whether it takes more space or not, it's my preferred extension.

My least preferred, on the other hand, is .gif. I've had so much trouble trying to convert it to other extensions without color loss - it's not worth the time nor the headache. I think people will start using that extension less and less. PNG is the way to go!

[Fallace]

I always use .png for the sake of quality. But in a practical sense (especially for actual usage on the web), it's best to stick with .jpg for the sake of faster load times.

[tosaytheleast]

I also use png because of the quality that it can produce. I think it is the best extension that can support transparent background and will still have very fine edges of the image which is not the case for gif and jpg.

[KevinN]

I'm all for .png. Great quality and allows transparent background.

[JackClarke]

Not true at all. If you're using sprites you should be using GIFs or PNGs depending on the quality of your images. You can't really use GIFs on dark websites (if you're using transparency) and PNGs are necessary for higher quality images with transparency. However you want to ensure the quickest site loading speed.

 

This means sprites can be a good idea. JPEGs can be significantly smaller files. If you have a really big background image then you're better off using a smaller JPEG as it will take less time to load than a PNG. GIFs aren't really great for anything much anymore because PNGs fulfil the role GIFs used to have with transparency. You can still use them if you only have a few small images/sprite(s) which are to be used on white because the file size will be smaller.

[jadenmabon]

My personal choice was always .png extensions on almost all websites that I have edited and helped in building. Like you said .png is for everything else. .png formats works best without a lot of sacrifice on the quality of the image that I am putting on. But generally if i am attaching photos I would use a .jpg format.

[tetutato]

I use png because of its support for transparency and although alot of other extensions do support that, png just sounds nicer

[SpikeTheLobster]

GIF is one of the smallest formats simply because it limits the colours to 16 or 256. It's the only one you can animate as well. I use those for very small stuff - icons and the like. Very occasionally, I'll have an image that uses very few colours and looks fine as a GIF, which can mean a massive size saving (like 80% or more).

 

JPG can be very small or very large, depending on the compression you use. It's a bit like MP3 for music: you can leave it at 100% and have massive, beautiful images or crank up the compression and get shoddier images that take up less space. It's a "lossy" compression that takes advantage of the limitations of the human eye to save space in the graphics file when you raise the compression ratio. I use JPG for anything that isn't a logo, header or whatever - photos, general images, blog images, etc.

 

PNG is really nice for the transparency option (which you can also get in GIFs, by the way) and it's not too big for stuff like logos and so on. I use it for headers, logos and especially watermarks (because of the transparency). It was actually invented as an alternative to GIF because Compuserve decided to enforce their patent on the latter format - which meant commercial web sites that used GIFs would have to cough up royalties. A gang of folks built the PNG format to use similar compression on a free license.

Edited May 28, 2012 by SpikeTheLobster

[__Darknite]

As always its always about context.

 

JPEG:

 

(Joint Picture Expert Group).

 

This is a lossy format, meaning data is actually thrown away, based on the way humans perceive images. Allows a lot of image data to be removed without it being noticeable. Other compression techniques are combined to reduce the overall file size.

 

Best used for natural "photos".

 

PNG:

 

Portable Network Graphics

 

This is a loss-less format. Meaning some compression is used however no data is thrown away. It is best used for computer generated images, screen shots of GUI for example. Web icons etc.

 

GIF

 

Graphics Interchange Format?

 

I think this pre-dates PNG, this is good for very small lightweight icons, and animated frames. Examples would include pre-loaders etc.

 

 

So it really depends on the nature of the image/icon.

 

Sorry for any inaccuracies, I'm writing it off the top of my head. corrections welcome.

[dagscot]

There are a few better choices than jpeg now but, similar to mp3's, jpeg is so universal, that it's unlikely to be replaced anytime soon. Oh, and I've read on many forums that png is superior to gif, having better transparency support and compression but again, gif is so common online that png tends to be used more by web professionals. 

[KMRock]

I'm a big fan of .png. I use it for all of my online images where possible!