What is best to use for website images ? JPG or PNG

Asked By Gerry F 150 points N/A Posted on - 04/30/2011

I am bemused on what is the best file format to use for images when using graphics.

I see a lot of sites now using PNG over JPG. When I check the file sizes, the PNG is slightly larger in size than a JPG.

What does the added value that gives over JPG for website images?

• Status: Open
• Question Views: 1458
• Answer Count: 8
• Vote Up 15 Vote Down

• Answer Accepted: Yes
• Question Category: Web Graphics

Best Answer by iRandom

Go To Solution

Answered By iRandom 0 points N/A #89671

What is best to use for website images ? JPG or PNG

JPG is the oldest and most widely used technology to compress images. JPG or JPEG stands for Joint Photographic Experts Group.  The compression technology used here is sometimes referred to "lossy" image saving technique.

You might have noticed that, when you save a raw image as a JPG, grainy edges are formed around sharp edges.  This is because JPG uses aliasing techniques to give the impression of a curved edges while compressing the image. Further more you will also notice a reduction in the color palette and might have seen "patches" of colors if you have a smooth pattern.

When you take PNG (Portable Network Graphics) , it tries to maintain the sharp edges while compressing. The PNG format does not introduce "grains" in the image. This is termed as a "loss less" image saving technique.

 Therefore for web based graphics it is better to use PNG rather than JPG if you require sharp images.

About iRandom

Questions
1

Answers
22

Best Answers
5

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By Gerry F 150 points N/A #89673

What is best to use for website images ? JPG or PNG

I still don not buy that PNG is better. Don't you think that size is the key thing here?

In order to make a page load fast, is it not important to keep the size of images smaller?

I agree that JPG introduces grain to the image, but it is not that apparent. Why then do digital cameras store the files in JPG format ?

About Gerry F

Questions
1

Answers
3

Best Answers
0

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Best Answer

Best Answer

Answered By iRandom 0 points N/A #89675

What is best to use for website images ? JPG or PNG

Another fact that i missed to explain is that PNG supports transparency effects. i.e. you can have a transparent backdrop in a PNG. Therefore it is actually a very good replacement over GIF.

The GIF format (Graphics Interchange Format) produces the smallest file possible while retaining a transparent layer. The drawback of GIF is that it down samples the images to a 8 bit color map. This means GIF can hold only Up to 256 colors. Therefore there is a drastic reduction in color in the final image. GIF is also uses a loss less compression technique.

So in reality PNG is a very good replacement over GIF. PNG supports 24 bit color with transparency.

JPG does not support transparency effects. GIF supports transparency effects. PNG combines both and gives the best of both worlds!

Therefore new web graphics uses PNG instead of GIF wherever there is a need for a transparent backdrop. Since it supports more colors and it is a loss less format, web graphics are more akin to use PNG over JPG.

 

About iRandom

Questions
1

Answers
22

Best Answers
5

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By Gerry F 150 points N/A #89676

What is best to use for website images ? JPG or PNG

Thank you for the explanation.

Now I understand that PNG is an actual replacement for GIF.

You still did not answer my question on why the latest digital cameras are not using PNG to store its images.

About Gerry F

Questions
1

Answers
3

Best Answers
0

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By iRandom 0 points N/A #89677

What is best to use for website images ? JPG or PNG

I am really not sure why new digital cameras do not support PNG to save images instead of JPGs!

My honest opinion is that they should, given the development of technology.

I am sorry i cant help you there!

About iRandom

Questions
1

Answers
22

Best Answers
5

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By TechnoHat 0 points N/A #89678

What is best to use for website images ? JPG or PNG

Well i would say the main reason that digital cameras do not support PNG is that the photographs we take do not require a transparent backdrop.

You see, in order for the PNG to have a transparency effect, you need to tell the PNG engine what color to take as the transparent area. This has to be done by the human as the camera does not have AI technology as yet.

Further it will make photography a burden if you have to keep telling the camera the color to use for transparency at each shot.

Hence for digital cameras, JPG makes sense!

About TechnoHat

Questions
0

Answers
26

Best Answers
5

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By Gerry F 150 points N/A #89679

What is best to use for website images ? JPG or PNG

TehcnoHat, that is a close explanation that i can accept. The argument is valid and the reasoning very logical

Thank you both for clarifying my doubts!

About Gerry F

Questions
1

Answers
3

Best Answers
0

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics

Answered By iRandom 0 points N/A #89680

What is best to use for website images ? JPG or PNG

Now I know why digital cameras opt for JPG instead of PNG. Thank you TechnoHat for your inner-sight!

As they say "Hats off" !

About iRandom

Questions
1

Answers
22

Best Answers
5

• Vote Up 0 Vote Down

• Posted on - 04/30/2011
• Question Category: Web Graphics