Are you mildly curious about the differences between common image formats like PNG and
JPEG or even the dreaded WebP format?
Or maybe you're wondering if there's a difference between the .jpeg and .jpg file extension.
And maybe you're wondering about animated PNGs.
Did you even know that, or did you only think GIFs could be animated?
Well buckle up because the differences are more interesting than you may think.
But you can relax.
I'm going to go over the major points first and then gradually build up to some of the
more complicated stuff.
We can start off with the big two formats PNG and JPEG, which I'm going to focus on
because they are by far the most common.
But I can also touch on other formats like TIFF and also WebP, which you may not be familiar
with but probably come across every day on the web.
We can start off with the differences between PNG and JPEG and there are three major main
differences in my opinion.
And I would say that PNG is superior to JPEG in almost every way except for one.
And some of you may be able to guess what that is already.
The first major difference has to do with transparency.
So JPEG does not support transparent pixels whereas PNG does.
So you may know that pixels, a lot of times, are made of three primary colors RGB.
And they have their own value you add them together which results in the final sum pixel
color.
And actually there can also be what's called an alpha channel, which has the transparency
or opacity of the pixel, and PNG does support this fourth "channel" it's called.
And the other three colors RGB are also channels.
So for example, if the alpha channel for a particular pixel has a value of zero, that
means that pixel will be invisible.
And then if the alpha channel is 100, it's fully opaque and you can also have partially
transparent as well.
But again on the contrary JPEG does not support this.
So every pixel has to be opaque.
Alright now the next major difference between PNG and JPEG is the type of compression supported.
PNG supports what's called lossless compression and JPEG is all lossy compression.
Lossless compression you could probably imagine, it just means that you're compressing the
image without losing any of the original data, but you're still making the file smaller.
Whereas with JPEG with the lossy compression, It's discarding a lot of the information that
our brains apparently don't care about in seeing the overall image and making a difference
which means that some of that information is lost, but it's the non-important information
which makes you able to really compress the image quite a bit more than you can with any
kind of lossless compression.
And you may remember from before I mentioned that JPEG is superior in one aspect and that
is file size.
With PNG you can compress it, but it's not going to be compressed very much and with
JPEG you can compress it really as much as you want.
So in most cases if you save a PNG file, it will save it with either no compression at
all and it's still lossless, or a lossless compression.
There is a way to save it with lossy compression as a PNG, but from my understanding, it's
really not standard.
So you retain all the information but at the cost of larger file size.
And actually in a lot of cases depending on the level of JPEG compression, which I'll
talk about in a minute, you really can't even tell the difference between a PNG and a high
quality compressed JPEG.
It's not going to be as small as a more compressed JPEG, but it's probably going to be smaller
than the PNG because JPEG compression is actually very good.
Now the third major difference between PNG and JPEG is what's called the bit depth.
You heard me mention before the channels of colors, rGB for example.
And you can have more levels of information in each channel for a particular pixel depending
on the bit depth.
Which effectively just ends up determining the number of shades of the color for each
channel.
And if you have an 8-bit image, for example, which usually means 8 bits per channel, that
would be 256 possible shades for each channel.
So you have 256 possible shades of green, red, and blue all going from black to the
pure red, green, or blue.
And with that you multiply the three 256 numbers together, which gives you around 16 million
total possible colors you can describe with 8 bits per channel or 24 bits overall.
So knowing that I can tell you that JPEG goes up to 8 bits, or around the 16 million colors,
which actually is not that bad because it's believed that the human eye can only distinguish
between around 10 million different colors.
Though it is a bit more nuanced than that and I'll get to that in a second.
Though also a majority of consumer monitors for your computer also max out at 8 bits.
So in most cases that's all you need.
Though some monitors can go up to 10 bits like if you have one that supports HDR.
Now PNG on the other hand goes up to a maximum of 16 bits per channel, which ends up being
around 65,000 possible shades per color channel.
And that ends up being around 231 trillion possible colors it can display.
Now you might be wondering why if the human eye can only distinguish 10 million colors,
why bother going above 8 bit?
And the answer is well, the 10 million color number is not as straightforward as that.
First, it's an estimate.
Also, the colors that the human eye can see are not evenly distributed, like the colors
a monitor can display.
For example, you may know that the human eye is more sensitive to green colors than others.
So it may actually be able to distinguish more shades of green than an 8-bit image can
show.
Also, the brain interprets brightness differently than it does color.
So you may be able to show someone two colors back to back that are very similar and you
won't be able to tell the difference.
But if you show them side by side, the brightness difference will be very obvious, even if you
couldn't tell before.
Another big reason you would go above 8 bits, especially if you're capturing an image like
with a camera, which usually capture about 12 bits raw, is because if you go to edit
an image, manipulate it, raise the brightness, change the saturation and stuff, then you're
going to start to really notice issues in lower bits.
There's not a lot of reserve information, you can think of it like.
So if you're just purely capturing an image that you're not going to edit at all, you
probably won't be able to notice between a 12-bit image and an 8-bit image.
But if you start brightening things up and there's not a lot of shades at the lower end
and you try to brighten them up, it's going to start to look blotchy.
Whereas if you have a whole bunch of shades, then if you brighten them, it's still going
to look more like a gradient.
And this is actually called banding and you may actually notice it in pictures that are
heavily compressed because it may have gotten rid of a lot of those shades or combined them.
So the difference between them appears bigger than originally.
So those are the major differences, but now I can get into some more advanced stuff.
And first we can talk about more details about JPEG.
And the first thing I can mention is that the difference between .jpg and .jpeg is there's
no difference.
You can use either.
Basically .jpg was just created because some really old file systems only supported three-letter
file extensions.
Another thing is that you can vary the compression amount, called the quality of the JPEG image
quite a bit.
You can go from 0% quality, which is the most compression, all the way up to 100% quality,
which is not quite lossless.
It's still not lossless, but pretty close.
And as you would expect, the lower the percentage, the worse the image looks.
And you might be wondering what 0% quality looks like, and I actually was.
So I took this wallpaper I made.
It's like a 10K wallpaper.
I compressed this to 0% quality and actually it surprisingly looks kind of similar to the
original.
Yeah, if you zoom in, it looks really bad.
But if you zoom all the way out, you can still see what's going on in the image overall.
And if you're curious, some image viewer software can tell you the actual exact percentage of
quality.
For example, IrfanView, I think that's how you pronounce it.
If you click the little info icon, it'll show you stuff like the JPEG image quality percentage.
And also if it uses something called chroma subsampling, which is a type of compression
that removes certain amounts of color information, but keeps the brightness information because
again, the human eye is more sensitive to brightness than color in some situations.
So anyway, that is an additional optional thing for compression.
In addition to the quality, you can also choose to do chroma subsampling.
Though a lot of programs, they decide this for you.
For example, I noticed if you save a image from Microsoft Paint, it seems to be in the
90s of percentage and it does enable chroma subsampling.
There are also alternative file extensions for JPEG.
For example JFIF, which you may have never seen before, though some websites like Twitter
actually occasionally for some reason will save a JPEG file as a JFIF file, that is the
same thing under the hood effectively.
Technically JFIF is like a more basic bare-bones version of JPEG, but usually they're the same.
So now I can talk about more about PNG and its compression.
So PNG, even though it's lossless, it does have optional compression levels from 0 to
9.
So a compression level of 0 would be no compression and it would be the fastest to save but the
largest file.
On the other hand, a compression level of 9 would take a while to save because it has
to calculate the compression, but it would be slightly smaller and in all cases, it's
lossless.
That's why it takes longer to save the higher compression because it has to do a lot more
calculations instead of just discarding data like JPEG does.
Though even at the max compression, the file size isn't all that smaller than even lowest
compression, maybe like 10 to 15%.
I also need to talk about though how PNG has a few different options for how it can save
colors.
So it can do even grayscale or what's called indexed color and also TrueColor.
The TrueColor mode is not really anything special.
It's like the normal way you would expect an image file to be saved where each pixel
has an RGB value and it's going to have a different number of shades depending on whether
it's 8 bits up to 16 bits.
We already talked about that.
But with the indexed color mode, it actually uses a palette system.
So it looks at basically the 256 most common colors or kind of like an average for a lot
of them and only uses those in the resulting image and instead of each pixel being an RGB
value, it's just an index that refers to which of those 256 colors to put there.
So obviously that is going to result in a much smaller, but also much lower quality
image.
So this is actually a thing that I didn't realize in Photoshop.
It has an option for "Smaller File 8-bit" PNG, but this is not actually referring to
8 bits per channel, but rather an 8-bit overall image, which just means 256 colors.
And this is definitely something you want to know because if you save a PNG file with
this indexed or palette color mode, it's going to only have 256 colors compared to like the
16 million possible ones.
And if you assume that PNG is always lossless, then that's going to be a big surprise.
So usually, yes, PNG is lossless unless you use that special indexed mode, in which case
it's going to be very much lossy.
Also with PNGs, I did mention animated PNGs, which are just part of the PNG spec, though
they're kind of rarely used and they're pretty simple under the hood.
They're basically just a stack of PNG images that are listed as frames and for each frame,
it lists how long to display each frame and that's it.
It just like shows them in order.
So really nothing special.
I don't believe it has any kind of interframe compression like you have with something like
an MPEG video codec.
And also an animated PNG can have either a PNG extension like normal or an APNG extension.
Now next, there's the WebP image format, which stands for Web Picture.
This was actually created by Google as a way to kind of create a new generation of image
formats to overall lower the bandwidth used by the internet because images take up a lot
of space relatively.
So if you can reduce the bandwidth used by images even a little bit by compressing them
more, that can make a big difference overall.
And WebP does actually end up being pretty good.
You can get lossless compression compared to a PNG from like 28 to 45% better compression
depending on how much compressed the original PNG was that you're comparing it to.
The problem is that support for WebP files is very slim.
Yes, pretty much every web browser supports it, but like Windows doesn't support it and
most operating systems don't.
So it really sucks if you go to save an image and then you realize it downloaded in this
stupid WebP format.
It's such a pain, which is why it gets such a bad rep because nobody really likes them.
It's annoying, which I definitely can relate to.
And finally, I can touch on the TIFF image format, which stands for Tag Image File Format.
And TIFF can have either TIF or TIFF as the file extension, just like JPEG, it's the same
thing for both.
And TIFF is actually a very versatile image format.
It can kind of containerize a lot of different image data.
For example, you can have a TIFF file that has just JPEG data under the hood or you can
also have uncompressed data or lossy compression or lossless compression, whatever you want
really.
Because of this in the past, it was kind of jokingly referred to as "thousands of incompatible
file formats" as the extension, but there is a so-called baseline spec of TIFF that
all image readers that can display TIFF must support.
So I believe most of the time if you're saving an image as TIFF, it's going to stick to that.
I find that TIFF images are usually used where preserving the quality of the original image
is the top priority.
So if you're doing archiving, you can save TIFF to unrestricted amount of bits per channel,
whereas even PNG only goes up to 16.
I believe it's unrestricted on TIFF, even if I don't know if there's any cameras that
support more than that anyway.
Also another thing is that TIFF is actually so versatile that you can make edits to a
TIFF file and store those edits in the file itself while not affecting the original.
So you can save a TIFF file with edits that are completely reversible because it basically
just saves the edits in addition to the original image if you want to reverse it later.
So a lot of times you will see photographers use TIFF files, or again for archiving just
to have like the maximum quality.
So typically if you do see a TIFF file on the internet, it's going to be pretty big.
So you might be wondering after all that, what are the main takeaways?
Well first of all, if you need an image with transparency, then you need to use PNG.
That is the simple answer, don't use JPEG.
If an image has no transparency, then you could probably either go with both.
Assuming that the JPEG compression is like a higher quality, then you probably won't
be able to notice a difference unless you like maybe really zoom in or start editing
stuff.
And in general, you're going to be able to get a way smaller file with JPEG than you
will with PNG.
But if you do want to be sure that you're maintaining the full quality of the image,
then PNG is the way to go.
Though of course just make sure it's not saving as that paletted indexed color option.
I don't think many programs do and it would be very obvious if you zoomed in.
It would be pretty obvious
there's not many colors in there.
But still probably worth knowing just in case for some weird reason you see a rare program
that does do that, then at least you'll know why.
So anyway, if you enjoyed this video, found it helpful, be sure to give it a giant thumbs
up for the YouTube algorithm.
And if I missed anything, I'm sure you guys will let me know down in the comments if you
think I should have mentioned something else important.
If you want to keep watching, the next video I'd recommend is where I was talking about
some advanced Windows features that you should at least know about.
So I'll put that link right there.
And if you want to subscribe, I try to make videos about twice a week, usually Wednesday
and Saturday.
So hopefully I'll see you in the next video and thanks for watching.