STOP Using JPEG? JPEG vs PNG in Depth!

jpeg or png let me share with you something that's going to blow your mind have a look at this so here we have a solid color adjustment layer in gray and on top of that we have a radial gradient i'm not sure how youtube is going to compress it but there is some banding but then again this is a very high quality image we're going to get back to that later but for right now just look at this now we're gonna save a copy of this in jpeg and png so let's do that by going to file save a copy and let's save a jpeg version all right grayscale copy dot jpg let's keep the quality maximum and hit ok similarly let's go to file save a copy again and this time let's save it in png there you go let's save it and again we'll save a large file size and hit ok now let's open both of these versions jpeg and png in photoshop and see what happens so let's drag it and drop it at the top both are separate documents so now we are working with jpeg right and if we create a curves adjustment layer see what happens so i'm going to make the brights brighter just like this and the darks darker as you can see the branding sorry banding exaggerates exaggerate i don't know how to pronounce it i think it exaggerates anyway have a look it's so clear and there's so much banning in it however if you copy the same curves adjustment layer by selecting this adjustment layer and pressing ctrl or command c to copy it and let's come back to the png version and then you paste it have a look at it my friend see does that mean jpeg is bad does that mean that you should always use png well that's what the video is all about in this video we're going to talk about the pros and cons of both jpeg and png when to use what why all of this is happening and many other interesting concepts at the end i have a bonus surprise for you so without any further ado let's get started by the way that bonus might be a little boring but it's very important [Music] back in the mystical mysterious magical and brilliant world of photoshop if you want to go ahead and download any of the photos or assets to follow along everything is downloadable by using the link in the description now first of all let's talk about the size and image quality let's start by analyzing illustrations or flat graphics not real photographs by flat graphics or illustration i mean the photos where you can count the number of colors for instance have a look at this illustration you can count there is brown there is yellow there is white so you can count the number of colors in a real photograph it's just impossible they're like 16 million colors so let's understand how the size and image quality comes into play in these kinds of flat illustrations or graphics now when we go to file export export as i'm choosing this so that we can clearly see the difference between the size first of all let's choose png now let's zoom in about 800 so that you can clearly see what is happening in there now with png every color seems to be in order everything seems to be in place we have zoomed in 800 and then we are seeing some pixels along the edge there's no artifacts so this image quality is just perfect keep in mind png is lost less it does not lose quality as you export it jpeg is lossy so have a look at the size it's 567.2 kb now if you choose jpeg and that too of the highest quality right there here as well you don't see much problems no artifacts and everything just seems to be in order however if you look at the size it's just double right 1.1 mb right there now if we try to match the size to what the png was see what happens so i'm just going to decrease the quality to about very good size is about the same and as soon as you do that have a look at the plethora of artifacts right there even if you go with excellent which is a little higher size 633 you still see these artifacts now with jpeg even with great you might see some artifacts here and there if you look closely right now let's cancel it and let me show you one more example but with png be assured that there's going to be none because it is lossless all right let's see this example this is as you know pixel perfect logo and let's go to file export and export as now some of you are wondering why should i use export as or when should i use save as or save a copy and whatnot we have videos about that you can check that up in the description with png have a look at the size it's 70 kb and with jpeg have a look at the greatest size it's 167. it's just more than double right here and there's of course the chance of losing details as it is lossy now let's go to png back again and in this image we don't need transparency so if you just check that off have a look the size even decreases now it's three times smaller than jpeg by now we have confirmed that in graphics where you can just count the number of colors in those cases png's hands down better but what about photographs like real photographs and in this case i've chosen this photograph purposefully because first of all it has a lot of colors it's a real photograph and it will be interesting to see how png handles it so let's go to file export export as now if we try to save it in png have a look it's still processing it's taking time and have a look at the size my friend it's 28.6 mb it's not even that big of an image now let's zoom in and let's focus on an area now keep in mind there's no problem with image quality it's just the size is crazy now let's try jpeg right now it is that good let's keep it at the best quality right here and just have a look at the size it is 9.5 that one was 28 like three times wow in images like this jpeg wins now you might be wondering there's an option for a smaller size with png right why can't we choose that well if you go back to png there's an option for a smaller file if you click on that see what happens see it's still processing we're going to have to wait for that so if we check that still processing now have a look at the colors it's finally done it is just absolutely unworkable and the interesting part here is that even with the smaller file the size is just as same as the highest quality jpeg now when it comes to flat graphics even if you check smaller file you won't notice any of it unless you have like super complex colors zoom in you won't notice any of it and the size goes even lower so it's like 180 if you choose jpeg highest quality it's going to be 1.1 see the difference 180 kb 1.1 mb right now if you're feeling confused don't worry we got you covered we're going to sum it up later but for right now let's move on to the next topic and that is banding and bits remember this document that i showed you in the beginning of the video just as a reminder we have a solid color adjustment layer and on top of that we just have a simple radial gradient now here's an interesting fact that i didn't show you before and that is if you go to image mode you would notice that this document is 16 bits per channel now if i go ahead and create a curves adjustment layer and if i try to do anything like increase the contrast have a look you don't see any banding right here however if i do this with an 8 bit document let's go to image mode and let's change this to 8 bits and now when you do it you would notice a lot of banding the more you increase the contrast the more clearly defined these bandings get it almost looks like a design so that is why i recommend working in 16 bits even if you export it in 8-bit that's fine but work in 16-bit so that you can minimize the effects of all of these adjustments combining together to potentially create banding and other artifacts we don't want that so that is why work in 16 bits if you're working on a very complex composite i recommend it if it's a simple work it's not necessary but this is something to keep in mind so let's change it back to 16 bit and at this point we don't need this curves now we did already save a copy of this image in both jpeg and png in the beginning of the video besides the banding difference there was one more difference let me share that with you on this my friend is going to be the missing link of how all of this is working so let's open both of these back into photoshop now as you already know if you create a curves adjustment layer here with the jpeg you do see the banding but if you do the same with the png you don't see the banding why is it can you guess i just already shared this with you have you guessed it yet no yes either way congratulations you want to learn more that's why you're watching this video alright so with png if you go to image mode it is 16 bit still but with jpeg if you go to image mode it is converted to 8 bit what does that tell you no matter what you do this is a fact as of recording this video jpeg does not support 16-bit so that is one advantage very big advantage for png file format coming to the most important differentiator between png and jpeg and you guys already know this and that is png supports transparency and jpeg does not png not only supports transparency but it also supports the amount of transparency or in other words opacity so let's take a look so here i have a simple logo and a text on a transparent background so if you go to file export and export as if you choose png see the background is still gone transparent right you can choose not to have transparency right here but what is the point that's why we are using png after all now if you choose jpeg there is no way you can have transparent background there is one way but that is a very peculiar way and that's not really a way and there's a very interesting video about it that i highly recommend watching that's some complex stuff but for right now jpeg just keep in mind jpeg does not support transparency so i'm going to save both a jpeg and a png version and share with you the struggles of not having a transparent background so this is just a random image i clicked with my phone when i was in dubai so now i'm gonna paste both of these just place it on this image so this is the transparent one and this is the jpeg one so that's png at the top and that's jpeg at the bottom so if i wanted to do branding i can just place it right here the background is transparent it's nice if i want to turn it white i can just press ctrl or command i or the other way is just simply create a solid color adjustment layer choose whatever color you want hit okay and hold the alt k the option key and click on the line between these two layers now you can change the color of that logo or text or whatever or element to whatever you want right here all right now with this it comes with the background so you need to use some techniques or blend modes or stuff to get the background over and then change the color of the text and the logo it's very complicated you already know the struggles and the problems and you probably have seen this meme online just a quick fact png stands for portable network graphics and some of you already know this jpeg stands for joint photographic experts group big disclaimer major disclaimer in this video we're just talking about the digital users web users not printing users that's a whole different genre and there are other formats and options that you should consider when it comes to printing like tiff it's it's a completely different thing and i highly recommend checking out glenn dewis i'm not a printer guy i'm a digital guy i can answer digital questions but when it comes to printing i'm not an expert please check out glenn dewis he's the master of that subject so he has several videos on printing wherever somebody comes to me and asking about what settings to choose for printing i would tell them but i would also highly recommend watching his videos so that you have a better understanding of the whole printing game coming to the bonus of this video and this my friend is your gift might be a boring gift but this guide is going to help you so this is a simple chart to decide what to use when jpg or png first of all you need to ask yourself do you have a real photograph taken with a camera and not digitally created stuff if you have a real photograph then it goes further but if you have a flat illustration that you digitally created or maybe a logo or something it can be comics line drawing or anything where you can count the number of colors in those cases simply go for png if it's a real photograph do you want transparency so you might want to put it of yourself with a transparent background so that you can place it anywhere maybe you're creating a poster maybe you're creating a resume and you want to place your portrait on it without the existing background there so do you want transparency if you want transparency yes then definitely go for png because for jpeg transparency is going to go away now if you do not want transparency or your platform does not support transparency for instance if you're uploading to facebook or instagram it does not support transparency of course so in that case move a little forward and ask yourself this question do you need 16 bit or are you concerned about banding if you're concerned about banding we just showed in one example and you can use 16 bit then of course go for png otherwise let's say your platform doesn't even support 16-bit or converts whatever you upload it to jpeg for example if you upload anything to facebook it's going to convert it to jpeg when you try to download it you'll see that it's already jpeg in that case you have no choice but to use jpeg it is always better that you do the compression than letting instagram or facebook do it because it can result in something you might not want when you're doing the compression you have lots of controls so that is why go with jpeg for better quality now i uploaded this picture to flickr in 16 bit now most monitors cannot show 16 bit and maybe your web browser cannot show 16 bit but it's still 16 bit because if you download it let's download the original size and if you bring it to photoshop have a look it is 16 bit also you can go to image mode and here as well you can see it's still 16 bit so this chart briefly summarizes what we discussed in this video and use this as a guiding tool to help you decide what to use when i hope this video helped you and if it did make sure to give us a like and also don't forget to subscribe and not just subscribe ring the bell so that you my friend don't miss any other feature tips tricks or tutorials i would like to take this moment to thank all these nice and amazing people for supporting picks and perfect on patreon and helping keep pixelm perfect free for everybody forever thank you so much for all your support thank you for watching i'll see you in my next one till then stay tuned and make sure that you keep creating [Music] you

Channel: PiXimperfect

Views: 1,914,231

Keywords: jpeg, png, jpg, jpeg vs png, best image format, photoshop, adobe, tutorial, illustration, graphic, photo, lossy, lossless, color depth, 8 bit, 16 bit, transparancy, banding, piximperfect, unmesh dinda

Id: 0jNIYWBDULI

Length: 14min 29sec (869 seconds)

Published: Fri Feb 11 2022