# Understanding Image Formats: PNG vs JPEG vs WebP and Animated PNGs
## Introduction
Have you ever wondered about the differences between common image formats like PNG and JPEG? Or perhaps you’ve pondered over the mysterious WebP format? And what about the subtle distinctions between .jpeg and .jpg file extensions? Did you know that animated PNGs exist—or did you think only GIFs could be animated? If these questions have crossed your mind, buckle up! The world of image formats is more interesting than you might imagine. While there are many nuances to explore, we’ll start with the basics and gradually delve into more complex topics.
## The Big Two: PNG vs JPEG
When it comes to image formats, PNG and JPEG dominate the digital landscape. They are by far the most commonly used formats, but they have distinct characteristics that make them suitable for different purposes.
### 1. Transparency
One of the major differences between PNG and JPEG lies in their support for transparency. While JPEG does not support transparent pixels, PNG does. Pixels are typically made up of three primary colors: Red, Green, and Blue (RGB). Each color has its own value, which combine to create the final pixel color. However, there is also something called an alpha channel, which determines the transparency or opacity of a pixel. PNG supports this fourth channel, allowing for images with transparent backgrounds or partially visible elements.
### 2. Compression
Another key difference between PNG and JPEG is their compression methods. JPEG uses lossy compression, meaning that some data is lost during the compression process to reduce file size. This makes JPEG files smaller but can result in a slight degradation of image quality if the compression is too aggressive. On the other hand, PNG employs lossless compression, which means no data is lost during the compression process. While this results in larger file sizes, it ensures that the image quality remains intact.
### 3. File Size and Use Cases
Due to its lossy compression method, JPEG files are generally smaller than PNG files of the same quality. This makes JPEG ideal for images where file size is a concern, such as web graphics or photographs. However, because PNG supports transparency and lossless compression, it is often preferred for logos, icons, and other images where quality and transparency are crucial.
## Exploring Other Formats: TIFF and WebP
While PNG and JPEG are the most common image formats, there are other formats worth mentioning. TIFF (Tagged Image File Format) is widely used in photography and graphic design due to its high-quality compression and support for layers and transparencies. However, TIFF files can become quite large, making them less practical for web use.
Another format worth exploring is WebP, developed by Google as an alternative to JPEG. WebP offers better compression than JPEG while maintaining comparable image quality. This makes it a great choice for web developers looking to reduce file sizes without compromising visual fidelity.
## Animated PNGs: A Lesser-Known Feature
Did you know that PNGs can be animated? While GIFs are the most well-known format for animations, PNG actually supports multi-frame animations as well. Animated PNGs (APNGs) offer several advantages over GIFs, including better image quality and smaller file sizes. However, not all browsers fully support APNGs, which has limited their adoption.
## Conclusion
The world of image formats is vast and varied, with each format offering unique features and benefits. While JPEG and PNG are the most commonly used formats, there are other options like TIFF and WebP that cater to specific needs. Understanding the differences between these formats—such as support for transparency, compression methods, and file size trade-offs—can help you make informed decisions when choosing the right format for your projects.
So next time you’re working on an image, whether it’s a photograph, a logo, or an animation, take a moment to consider which format will best serve your needs. And if animated PNGs pique your interest, don’t be afraid to explore their potential in your creative projects!
"WEBVTTKind: captionsLanguage: enAre you mildly curious about the differencesbetween common image formats like PNG andJPEG or even the dreaded WebP format?Or maybe you're wondering if there's a differencebetween the .jpeg and .jpg file extension.And maybe you're wondering about animatedPNGs.Did you even know that, or did you only thinkGIFs could be animated?Well buckle up because the differences aremore interesting than you may think.But you can relax.I'm going to go over the major points firstand then gradually build up to some of themore complicated stuff.We can start off with the big two formatsPNG and JPEG, which I'm going to focus onbecause they are by far the most common.But I can also touch on other formats likeTIFF and also WebP, which you may not be familiarwith but probably come across every day onthe web.We can start off with the differences betweenPNG and JPEG and there are three major maindifferences in my opinion.And I would say that PNG is superior to JPEGin almost every way except for one.And some of you may be able to guess whatthat is already.The first major difference has to do withtransparency.So JPEG does not support transparent pixelswhereas 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 themtogether which results in the final sum pixelcolor.And actually there can also be what's calledan alpha channel, which has the transparencyor opacity of the pixel, and PNG does supportthis fourth \"channel\" it's called.And the other three colors RGB are also channels.So for example, if the alpha channel for aparticular pixel has a value of zero, thatmeans that pixel will be invisible.And then if the alpha channel is 100, it'sfully opaque and you can also have partiallytransparent as well.But again on the contrary JPEG does not supportthis.So every pixel has to be opaque.Alright now the next major difference betweenPNG and JPEG is the type of compression supported.PNG supports what's called lossless compressionand JPEG is all lossy compression.Lossless compression you could probably imagine,it just means that you're compressing theimage 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 thatour brains apparently don't care about inseeing the overall image and making a differencewhich means that some of that informationis lost, but it's the non-important informationwhich makes you able to really compress theimage quite a bit more than you can with anykind of lossless compression.And you may remember from before I mentionedthat JPEG is superior in one aspect and thatis file size.With PNG you can compress it, but it's notgoing to be compressed very much and withJPEG you can compress it really as much asyou want.So in most cases if you save a PNG file, itwill save it with either no compression atall and it's still lossless, or a losslesscompression.There is a way to save it with lossy compressionas a PNG, but from my understanding, it'sreally not standard.So you retain all the information but at thecost of larger file size.And actually in a lot of cases depending onthe level of JPEG compression, which I'lltalk about in a minute, you really can't eventell the difference between a PNG and a highquality compressed JPEG.It's not going to be as small as a more compressedJPEG, but it's probably going to be smallerthan the PNG because JPEG compression is actuallyvery good.Now the third major difference between PNGand JPEG is what's called the bit depth.You heard me mention before the channels ofcolors, rGB for example.And you can have more levels of informationin each channel for a particular pixel dependingon the bit depth.Which effectively just ends up determiningthe number of shades of the color for eachchannel.And if you have an 8-bit image, for example,which usually means 8 bits per channel, thatwould be 256 possible shades for each channel.So you have 256 possible shades of green,red, and blue all going from black to thepure red, green, or blue.And with that you multiply the three 256 numberstogether, which gives you around 16 milliontotal possible colors you can describe with8 bits per channel or 24 bits overall.So knowing that I can tell you that JPEG goesup to 8 bits, or around the 16 million colors,which actually is not that bad because it'sbelieved that the human eye can only distinguishbetween around 10 million different colors.Though it is a bit more nuanced than thatand I'll get to that in a second.Though also a majority of consumer monitorsfor 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 bitslike if you have one that supports HDR.Now PNG on the other hand goes up to a maximumof 16 bits per channel, which ends up beingaround 65,000 possible shades per color channel.And that ends up being around 231 trillionpossible colors it can display.Now you might be wondering why if the humaneye can only distinguish 10 million colors,why bother going above 8 bit?And the answer is well, the 10 million colornumber is not as straightforward as that.First, it's an estimate.Also, the colors that the human eye can seeare not evenly distributed, like the colorsa monitor can display.For example, you may know that the human eyeis more sensitive to green colors than others.So it may actually be able to distinguishmore shades of green than an 8-bit image canshow.Also, the brain interprets brightness differentlythan it does color.So you may be able to show someone two colorsback to back that are very similar and youwon't be able to tell the difference.But if you show them side by side, the brightnessdifference will be very obvious, even if youcouldn't tell before.Another big reason you would go above 8 bits,especially if you're capturing an image likewith a camera, which usually capture about12 bits raw, is because if you go to editan image, manipulate it, raise the brightness,change the saturation and stuff, then you'regoing to start to really notice issues inlower bits.There's not a lot of reserve information,you can think of it like.So if you're just purely capturing an imagethat you're not going to edit at all, youprobably won't be able to notice between a12-bit image and an 8-bit image.But if you start brightening things up andthere's not a lot of shades at the lower endand you try to brighten them up, it's goingto start to look blotchy.Whereas if you have a whole bunch of shades,then if you brighten them, it's still goingto look more like a gradient.And this is actually called banding and youmay actually notice it in pictures that areheavily compressed because it may have gottenrid of a lot of those shades or combined them.So the difference between them appears biggerthan originally.So those are the major differences, but nowI can get into some more advanced stuff.And first we can talk about more details aboutJPEG.And the first thing I can mention is thatthe difference between .jpg and .jpeg is there'sno difference.You can use either.Basically .jpg was just created because somereally old file systems only supported three-letterfile extensions.Another thing is that you can vary the compressionamount, called the quality of the JPEG imagequite a bit.You can go from 0% quality, which is the mostcompression, 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% qualitylooks 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 actuallyit surprisingly looks kind of similar to theoriginal.Yeah, if you zoom in, it looks really bad.But if you zoom all the way out, you can stillsee what's going on in the image overall.And if you're curious, some image viewer softwarecan tell you the actual exact percentage ofquality.For example, IrfanView, I think that's howyou pronounce it.If you click the little info icon, it'll showyou stuff like the JPEG image quality percentage.And also if it uses something called chromasubsampling, which is a type of compressionthat removes certain amounts of color information,but keeps the brightness information becauseagain, the human eye is more sensitive tobrightness than color in some situations.So anyway, that is an additional optionalthing for compression.In addition to the quality, you can also chooseto do chroma subsampling.Though a lot of programs, they decide thisfor you.For example, I noticed if you save a imagefrom Microsoft Paint, it seems to be in the90s of percentage and it does enable chromasubsampling.There are also alternative file extensionsfor JPEG.For example JFIF, which you may have neverseen before, though some websites like Twitteractually occasionally for some reason willsave a JPEG file as a JFIF file, that is thesame thing under the hood effectively.Technically JFIF is like a more basic bare-bonesversion of JPEG, but usually they're the same.So now I can talk about more about PNG andits compression.So PNG, even though it's lossless, it doeshave optional compression levels from 0 to9.So a compression level of 0 would be no compressionand it would be the fastest to save but thelargest file.On the other hand, a compression level of9 would take a while to save because it hasto calculate the compression, but it wouldbe slightly smaller and in all cases, it'slossless.That's why it takes longer to save the highercompression because it has to do a lot morecalculations instead of just discarding datalike JPEG does.Though even at the max compression, the filesize isn't all that smaller than even lowestcompression, maybe like 10 to 15%.I also need to talk about though how PNG hasa few different options for how it can savecolors.So it can do even grayscale or what's calledindexed color and also TrueColor.The TrueColor mode is not really anythingspecial.It's like the normal way you would expectan image file to be saved where each pixelhas an RGB value and it's going to have adifferent number of shades depending on whetherit's 8 bits up to 16 bits.We already talked about that.But with the indexed color mode, it actuallyuses a palette system.So it looks at basically the 256 most commoncolors or kind of like an average for a lotof them and only uses those in the resultingimage and instead of each pixel being an RGBvalue, it's just an index that refers to whichof those 256 colors to put there.So obviously that is going to result in amuch smaller, but also much lower qualityimage.So this is actually a thing that I didn'trealize in Photoshop.It has an option for \"Smaller File 8-bit\"PNG, but this is not actually referring to8 bits per channel, but rather an 8-bit overallimage, which just means 256 colors.And this is definitely something you wantto know because if you save a PNG file withthis indexed or palette color mode, it's goingto only have 256 colors compared to like the16 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 youuse that special indexed mode, in which caseit's going to be very much lossy.Also with PNGs, I did mention animated PNGs,which are just part of the PNG spec, thoughthey're kind of rarely used and they're prettysimple under the hood.They're basically just a stack of PNG imagesthat are listed as frames and for each frame,it lists how long to display each frame andthat's it.It just like shows them in order.So really nothing special.I don't believe it has any kind of interframecompression like you have with something likean MPEG video codec.And also an animated PNG can have either aPNG extension like normal or an APNG extension.Now next, there's the WebP image format, whichstands for Web Picture.This was actually created by Google as a wayto kind of create a new generation of imageformats to overall lower the bandwidth usedby the internet because images take up a lotof space relatively.So if you can reduce the bandwidth used byimages even a little bit by compressing themmore, that can make a big difference overall.And WebP does actually end up being prettygood.You can get lossless compression comparedto a PNG from like 28 to 45% better compressiondepending on how much compressed the originalPNG was that you're comparing it to.The problem is that support for WebP filesis very slim.Yes, pretty much every web browser supportsit, but like Windows doesn't support it andmost operating systems don't.So it really sucks if you go to save an imageand then you realize it downloaded in thisstupid WebP format.It's such a pain, which is why it gets sucha bad rep because nobody really likes them.It's annoying, which I definitely can relateto.And finally, I can touch on the TIFF imageformat, which stands for Tag Image File Format.And TIFF can have either TIF or TIFF as thefile extension, just like JPEG, it's the samething for both.And TIFF is actually a very versatile imageformat.It can kind of containerize a lot of differentimage data.For example, you can have a TIFF file thathas just JPEG data under the hood or you canalso have uncompressed data or lossy compressionor lossless compression, whatever you wantreally.Because of this in the past, it was kind ofjokingly referred to as \"thousands of incompatiblefile formats\" as the extension, but thereis a so-called baseline spec of TIFF thatall image readers that can display TIFF mustsupport.So I believe most of the time if you're savingan image as TIFF, it's going to stick to that.I find that TIFF images are usually used wherepreserving the quality of the original imageis the top priority.So if you're doing archiving, you can saveTIFF to unrestricted amount of bits per channel,whereas even PNG only goes up to 16.I believe it's unrestricted on TIFF, evenif I don't know if there's any cameras thatsupport more than that anyway.Also another thing is that TIFF is actuallyso versatile that you can make edits to aTIFF file and store those edits in the fileitself while not affecting the original.So you can save a TIFF file with edits thatare completely reversible because it basicallyjust saves the edits in addition to the originalimage if you want to reverse it later.So a lot of times you will see photographersuse TIFF files, or again for archiving justto have like the maximum quality.So typically if you do see a TIFF file onthe 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 withtransparency, then you need to use PNG.That is the simple answer, don't use JPEG.If an image has no transparency, then youcould probably either go with both.Assuming that the JPEG compression is likea higher quality, then you probably won'tbe able to notice a difference unless youlike maybe really zoom in or start editingstuff.And in general, you're going to be able toget a way smaller file with JPEG than youwill with PNG.But if you do want to be sure that you'remaintaining the full quality of the image,then PNG is the way to go.Though of course just make sure it's not savingas that paletted indexed color option.I don't think many programs do and it wouldbe very obvious if you zoomed in.It would be pretty obviousthere's not many colors in there.But still probably worth knowing just in casefor some weird reason you see a rare programthat does do that, then at least you'll knowwhy.So anyway, if you enjoyed this video, foundit helpful, be sure to give it a giant thumbsup for the YouTube algorithm.And if I missed anything, I'm sure you guyswill let me know down in the comments if youthink I should have mentioned something elseimportant.If you want to keep watching, the next videoI'd recommend is where I was talking aboutsome advanced Windows features that you shouldat least know about.So I'll put that link right there.And if you want to subscribe, I try to makevideos about twice a week, usually Wednesdayand Saturday.So hopefully I'll see you in the next videoand thanks for watching.\n"
