JPG or PNG? Which to use for photos, logos and your website (we tested 60 of our own images)

The short version

• Photographs: JPG. Our 60 photos came out about 93% smaller as JPG than as PNG.
• Logos, screenshots, text and transparent backgrounds: PNG. As a JPG our logo was almost twice the size, and its transparent background turned black.
• A website: WebP, if your site accepts it. It was the smallest in every test we ran, and it can keep a transparent background.
• JPG and JPEG are the same thing. Two spellings of one file extension.
• Keep an original. Save the copy you edit as PNG or in your editor's own format, and export JPGs from it.

The difference between JPEG and PNG

Both are ways of storing a picture. The difference is what they are willing to lose.

JPEG is "lossy": it throws away fine detail you are unlikely to notice so the file gets much smaller. Mozilla's guide for web developers calls it a "Good choice for lossy compression of still images (currently the most popular)." That is why it suits photographs, where there are millions of slightly different colours and nobody misses a little of them.

PNG keeps every pixel exactly as it was, and it can have a transparent background. The same guide says: "PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed." That suits logos, screenshots, diagrams and anything with text in it, where the sharp edges matter and the flat colours compress well.

So the question is never which format is better. It is which kind of picture you have.

Is JPG the same as JPEG?

Yes. JPG and JPEG are the same format. The file can end in .jpg or .jpeg, and Mozilla's guide lists both extensions (and a few rarer ones) under the one format. Renaming a file from one to the other changes nothing about the picture.

What we found when we tested our own images

Every post on this blog has a share image: the picture that appears when someone posts the link on social media. There are 60 of them, all 1,200 × 630 pixels and all photographs, and every one had been saved as a PNG. We converted all 60 to JPG and to WebP and measured the files.

That is 49 MB of pictures where 3.6 MB would have done. It is the mistake this post is about, and we were making it on every single post.

We also checked that the smaller files were not simply worse. Using a standard measure of how far a compressed picture has drifted from the original (PSNR, where higher is closer), the typical JPG scored 41.6 and the typical WebP 41.7: as near identical as makes no difference. Google says lossy WebP images are 25–34% smaller than comparable JPEGs at equivalent quality. On our images the saving was bigger, about 45%, but that is one set of 60 pictures, one piece of software and a different quality measure from Google's.

Then we tried the other kind of picture.

Here PNG wins over JPG easily: smaller files, sharp edges and the transparency kept. Notice the backgrounds. A JPG cannot be transparent, so the see-through part has to become a colour, and which colour depends on what is hidden in the file. On our two images it came out black on one and white on the other. If you have ever seen a logo sitting in an ugly box on a website, this is one way it happens.

Which format to use, by job

• Product and website photos: JPG, or WebP if your website builder accepts it.
• Your logo: PNG, or SVG if your designer gave you one. Google lists SVG among the image formats it supports.
• Screenshots and anything with text in it: PNG.
• Anything that needs a transparent background: PNG or WebP. Never JPG.
• Printing: ask your printer. Printers usually publish their own file requirements, and they are the ones who have to print it.
• Your master copy: PNG or your editing app's own format. Export a JPG from it each time, rather than editing a JPG and saving over it again.

For Google, any of them will do: its image guidance supports images "in the following file formats: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF". And whichever format you pick, the image still needs a description for people who cannot see it, which we covered in what alt text is and how to write it.

What we are changing

The image at the top of this post is our first share image saved as a JPG. It is 34 KB; saved as a PNG, the same picture was 686 KB. New posts will use JPG from now on. The 60 older images still need converting; that is on our list, and we will say when it is done.

What argues the other way

• Our test is small and particular. Our 60 photos were generated by AI and are smooth, clean images. Busy, grainy photos may compress differently. We used one piece of software (Pillow, a widely used image library) at one quality setting.
• PSNR is a rough measure. It counts differences in pixels, not what a person notices. Google's figure uses a different measure, called SSIM.
• WebP is not accepted everywhere. Check the place you are uploading to before you switch. JPG and PNG are safe almost anywhere.
• A heavier image is not always a problem. If a page has one photo and few visitors, a slightly larger file makes little practical difference. It adds up across a whole site.

Sources, and what we checked

• Mozilla, Image file type and format guide, for what JPEG and PNG are for and the file extensions.
• Google Search Central, Google image SEO best practices, for the formats Google Search supports.
• Google for Developers, An image format for the Web (WebP), for Google's own WebP size figures.
• Our test: 60 share images from this blog, plus our logo and the EU "AI generated" badge, converted with Pillow on 1 October 2026 and again on 3 October 2026, the day this was published, with identical results. JPG at quality 85, WebP at quality 85 for photos and lossless for graphics. File sizes are the saved files' sizes in bytes; KB and MB here mean thousands and millions of bytes.
• All three pages were read in full on 1 October 2026 and again on 3 October 2026; none had changed. Every quotation above was tested automatically against their text both times.