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

Jpg vs png - How they're different and why you should care. By TheEssentialWebsite.com

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.
Jpg vs png - How they're different and why you should care. By TheEssentialWebsite.com
Jpg vs png - How they're different and why you should care. By TheEssentialWebsite.com

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

File size difference between jpg and png

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.

Jpg vs png - How they're different and why you should care. By TheEssentialWebsite.com

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!
Like this post? Share it with your friends...

About Janet

Hi there! I’m Janet Hoover, designer, code techie, dog lover and co-founder of The Essential Website. Our big thing is helping people bring their online visions to life more beautifully, polished and smarter! We create custom-crafted, hand-coded WordPress websites for biz-builders, action-takers and dreamers who are ready to GROW and shine online! We’re here to help you stop dreaming and start doing with the perfect online solution for your one-of-a-kind biz.

12 Comments

  1. Meagan Shaver on February 2, 2017 at 2:30 pm

    OMG! This is great. Thanks for sharing this information.

    • Janet on February 2, 2017 at 3:53 pm

      You’re so welcome Meagan! Glad it helped 🙂

  2. Jenny on February 2, 2017 at 2:33 pm

    So helpful!! loved this post. Is 1000px X 330 px the standard size you use for website headers?

    • Janet on February 2, 2017 at 4:06 pm

      Hi Jenny! Good question – depends on the style and look you’re going for on your site. You can have a full width header or a header that is only the width of your content. (1000px x 330px is a good/fairly standard size for a header that isn’t full width.) I’d say if you want full width, you should create a header no smaller than 1960 px wide. For example, the header on our home page is 1960 x 588. So, it really just depends on the design of the site, some header images are higher in size, some shorter depending on the design or what you want/need to display in your header. 🙂 Hope this helps! Feel free to email us at info@theessentialwebsite.com if you have more questions.

  3. Krystal // The Krystal Diaries on February 7, 2017 at 5:51 am

    I never knew what the difference was between the two. Thank you for sharing this!

    • Janet on February 7, 2017 at 10:45 am

      So glad we could help you Krystal!

  4. Kim Smith on February 28, 2017 at 8:19 am

    The differences are great to know. I have uploaded files of jpegs to my site previously and then wondered why I get the slow readings. ( Checking back, I had images that were over 500kb when I could have compressed and saved so much space.) As your site has more and more images, it just gets worse. Start out the correct way and you won’t have to go back into hundreds or even thousands of images to fix!

    • Stefani on February 28, 2017 at 8:36 am

      We’re so glad you found it helpful, Kim! Amen to starting out the correct way :).

  5. Debra on February 28, 2017 at 8:23 am

    I had no idea……good info, especially for those of us with food blogs. Always looking to have my readers have a top notch experience. Thanks so much!

    • Stefani on February 28, 2017 at 8:37 am

      YES! Exactly, Debra! Making the images smaller (in weight) will definitely give your visitors a better experience, as your site will be faster. YAY for faster!

  6. Allison at Brainy Business Babe on February 28, 2017 at 9:39 am

    Wow! I had no idea. Thanks for this great tutorial – I’m off to go switch out my PNGs for JPEGs!

    • Stefani on February 28, 2017 at 9:40 am

      So glad you found it helpful, Allison!

Leave a Comment