Png

There are two main image formats used in websites – .jpg and .png. What’s the difference?

• jpg:
  • high compression ratio (file size versus image height & width)
  • photos should ALMOST ALWAYS be included in webpages using jpg format
  • can be saved in different quality levels (high, good, medium, poor, etc.) The lower the quality level, the lower the file size. For websites, medium and low quality levels will almost always handle the job well. (High quality levels are mainly used for print publishing, or sending/generating raw images).
• png:
  • use whenever you need transparency or semi-transparency in an image (eg., if you have an image using a drop shadow, or want to display a logo against a non-white background)
  • much higher ratio of file size to image height/width
  • tends to scale smoother to different screen sizes than jpg

Often, websites have jpg images that aren’t compressed enough, or – even worse – use png formats for photos that bloat image file sizes. Why does this matter? It increases the time it takes for a page and its images to load – sometimes badly. It’s like adding a brick to each bag of groceries – doesn’t add anything of value, and generates needless aggravation.