Jump to content

Image extension choice


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by SpikeTheLobster
Link to comment
Share on other sites

As always its always about context.




(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".




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.




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.

Link to comment
Share on other sites

  • 7 months later...

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...