PNG Vs. JPG - When to use each?
.png and .jpg are the two of the most popular formats for graphics on the web. Knowing when to use each can dramatically improve your page's load-time and can mean the difference between an amateur and professional finish.
Quality Vs. Compression
The crux of this argument is really quality vs. compression. As png is a lossless compression format, it compresses images without losing quality. Image quality can often make a big difference in how professional your website looks, especially when it comes to photographs and your logo.
In my opinion, photographs and other important graphics on your page should be png format or, if you must use jpg, in a high compression format.
Although png offers higher quality, the trade-off is that the file-sizes are much larger (sometimes 3 or 4 times larger). This will obviously have a negative effect on page load times. The longer your visitors have to wait on your web pages to load, the more likely it is that they will leave your site.
With this in mind, jpg is the more logical solution for graphics which don't need to be super-high quality. Things like thumbnails, background images, user-avatars, button images etc. can all be served up as jpg without damaging the overall appearance of your website and can reduce the time your pages take to load.
If quality is a must, there are other things we can do to improve page load speed without scrimping on image quality. Here are a few suggestions:
Utility graphics such as buttons and page elements can be grouped together in one image called a sprite. See SpriteMe for more information.
Resize images so they are exactly the same height and width as they appear on the page. Resizing an image to be smaller using HTML or CSS is a waste of bandwidth.
Trim any unnecessary white space/background content out of your images so only what's required is kept.
Consider using CSS and HTML5 canvases to replace images (but create the same effect) where appropriate.
Use ImageMagick to resize images and change the format when required.
In conclusion, png offers higher quality than jpg but this results in higher file size and longer load times. In instances where quality, is essential, use png. Otherwise, jpg is better!
In any case, always look for alternatives to using large graphic files wherever possible.