Don't believe the type

JPG, PNG or PDF. When to use what online?

There are lots of file types out there… Even within different categories of information. Everything from image, to text, to music and movies has dozens of different options available. So with all of these at your disposal, which is best for each situation? Today we’re going to be breaking down the most used image formats used online, which should help clear things up a little!

JPG

JPG (or JPEG) was created by the Joint Photographics Export Group, which is where the name derives from. In case there was some confusion, there is no difference in the files between the two spelling options. In the good old days of computing, file types had a character limit of 3, hence the 3 character variant dropping the E. This isn’t the case anymore, so the 4 character acronym is creeping up in popularity. 

Advantages

  • Tiny file size. JPGs are the best for compressing things down. When online, file size matters for lots of reasons, from SEO based loading times, to the user experience whilst browsing. Without getting into too much detail as to how they condense the image, the way JPGs compress things works really well if you have something like a photograph that needs to work online and still look great.

Disadvantages

  • No transparency. JPGs don’t support transparent background unfortunately. So if that is needed, then you’ll have to look elsewhere.

Best used for

  • Photography and general images

PNG

PNG stands for Portable Network Graphics. Unlike JPGs, PNGs offer lossless compression on images. Great for quality, not as good for file size. So if the edges need to be crisp for something like a logo, PNG is the way to go.

Advantages

  • Transparent backgrounds. PNGs allow transparency within an image. So if you have something like a logo file and don’t want it sat in a white box, then this is the format for you. 

Disadvantages

  • File size. Whilst in no way massive in terms of size, they aren’t as small as JPGs in this regard. If you can use a jpg, use a jpg. If it’s a little more complex or needs transparency, then PNG it.

Best used for

  • Logos, icons and images in need of a transparent background

PDF

A PDF is a Portable Document Format. Whilst not used in exactly the same way as JPGs and PNGs are online, they are still widely used and very useful. Depending on how it has been saved, they can create exact copies of the image, so no compression and loss of quality. Though obviously not as small a file size as the other two… Due to the quality, it is the go to option for print, however it is used online sporadically, though mainly for things like brochures and multipage documents.

Advantages

  • High quality documents. Depending on how they are saved, they can be full quality and hold a lot of information and text which can be searched. Very useful for anything with image and text.

Disadvantages

  • Larger size. Whilst they can be compressed a little, they will still never match JPGs or PNGs for small file sizes for images.

Best used for

  • Multipage documents with text.

And there you have it. Hopefully that gives you a little flavour of each of them and enough to be going on with. Whilst there is a lot more to each and we’ve barely scratched the surface, consider this your starter for 10! Though, as always, if you have any questions do get in touch.

ResourcesDan Spencer