JPEG & PNG – What’s the difference and why you need to know

What’s the difference?

The quickie definition of each is:
PNG: (Pronounced ping) PNG is short for Portable Network Graphics, which are formatted files that have been compressed with no loss of quality to the image. This is called a “lossless” image compression.

JPEG or JPG: (Pronounced jay-peg) JPG is short for Joint Photographic Experts Group, which are files that have been compressed and do have a bit of loss in image quality. This is called “lossy” compression.

As far as the web world is concerned – these different files types can make a big difference on how things look to your visitors and how fast your site is.

Here’s why you should give a flip…

File Size

JPGs are smaller in size than PNGs. Take this lovely logo for Meadows Studio as an example, both are saved at the highest quality and the same size of 1000px x 330px.

Although they look the same here, take a look at the file size for both below. See how the PNG is larger?

Now, if you think about every image on your website (especially if you have lots of images), the extra file size adds up, which could slow down your site and cause your images to load slower.

TIP: Optimize your images BEFORE adding to your website

Doing this will reduce the image file size which in turn, helps with website speed (an important factor Google uses to determine ranking). To compress your image file size, use an image optimizer like: ImageOptim, TinyPng , PhotoBulk, Website Planet’s Image Compressor or a plugin like EWWW Image Optimizer or ShortPixel. You could also save (or resave) the image in your editing software (like Adobe Photoshop, etc.) at a smaller size by reducing the image quality (which also reduces clarity some so, you’ll need to play with this.)

Transparency

When you look at the same images above you can’t really tell the difference, right? Well, let’s put them on a solid background. Now see the difference? The JPG has a white background and the PNG has a transparent background. Which one looks better? The PNG does in this case, but if you have a white background, use the jpg instead and save the extra space.

Why the heck do I care, right? Umm. Wrong.

JPG and PNG - Know the difference and why you should actually give a flip. Click To Tweet

When to Use What

• Even though a smaller file sizes means a faster website, you should always use the appropriately sized images. Too small and it’ll look fuzzy and pixelated. This means, when you’re buying stock images or graphics, you might want to think about forking out the extra $5 for the large image instead of the small one. For example: Let’s say you need an image for your sales page that’s at least 600 x 200 pixels. You find the perfect thing on DepositPhotos, and see the smaller (and cheaper) size is 500 x 500 pixels, opt for the next size up instead. Choose an image that is at least the same size or larger than what you need. We personally go for the bigger size. You can always resize down, but not up. Here’s our Top 10 Picks to Find the Perfect Images.
• If you need your image to have a transparent background, use a PNG.
• Use JPG images when possible and optimize any image you add (see tip above).
• Always use images you have the rights/permission to use (images you’ve taken yourself or purchased the right to use commercially).

Anything else you’d like to know? Ask us below!