JPEG or PNG?
When the internet was in its infancy and dial-up was the only means to connect to the world-wide-web, the amount of data that your browser needed to download mattered a lot.
Let me illustrate.
Back then, the typical dial-up connection could handle around 40 kilobits per second (kbps) compared to today's standard connection of 40,000 kbps. At today's speeds, to download a 5-megabyte picture would take you probably 1 second - shorter than a zip from your morning coffee. However, 20 years ago, in the dial-up era, you would have waited about 16 minutes!
Confronted with the challenge to reduce the amount of data flowing through the wires, engineers formed the Joint Photographic Experts Group - in short JPEG. In 1992, they issued a new standard to compress images. At the highest compression level, you could shrink a 5-megabyte picture to 35 kilobytes, reducing the time from 16 minutes to 7 seconds. No wonder jpeg-files became the most common format for photos on the web.
However, jpeg-compressed photos suffer from one critical issue: artifacts mainly around sharp edges between contrasting colors.
Enter PNG
Here is where the Portable Network Graphics format, in short PNG (pronounced: PEE-en-JEE or PING), comes in.
First published in 1998, PNG-compressed pictures show crisper edges than comparable JPEGs.
They have another significant advantage: their background can be transparent, which makes them an ideal choice for logos and illustrations.
However, files compressed with the PNG-standard tend to be larger than similar JPEGs. Well, there is always a disadvantage somewhere.
Luckily, today, we do not have to worry too much about bandwidth anymore.
Which Format You Choose Depends on How You Intend to Use the Image
For logos and illustrations on websites, I usually recommend PNG-files because they produce sharper edges and can have a transparent background.
For photos, you can use the JPEG-format. However, choose at least a high-quality setting to avoid too much image degradation, especially when you want to post these stunning browser window filling images on your site.
