JPEG vs. PNG: Why Image Formats Matter for a Fast Website

When you save images to use on your site, choosing the right image format matters.

Why? 

Because the wrong image format means larger file sizes, which means a slower website, which means higher bounce rates and lower conversion rates.

Give me a few minutes of your time and you'll never make that mistake again. Instead, you'll choose the right image format and your site will look better and load faster. 

More...

The Basic Rule: JPEG for Photos, PNG for Graphics

If you remember only one thing from this entire post, let it be this: save your photographs as JPEG and your graphics (and screenshots) as PNG.

Landscape photograph

This type of image should be saved as JPEG.

Vector design graphic with text

A graphic like this should be saved as PNG.

You can think of it like this: if it has many different colors, gradients and textures, JPEG is the right format. If it has sharp lines, clearly separated areas of flat colors and text, PNG is the way to go.

But Why Does it Matter?

When you compare image in JPEG and PNG side by side, you will probably not be able to tell the difference. So, if there's no perceptible difference between the images, why not just save everything as JPEG and be done with it?

The answer is: image compression.

Image compression is about reducing the file size of an image as much as possible, without compromising the quality too much. In general, stronger compression = smaller file size = worse image quality. Good image compression is about finding a good trade off between file size and quality.

It's all well and good to look at a high-res picture on your computer. The file is uncompressed and because it's saved on your hard drive you can open it in an instant. But if that same file is on a website, it has to be downloaded. Even on a fast connection, large image files can take several seconds to load. And when it comes to website speed and conversion rates, you don't have several seconds to spare...

The graph above shows that people will abandon your website after even a few seconds of waiting time. If you have several large (file size) images on a page, you might be losing half your visitors before they even see your content.

Let's look at a practical example of this. If we save a photograph like this at a 1080p resolution in both image formats, here's what we get:

The image quality is almost identical, but the wrong image format (PNG, in this case) makes for double the file size!

But we're not done yet. Even the smaller file in this comparison is much too large for use on the web, at over 1 MB. That's because these images are uncompressed and as a general rule, you should never use uncompressed images on a website. 

Loading several, large, uncompressed images can slow your pages down to an absolute crawl and that will send your bounce rate through the roof. We've seen this exact problem affect many of the websites that we've reviewed over the years (like this one).

Image Compression

So, images need to be compressed and in the compression the differences between JPEG and PNG become clearer.

JPEG uses a method of compression that groups together multiple similar pixels and kind of blurs the lines between things. This works fine for photographs, but looks horrible for graphics and screenshots.

Here's what strong JPEG compression does to a graphic:

Crying face emoji with "Needs More JPEG" text.

Those fuzzy outlines and the ghosting around the text are telltale signs of JPEG compression on a file that should have been a PNG.

Here's what the same image looks like when saved as a PNG:

Crying face emoji with "Needs More JPEG" text.

The reverse isn't quite as bad. If you save a photograph as PNG and compress it, it will still look fine. Take a closer look at gradients and you'll detect some graininess, but it's nothing too bad. The problem here is file size: a JPEG photograph can be compressed to a small file size without much loss in quality, while the PNG just can't be crunched down as much.

Here's how our example files from before compare, after compression:

The JPEG image is now well under 1 MB, which is acceptable for a large, main image on the page (you wouldn't want to load many more images of this size, though). The PNG's image quality is still okay, but the file size is about 25% larger than it needs to be.

PNG for Crisp Graphics

Note that if you save a graphic or screenshot as JPEG and compress it heavily, you can usually achieve a smaller file size than with a compressed PNG. In this case, you should choose image quality over file size: the PNG will look crisper and clearer than a JPEG of equal file size. And it will look much crisper and clearer than a JPEG of smaller file size.

Here's a side by side comparison: compressed JPEG vs. compressed PNG with similar file sizes.

JPEG version. File size: 64 KB. Click to zoom.

PNG version. File size: 65 KB. Click to zoom.

Compare these images and see how you feel. You may find yourself insensitive to the fuzziness in the JPEG image, but as I mentioned in the video, to some of us, this is torture...

The "Not Sure Which One" Case

Sometimes, you have an image that doesn't clearly fall into either the "photograph" or the "graphic" category. For example, a screenshot that contains text and sharp lines, but also photographs, like this one:

Screenshot showing text, background shapes and photographs.

This example is taken from our "Chic" landing page set for Thrive Architect.

In the case of a screenshot, it's almost always best to save it as PNG. That way, we retain the crispness and readability of the text in the image.

In other uncertain cases, it's best to save the image in both formats, compress them and compare file sizes and visual quality to make the decision of which format to upload to your site.

How to Compress Your Images

Here are some services and tools you can use for image compression:

  • Kraken.io - the service we use. Excellent image compression while retaining high image quality.
  • The Kraken WordPress plugin - to automatically compress images you upload to your site (note: our themes have this feature built in).
  • WP Smush - another WordPress plugin that auto-compresses your images.

You are now armed with the knowledge and the tools to choose the right image format and keep your website fast and beautiful looking.

If you have any questions or feedback, please leave a comment below!

Shane

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Emil G says:

    Great article Shane! This should be mandatory reading for website owners.

    I addition, are you still recommending always making the image the correct PIXEL size before running it through Kraken?

    • Shane Melaugh says:

      Yes, that’s a best practice that I also recommend doing.

  • I prefer png, the quality is much better.

    • Shane Melaugh says:

      Mate… please watch the video.

  • Christy says:

    Great explanation and sample images, Shane!

    • Shane Melaugh says:

      Thank you, Christy!

  • John says:

    What happened to .gif?

    • Shane Melaugh says:

      It died of old age…

      GIF is an ancient image format and using either JPEG or PNG instead is better in 99% of cases.

  • Onuora A says:

    GREAT article!

    Even for us old and jaded folks a reminder like this is helpful.

    • Shane Melaugh says:

      Thank you, Onuora! Glad to know you enjoyed this post. :)

  • Jonathan B says:

    I knew about transparency and always checked for which produced the smaller file size in Photoshop but there were some great tips in there. Thanks. Also, double thanks for the Kraken.io tip :-)

    • Shane Melaugh says:

      Thanks for your comment! I’m glad you found this post useful.

  • Jonah J says:

    Hi Shane.

    Your themes come with a compression function built in. Is your built in function as good as Kraken or would there be any additional benefit of passing images through Kraken first and then perhaps through your built in compression function to take it down further?

    • Shane Melaugh says:

      Hello Jonah,

      Our built-in compression uses the premium Kraken service for image compression. :)

      • Steven S says:

        I’m running ThriveThemes on our site, but am not clear how to tell which images have been compressed by the built-in compression.

  • Adam says:

    Good article Shane. The problem I see with my websites are rather .java or.css which should be combined into one file. I already use a plugin to do it for me and also in theme and the same plugin I have to minify things. I also use CDN, but website load from 3.3sek to as bad as 6.7sek and more. It depends on the continent. I also found that any external links incl. plugins and google fonts slow down pages.
    I have no idea what to do with that ext. css or Java in WP. This is how it is I guess.

    • Shane Melaugh says:

      Yes, there’s a lot more that can be done to keep a website fast. In this post, I wanted to keep the focus on just image formats.

      • Adam says:

        Thank you Shane for the reply. Sorry for adding a less relevant comment to this post. Maybe next time you can write about it too. It will be very appreciated. Thanks.

  • Owen A says:

    Hi Shane
    Another great article. I’ve been using tinyjpg.com for both JPEG and PNG compression. I’ll compare the results with Kraken.io.
    I also use your Thrive theme RISE. Does this feature need to be activated on the theme?

    • Shane Melaugh says:

      Hello Owen,

      In the theme, you can go to Theme Options -> Performance and activate the built-in image compression. When you do that, there’s no need to use external image compression services.

  • Bob says:

    You didn’t mention GIF format for illustrations/text – usually smaller than PNG files but limits colors. Also PNG 24 vs PNG 8. For web PNG 8 will be smaller file size than 24 and look the same as 24. Some image compression plugins – Shortpixel, Smush Pro – will convert PNGs to JPEG for you if no transparency is used. I’m not sure if they convert illustration PNG files – which would not be ideal.

    Thanks for the tips.

    • Shane Melaugh says:

      Thanks for your comment, Bob!

      I personally never use the GIF format. I’ve yet to see an example where GIF has a significant advantage over PNG. Also, since it seems difficult enough for most people to remember which of the two image formats shown in this post to use, I didn’t want to add more stuff and add potential confusion.

  • Santiago says:

    You mention Kraken in your video but I thought that any photo we uploaded via Thrive Themes was automatically compressed via Kraken by default. Is this no longer the case?

    • Shane Melaugh says:

      Hello Santiago,

      Yes, in our themes, we have a feature that automatically compresses all images you upload.

  • Rod B says:

    Hi, Shane,

    You mention Kraken is built into your themes but is it also part of Thrive Architect?

    • Shane Melaugh says:

      Hello Rod,

      The Kraken image compression is only included in our themes at this time.

  • Aneta says:

    Exellent explenation as always Shane.

    But sometimes you’ll have to save your image as PNG, like in my case where a client gave me around 300 pictures (in JPEG format) of his products that he wanted to showcase on his site.

    I had to made them with transparent background since they had to look good on the site. Then I compressed them using the site called tinyPNG and then uploaded on his site.

    • Shane Melaugh says:

      Yeah, if you need transparency, PNG is the best choice. As I mentioned in the video, I recommend avoiding photos with transparency if possible (e.g. the rounded image effect).

  • Rob Cooper says:

    Knowing your aware of the importance of page load times, I’m sure you’ve factored in the effect your plugin suite has on them as well. Glad to be using Thrive (after years of Hybrid Connect)

    • Shane Melaugh says:

      Speed is always a major consideration for us, yes. In everything we build, we keep things as fast and lean as possible.

  • Matthew says:

    Great stuff! I’m intrigued by your statement that 750kb for a large image is ok? I typically keep any single image under 300kb, even it’s the only one on the page. Is that 750kb also reduced by Kraken? Does Kraken (or WP Smush) do a better job than we can do ourselves in PhotoShop?

    • Shane Melaugh says:

      Kraken does a waaaay better job than what you can get in Photoshop, yes. Importantly, it will give you much higher image quality for the file size. If you compress an image to, say, 300kb in Photoshop, it will look a lot worse than the same image compressed to 300kb in Kraken.

      Regarding file size: yes, 750kb is a lot for a single image. For a full size background image (e.g. for the title section of a page), I’d say it’s just about acceptable. This is assuming it’s the only large image like this on the page.

      The biggest factor here are the image dimensions. Because the image is made for full screen coverage, its dimensions are large and so is the file size. If the same image was sized to show inside the content, the file size could easily be 5x smaller.

  • Francesca says:

    Fantastic! Such valuable info thanks Shane!

    • Shane Melaugh says:

      Thank you, Francesca!

  • Kevin C says:

    Thanks, Shane, for bringing up the topic of image compression in this post. It’s important to website speed but rarely talked about! I also find this interesting (and your explanation well done) because it reminds me of work I did as an engineering grad student (in fact, I did my master’s thesis on image compression).

    As you explained well in this post, the JPEG algorithm doesn’t handle very well sharp edges where the image content is quite different on one side of the edge vs on the other side (precisely the graphics and logos you mentioned). JPEG was designed for areas of continuity in images, like a person’s face, a natural scenery in nature, etc where there’s continuation of the same (or similar) image content in many areas within the image. So with JPEG, you can get good reduction in file size for these kinds of image content (without losing much image quality), but you start to get the compression artifacts (the jagged lines) pretty fast if there are many sharp dividing lines within the image.

    Anyway, this is just me reminiscing about my good old grad student days :-) You did a great job explaining the importance of image compression – and it’s even better that you brought up this topic in the first place and devoted a post to it. It’s so true that people nowadays expect a website to load quickly (almost instantly), or else they just think it’s not worth sticking around for.

    • Shane Melaugh says:

      Thank you for your comment, Kevin! I’m happy to know that my explanations hold up for someone with deep knowledge of image compression algorithms. :)

  • Cedric says:

    Great info!

    • Shane Melaugh says:

      Thank you, Cedric!

  • Caroline says:

    Shane, I’ve heard you also say that Thrive Architect will size the images for us. Do we still need to use Kraken? I’m a wee bit confused. Thanks!

    • Shane Melaugh says:

      Hello Caroline,

      If you use one of our themes, you can activate automatic image compression in Theme Options -> Performance. When you do so, you no longer need to do any image compression manually.

      • philip.jackson says:

        Hi Shane –
        you make several references to Theme Options > Performance. I’m a bit new to this and when I look in the WP dashboard at Appearance > Themes, I can see the Thrive Ignition theme and a ‘Customize’ button but don’t see ‘Options’.

        Under Customize, I see 8 sub-choices but not one called Performance, and nothing inside these 8 choices about images or compression.

        Where have I missed my way ?

  • Harvey S says:

    For thrive theme users though, ALL photos/images are automatically compressed when uploaded, correct? We just need to make sure they are in the right format (jpg/PNG), correct?

    In other words all themes have Kracken already installed?

    • Shane Melaugh says:

      Yes, that’s correct. The image compression step is build into the optimization feature in our themes.

      • Harvey S says:

        Yay! One less plug-in to have to keep updating and makes our site less “Frankenstein-ish!”
        Thanks!

  • Harvey S says:

    What is the best practice for storing a hi res photo for downloadable/publicity choices for printing posters, etc.

    Should those images be off-site as in AmazonS3 or Google drive?

    • Shane Melaugh says:

      Hello Harvey,

      Storing large image files for press kits and such separately can be a good idea, yes. Amazon S3 is suitable for this. However, even if you store them on your site, that’s fine, as long as you don’t load those images on your pages. If there’s a “click here to download” link that will download a zip file with a bunch of huge images, that’s no problem and it doesn’t matter much where that file is hosted.

      • Harvey S says:

        Oh, didn’t know that about the storage in my site and not actually loading them into the page. I thought that just because they were in the same storage that it would slow things down. That makes sense. Thanks, Shane!

  • Lisa Sicard says:

    Thank you Shane, now I will go back and check mine out and update along the way.
    Speed is so important today as people don’t wait to wait for anything to load.

    • Shane Melaugh says:

      Indeed. Our attention spans aren’t compatible with large image files, these days. :)

  • Ulf says:

    Brilliant. I learnt through your video. Thank you Shane!

    • Shane Melaugh says:

      I’m glad to hear it, Ulf!

  • Stephane says:

    Could I suggest you a topic Shane ? I’d love to have your point of view about making a sales video. What structure ? What lenght ? What congruency with TT page copywriting. I didnt’ see this kind of content from you and it’s totaly congruent with TT sales pages.
    Your own approach might be interesting for us.
    Thanx

    • Shane Melaugh says:

      Thank you for the suggestion, Stephane!

      I have an older post that dissects one of my sales videos from the time in great detail. You can find it here. I might make an updated version of content like this, too.

  • Richard says:

    So I can delete WP Smush (not premium) plugin when I have your theme?

    • Shane Melaugh says:

      If you use one of our themes, go to the theme options and activate the image compression in the “performance” options. Then, you can deactivate smush-it.

  • Fernando says:

    Great post as always, but what about caching plugins and CDNs?

    You don’t recommend them?

    • Shane Melaugh says:

      Hello Fernando,

      Caching and CDNs are a completely separate thing, that’s the only reason I didn’t mention in them in this post. I do recommend using both, yes. And further, they should be used in combination with correctly sized and compressed images, for maximum speed. :)

      • Fernando says:

        Yes I know they are different, many caching plugins have a CDN section.

        I’d like to see your configuration for such caching plugins with Thrive Themes…

  • Rick says:

    Shane thanks for the heads-up. I like to save my images for web in photoshop, then I open them in the open-sourse software Irfanview add my 2 pixel border and again save them for the web. By doing this in Irfanview with an already compessed image it easily reduces the size by another 50%. They can easily be saved as a .jpg or a .png

    • Shane Melaugh says:

      Hello Rick,

      I recommend that you upload the image “naked” (after compressing) and add your border with CSS or with Thrive Architect, if you use that.

      The reason is that by adding the border as a CSS element, you get pixel perfect crispness on the border and if you ever change the design of your site, you can change the borders on your images as well, without having to re-upload them.

  • Alison says:

    Hi Shane, really useful article – many thanks. As I use TA & upload my images as jpeg & correct pixel – do I assume that kraken is automatically compressing & I do not need to do this at all?
    Cheers
    Alison

    • Shane Melaugh says:

      Hello Alison,

      The Kraken feature is built into our themes, but not into Thrive Architect.

      You can get the auto-optimization done by using one of the plugins linked in the post, if you aren’t using a Thrive Theme.

  • Cheefoo says:

    This is really helpful. I have been using only png format for all the website building. I especially like the tip on using svg format. One burning question: what’s the practice of resizing an image? Crop first or resize using coding?

    • Shane Melaugh says:

      That’s a good question, yes. It’s important that you resize the image before uploading it, because the size (dimensions) of the image have a major influence on the file size. An image should always be resized to no larger than it will be shown on your website, before uploading. More on this in this post with 8 steps for mobile optimized content.

  • Mary T says:

    Really helpful thank you Shane!

    • Shane Melaugh says:

      You’re very welcome, Mary. :)

  • John Andrick says:

    Thank you, Shane.
    A timeless question about image format for websites has finally been answered with absolute clarity.
    That was amazing (as always).

    • Shane Melaugh says:

      Thank you, John! :)

  • Kelly says:

    Holy smokes, this is amazing!! Thank you SO much. I never knew this but I’m so glad I do now.

    • Shane Melaugh says:

      Thank you, Kelly! I’m glad you enjoyed this content.

  • Ridwan Sugi says:

    Thank you for sharing this topic. I only thought that .PNG purpose was for image with transparant background only.

    • Shane Melaugh says:

      I’m happy to see you could learn something new in this post. :)

  • Lisa says:

    Wish I had known this before. Now I know why my screenshot was fuzzy once I uploaded it into the blog. But now I can fix it too! Thanks.

    • Shane Melaugh says:

      Yes! Let’s put an end to fuzzy screenshots! :D

  • Norman M says:

    Outstanding content, thanks Shane!

    Norm

  • Geoff says:

    Just wondering Shane – if using a ThriveThemes Theme (Squared) and uploading with Thrive Architect are the images automatically compressed or does one have to go through a third party like Kraken? Thanks again Shane.

    • Nick Martin says:

      My question too. Do your themes do that Kraken step automatically?

    • Scott B says:

      I think it will compress the images if you have the theme setting for image optimization turned on. Some clarity on how it works would be helpful.

      I have a paid Kraken account that I used on other sites and I haven’t enabled it on sites that use the Squared theme because I didn’t want to create a conflict. Any suggestions for us?

  • Jean-Pierre says:

    Hi Shane, I have another problem that I would like to share but I do not know where to post it. I would have liked your email to explain it to you.
    I use programming codes for people to learn how to work with Mikrotik routers.
    But this code comes with the content and has very bad keywords at Yoast Seo.
    I am looking for a solution to be able to place a nice code on my website in a framework or so that people can copy and paste.
    Can you help me with that?
    I like working with thrive architect and find it a very user friendly and usefull program. Congratulations with this.

  • Sande says:

    Darn! Another thing to add to my To-Do list. Check and fix all images.

  • David W says:

    Thanks, Shane,
    Love the concise, clear easy to understand information and as a newbie, it helps tremendously!

    Do you have one for reducing the size of video’s?

    Cheers.

  • Stephen+B says:

    Great video Shane. When saving images in Photoshop, do you recommend saving for web or saving as a normal file and uploading for compression (I have Thrive Architect)?

    If using save for web, what quality do you suggest?

    • Shane Melaugh says:

      Hello Stephen,

      I suggest saving the image at the highest quality possible in Photoshop and then compressing it with Kraken. The results are much better than if you do the compression in Photoshop.

  • Nic D says:

    Wow. Didn’t know the rationale between using jpg and png. Have used png for everything for ages. Will have weeks of edits to attend to.

    I have used Kraken on some of my sites and prefer it to Smush. You say it is built in. Can you explain more? It is not obvious as a user.

  • Karla says:

    I love this post! Very intesresting and will help me. Thaks!

  • Gert M says:

    Just wanted to thank you! I had actually downloaded all my images as png. Spend 1-2 hours but now all my featured images look way better and sizes are 4-8 x smaller lol. Thanks again!

  • Scott B says:

    Shane,
    The only missing thing here is a summary of recommended image sizes for common things. I believe some recommendations have been given in other videos and it would be nice to have your recommendations put in one place. Getting images sizes right and mastering file type and compression will give all Thrive Members Jedi skills. Thanks for a great post clarifying the importance of both JPG and PNG.

    Hear are some topics for another potential video:
    * Social Media Sharing Sizes. (for yoast or other plugin)
    * Featured Image
    * Full Width Image
    * Parallax Image Tips
    * Retina Images for 4k Screens
    * Mobile Friendly Image Tips

    I hope this inspires some good content for you guys. I have been enjoying the content coming out lately while I’m waiting to see product updates etc. Keep up the good work.

  • Gisah says:

    I really liked your article, I confess I did not know this importance in the choice of formats between Jpeg and Png. I will apply what I learned in this article to optimize my blog. Thank you for sharing these tips.

  • >

    Join Thrive University (it's FREE!)