Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

kidlistening   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLACWhen the Internet was small and young, file formats were pretty much limited to image types and media file types that the browsers of the time could handle. At the very beginning, text was almost exclusively meant to be presented on the Internet in HTML format, or provided as a file download via FTP protocol. Pictures were JPG or GIF across the board, and sound files were these strangely embedded WAV files and those pathetic electronic MIDI files.

The world has moved on, and with it, there are now awesome file formats that are available to you, depending on the purpose that you have for those files.

In this article, I’d like to cover the two most popular file types for the three media types – typed documents, photo and image files, and sound or music files. Those are the three most prevalent formats used both online and offline to experience information. It stands to reason that the most common file types for each of those media formats should be ones that are easy to use both on the Internet as well as on devices that aren’t always online – like music players or e-book readers.

By understanding the main differences between these major file types, it’ll help you to decide which one to use when you’re trying to distribute information or media in a way that the largest number of people out there will be able to use. By making your information highly-accessible and usable, you can be sure that whatever you’re trying to distribute will see a larger audience.

Documents, Pictures & Audio

If you think about it, most information today takes three major forms – text, sight or sound.  Whether you’re talking about web pages, movies or any other form of entertainment, information is presented to the audience in one or more of those three major formats.

The web has always been very text-based, but more recently it’s becoming wonderfully visual. Web pages now offer a wonderful morphing of text, visual layouts and video content. You can stream news video or major movies, and podcasts and music downloads are now pretty much ingrained into our daily lives.

So, if you’re a producer of information, how do you know what file format to use? The answer boils down to how you want to distribute or use that file.

PNG vs. JPG

These days, website owners use JPG and PNG files almost interchangeably, and many bloggers on services like WordPress.org or Blogger and are completely oblivious to the effects of large image sizes will actually use those images interchangeably. However, more experienced website owners know that not only will smaller image sizes reduce your overall server memory consumption, but they’ll also increase page load speed, which is a nice SEO boost as well.

This is the major difference between JPG and PNG – file size – but the reasons aren’t obvious until you take a closer look at the images themselves. Below is a beautiful forest-scene in JPG format.

filetypes1   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

This is a very large image over 1000 pixels wide, and featuring vibrant colors and details. JPG (which stands for Joint Photographic Experts Group) has always been an image file type of choice for professional photographers to share there work online because of the fact that the compression of highly-detailed images  involves finding redundancies in those files and compressing the data so that beautiful images like the one above can still be presented with very little quality loss. The file size is  a fraction of the original that may come straight from a digital camera.

However, because of the compression method, JPG formats have some issues with contrasting edges in photos. This is most prevalent with text, signs, etc – but if you zoom in far enough even into a nice, high-quality image like the one above, you can see the quality reduction along those straight edges in the form of a sort of “shadow” along the edge.

filetypes2   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

After a number of multiple saves, you can see the quality of the image reduce even further when you zoom back in. In this case the meshing between edges becomes more pronounced, and you can see near highly-contrasting colors that there’s a greater amount of distortion.

filetypes2b   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

By contrast, take a look at another highly-detailed PNG image of a park with strong contrasting black/white colors. Such an image would do a number to the JPG compression process – not so apparent from a distance, but much more apparent as you zoom in.

filetypes3   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

However, zooming into the PNG image, you can see that there’s no “shadow” effect or any significant distortion of the contrasting edges.

filetypes4   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

PNG stands for Portable Network Graphics, and was originally created as a replacement for the outdated GIF format. The PNG compression algorithm is non-lossy. When you save this PNG file again, the quality of the saved image is identical to the original.

Another huge benefit to PNG image files is that they support image transparency – making them awesome image formats for web design, because you can use a transparent icon or image that blends seamlessly into a website with any sort of background color or image. See the JPG image on the left, and the PNG image on the right over a blue background.

filetypes7   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

So how do you choose which image format to use? Basically, if you want to provide extremely high-quality photographs on a blog post or on a web page, save it once as a JPG file and embed it on your site. Avoid making too many modifications and performing multiple saves as you’ll lose quality.

On the other hand, if you’re creating icons or images with sharp contrasting colors – like images with text for example – then go with PNG. Also, PNG is particularly valuable in web design when you want those nice flowing layouts with transparent images. Just keep in mind that PNG file sizes are typically larger than JPG, so plan accordingly.

DOC Vs. PDF

When it comes to providing documents to people – whether it’s offering a formatted document via a website, or sending documents to people via email such as when you’re applying for a job, the most common file formats of choice are Word Documents or Adobe PDF files.

Here’s what happens if you try to offer a Word Document link in a web page.

filetypes8   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

That’s right, it’s not supported as an embedded type of document – you can’t view it inside of a browser because it’s a proprietary file format. Of course – try saying “you can’t” to a geek, and they’ll find a way to pull it off. You can always take Yaara’s approach and get the document into Google Docs for online viewing.  Where there’s a will, there’s a way.

However, most methods of doing this involves having Microsoft Word in the first place. If you aren’t certain whether your recipient has Microsoft Word, then it might be better to present your information in PDF format, using any number of PDF creation software that’s available out there. When you go to open a PDF file on your computer, you’ll see just how many applications out there are capable of viewing it.

filetypes9   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

There are lots of PDF readers out there, and as Chris points out in his article on PDF readers, if you have Google Chrome then you already have a PDF reader.

filetypes10   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

So, one would think that PDF is always the way to go when you want to distribute documents, right? I mean, you can embed them in web pages, they make idea e-book formats for smaller mobile displays, and they transcend multiple operating systems. What could be better?

Of course, the catch is that they are locked down – they can’t be changed. That’s not very helpful when you are collaborating with someone on a writing project or a research project and you want the sort of tools that you can find in Microsoft Word for editing. So, there’s certainly a place for the Word format in sharing documents, but it comes down to how you want to use that document and why you’re sharing it.

MP3 Vs FLAC

That leaves audio. Maybe you’re thinking of recording yourself playing guitar and you want to share it on your blog, or maybe you are buying music and you have the choice to download a loss-less format like FLAC or a compressed format like MP3. Which do you choose, and why?

This topic is actually well-debated throughout the Internet. Plenty of music fans feel that MP3 files have enough quality as to be indistinguishable from the original recorded sound files. Other folks – usually those within the music recording community – feel that the quality difference is obvious and very noticeable.

To take a closer look at this, I downloaded a free classical song from the Internet that was available in the full, lossless FLAC format. Playing this file in Audacity, it was quite apparent how nice it is to have an audio file in this format.

filetypes11   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

The music was crisp, clear, and remarkable. My first test was to export that original recording as an MP3 file using the default Audacity export settings. Then, opening both files side-by-side, I took a closer look at the sound files.

You can actually see the subtle difference when you do a side-by-side comparison. It isn’t quite as obvious on this snapshot, but if you look close you can see that the graph for the MP3 file (the bottom stereo tracks) are not quite as dark as the top FLAC format. This is most apparent on that first section of the graph where the far edges of the response (shown by the first arrow) are definitely more defined in the FLAC file.

filetypes12   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

I have to be honest that I didn’t notice a substantial difference when listening to the two audio files, but then again my ears are not as well trained as some of the music recording experts out there. I suspect they could hear the difference.

Checking the MP3 export settings in audacity, I saw that my export settings were an MP3 bitrate of 128 kbps.

filetypes13   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

So, I tweaked this up to the maximum allowable – 320 kbps, and then repeated the exercise above.

filetypes14   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

This time, the differences between the FLAC track and the MP3 track were almost indistinguishable from each other. Given, the new MP3 file much larger than the 128 kbps file – 12 mb versus 5 mb, but it was still half the size of the original 24 mb FLAC file.

filetypes15   Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC

So, when do you use one versus the other? If you’re recording music and you want to maintain the highest possible quality, FLAC or any other lossless format is obviously the way to go. This will ensure that you’re capturing every little nuance of the performance. With the capacity of disk drives these days heading into the Terabytes of storage capacity, saving such audio files is really not a huge feat.

However, if you’re a collector of music and you just want to store as much as possible on your little portable player – MP3 is clearly the way to go. Secondly, if you run a podcast and want to ensure that your listeners are not sitting their all day waiting for the Podcast download, the MP3 format is still the audio format of choice.

In nearly every case, whether you’re talking documents, images or sound – the format you opt for almost always depends on where you draw the line between quality versus space or download time. There’s a place for both, but you need to carefully consider how you’re going to use that file, and choose the right file format for the purpose.

Does this help with your own file format dilemmas? Do you have any other file formats you prefer above those mentioned above? Share your own thoughts and insights in the comments section below.

Image Credit: Boy Listening to Music Via Shutterstock

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

23 Comments -

Fred Conover

“…These days, website owners use JPG and PNG files almost interchangeably, and many bloggers on services like WordPress.org or Blogger and are completely oblivious to the effects of large image sizes will actually use those images interchangeably…” <== Desperately needs to be reworded, please.

(Great article, though…thanks a ton!

ReadandShare

+1 to Fred Conover’s comment above.

Not just quibbling with grammar, but the comparison between JPG and PNG is downright confusing to me. So JPG is good except when there are sharp edges? And if PNG is good for sharp edges then why isn’t it also good for big, beautiful, crisp images? I assume that it’s because PNG takes up more space? But that wasn’t spelled out.

Lisa Santika Onggrid

If you do multiple edits it’s better to use PNG as you’ll not lose anything, but JPG will suffice when you release the final product (no more edit)

gzuckier

What about that artifact where blocks that should be a gradient of shading are all set to the same color, so that you get this blotchy blocky effect? Is that jpg only, or png also?

Lisa Santika Onggrid

As far as I know it’s JPG thing, because PNG can render it just fine, unless the original picture is already low-quality.

Mar Viv

I never really thought about all this until now, I always wanted to know the difference between flac and mp3 but never really felt the need to find the difference. Thank you for this insight. Love your articles Ryan.

Lisa Santika Onggrid

Can you hear the difference? I honestly can’t.

LuisGSF

You might not hear the difference in most new recent material if you are not trained and with proper (good) audio equipment, as currently, because radio loudness war and Mp3 popularity, most recordings are already overly compressed, but if you look into older material you will probably hear the difference. Try Phil Collins “In the air tonight” in FLAC and Mp3 and you will.

null

Human ears usualy cant hear those noises that are removed with mp3 V0 which better in many ways than any constant mp3 bitrate.

ozmark

For read-only docs, ALWAYS send PDF’s. For collaboration, use Google Docs or similar. If you must send a writeable file, use ODF.

Lisa Santika Onggrid

ODF isn’t actually widely supported, tho.

Mr_Green_PL

But one can install plugin (for MS apps) or download opensource software (openoffice, libreoffice…)

Josh Barrett

The holy grail of document files (universally readable and writable) is .txt but it doesn’t work with images or formatting, so if you need that use the similar .rtf format, which is almost as universal.

ozmark

Right on, Josh. You’d think the downside of .doc would be painfully obvious by now, even by ms word users battling version challenges. I’m really surprised it’s being put forward as an option here.

Axel

Under the first illustration, it should be “their” not “there”.

Anonymous

I learned a lot from this article and can now work better on my website and the right file formats. Thanks Makeuseof!

Lisa Santika Onggrid

I prefer downloading MP3s. I can’t hear the difference between lossy and lossless and it’s a pain to download a full album in FLAC.

Nevzat Akkaya

Thanks for this very informative article. I’ve bookmarked it already. (You know, people forgets :)

Robert Backlund

If I send a friend a document I send them both rtf and also odf, I know that the Open document format is not widely used yet but it should be. In one of your responses to a comment you comment on the difficulty that people who use Microsuck’s Office with being able to open files created in an earlier version of MS Office. This is typical of a company like MS, where they hook the average user and then continually rape them with version updates that use a different file type as their default and make the new program not able to be backward compatible. If I send someone a disk I send them the document in ODF and also include the latest download for Libre Office. I have had many very positive comments from people who have never heard of either Open Office or Libre Office. The scary thing for me is all the very important documents that have been created by various governments using MS Office over the years that think these files will be able to be opened and read by some distant future MS Office package and that assumes that MS will still be around in 50 to a hundred years. ODF should become the world standard, MS hates it because they cannot control this standard and because of it they would loose their cash cow.

Paul Girardin

Thanks for sharing!

More things learned today!

I kept a copy (made with Clearly) for future reference!

Olle Andersson

To show differences you should use the same picture. Also it would be nice if you compared the .jpg vs .png file sizes for the same picture. Today the .png is sometimes just like the old (I hope forgotten) .bmp-format.

Chetan Chandgothia

Was pretty boring!

Sarah Jane

As a graphic designer i always send my clients sample graphics in PNG format. Although in PhotoShop you can save a JPG with the highest quality, you will always notice that there’s still some compression. So as far as images are concerned, i’m more for PNG than JPG. Sometimes if i have several images to send to a client, i simply put everything in a single uncompressed PDF file.

This is done using a free image to pdf converter : http://free-jpg-to-pdf-converter.en.softonic.com/

For documents, i use PDF. When sending clients contracts, agreements etc… i always send these in PDF format. I have installed a kind of “driver” that i downloaded from http://www.pdf995.com/ . After my agreement/contract etc… is ready in MS Word, i simply click on File > Print, choose the PDF Driver and a PDF file will be created.

For music, it’s always MP3 :)

Regards,
Sarah