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.
