webdesign - jpg or png, which one is the best for web

I've been a web developer for quite some time, and I am used to transforming all my designs into the png file format in order to build my webpages. Despite the fact that png, contrary to jpg, allows transparency in the images, is it a better solution?

The question regards page loading time and best webdesign practices, as well as file size versus quality of the images.

What do you think is the best solution to use?

It depends.

PNG is better for crisp images with a low number of colours,

JPG is better for a low-bandwidth image - however it is not as crisp and therefore not very good for GUI.

Generally, JPG is for photos and pictures, whereas PNG (or GIF) is for layout.

You may find this page interesting, as it goes over the basics of PNG vs GIF.

Google has written about it very well. From Selecting the right image format, you can find a flow-chart to make the decision:

Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more [ducks!]; It's really far more useful to think about what you are trying to achieve with the resources you have at your end: For example is bandwidth limited? Then tending towards heavier compression is a no-brainer. Is the graphic content of the site going to expand, ensuring that the cost of server space will increase over time? Then tending towards heavier compression will delay that cost. Is it an art portfolio site? Then -- aha! -- compression artefacts in the sampler work may actually be desirable! Are you trying to flog a game? Then the screenshots should probably be ultra-crisp.

Generally, then, I would repeat what has been said, although perhaps in slightly different language: For site furnishings, which tend to be computer-generated and will be cached for re-use between pages, tend towards png; For site content, which will often be page-specific and likely large and complex enough to mask lossy compression, tend towards jpg.

With specific reference to switching to png where you decide it is appropriate, run everything through PNGCrush as a matter of course -- otherwise they won't get displayed with the colours you expect in every browser and the overall quality of your design will be diminished.

"Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more "

According to the website SEO optimisation, Google rank your website worse if page load time is above 2 seconds, so compression is necessary, especially on new website designs heavy on graphics.

jpg is usually preferred for photographic images that have a lot of subtly different colors. png works well with computer generated graphics.

That's my rule of thumb.

I am a starter and mostly what I do is if the image is too big I make small unless it's a background image. And if it is for layout I choose PNG and JPG for pictures.