Are You Using the WRONG Image Format?

Depending on the situation, there IS a correct answer.
⇒ Become a channel member for special emojis, early videos, and more! Check it out here: kzbin.infojoin
▼ Time Stamps: ▼
0:00 - Intro
0:46 - PNG vs JPEG: Main
1:03 - Transparency
1:55 - Lossless vs Lossy
3:35 - Max Bit-Depth
7:03 - Jpeg More Details
9:22 - PNG More Details
11:42 - Animated PNG
12:17 - WebP
13:18 - TIFF
15:00 - Which to Use?
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Merch ⇨ teespring.com/stores/thiojoe
⇨ / thiojoe
⇨ / thiojoe
⇨ / thiojoetv
My Gear & Equipment ⇨ kit.co/ThioJoe
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

[@ThioJoe]

This video took a lot longer to make than I anticipated so please like for the algorithm Also some additional notes / corrections: • My information about support for webp files was outdated. It seems that Windows itself does indeed support them, including the default photos app. Though many individual apps may not. • It seems that technically JPEG has an extension to the specification that supports 12-bit that was added in around 2014, but is almost never used. • If you like the wallpaper I showed, you can get it here for free, I made these myself: thiojoe.art/

[@jodffgaming08]

Love you bro

[@_SJ]

Of course 🙂

[@imnotusingmyrealname4566]

damn that's a sick emoji

[@BfdiFan567]

Thats ok

[@UltraVoidPlaysRoblox]

good thing you made this video because no many people know about these formats

[@DiscoLizzard]

It's also worth mentioning that PNG is the better option over JPEG for non-photo images (info-graphics, diagrams, digital art, etc.) because of the way it stores and displays the edges of objects within the image. If you save a logo as a JPEG for example, the edges of said logo won't look as good because JPEG and it's compression algorithm are generally meant for photos.

[@neutronpcxt372]

Note that with newer formats(JXL), it is far less of an issue because of stronger detail preservation tools and the lack of chroma subsampling(the main reason for poor edge performance for graphics).

[@Sinthoras155]

I use JPEG only for photos. For other stuff its crap

[@regd809]

Yes I found this out when I was embedding a QR code into an image. What had been the pure white of the graphic now looked grubby as artefacts were introduced when saved as JPEG. PNG was better for that job.

[@DiscoLizzard]

@@neutronpcxt372 yeah true

[@guitaekm]

​@@SUPER7Xno, with the fourier transform

[@RobinGrether]

The indexed color mode of PNG is not meant to be lossy. It is actually meant to be used for rasterized logos, emblems, icons, ... which typically contain only a few different colors and shades thereof anyway. For these types of images the indexed mode is not lossy, but just saves a massive amount of storage.

[@moonasha]

yeah, when using something with many pixels of the same color next to each other, png is king

[@anteshell]

Literally no image format is meant to be lossy. They are meant to be compact with as little degradation in quality as possible. Those are two completely different things.

[@UnconventionalReasoning]

@@anteshell what is your definition of "lossy"?

[@anteshell]

@@UnconventionalReasoning What is your ability to understand what you're reading? Having a goal to make a lossy picture is completely different than having a goal compress an image. Two. Different. Things. If you fail to understand that one simple concept, it will be utterly useless to talk with you about this.

[@UnconventionalReasoning]

@@anteshell Image compression can be lossless or lossy. The jpeg format was created with a parameter for how lossy it would be. So yes, the jpeg format is *meant* to be lossy, giving the user control over how lossy they can accept. It can be presented as the compression level, the file size percentage, or the lossiness, but there is a single effect, removing the high frequency data after the blocked DFT.

[@MegaAlterSchwede]

The takeaway should be: PNG - for graphics (like block diagrams, charts, icons, ...) and transparency JPG - for photographic images TIFF - typically used for scannned images (because of higher bitrates and meta-information like resolution) or if you need more channels than just RGB (e.g. CMYK). SVG - for scalable graphics (PNG has fixed pixels, SVG has drawing commands inside, it is a so called vector format) GIF - mainly used for animations, because it has only indexed color palette. Is also useful for icons. It also has transparency, but only on/off (no half-translucancy)

[@surject]

..and 8bit PNG for web graphics up to 256 colors that don't need an alpha channel. Much smaller file size.

[@Stefonius]

And don't send JPG, PNG or GIF to your print provider. We don't like it.

[@MegaAlterSchwede]

@@Stefonius I agree. Send TIFF (in good resolution) or PDF. On the other hand: Do you know of good PDF creators for photos including profiles apart from Adobe Software? Something like PDF/X?

[@MichaelMoore99]

​@@StefoniusPNG wasn't TOO bad when I worked at the print shop. Not the best (like PDF and TIFF) but certainly passable. JPG and GIF were flat out, though.

[@Speed001]

Thanks for saving 16 minutes

[@KuraiNoOni]

When creating pixel art or sprites for retro video games, indexed pngs are actually the way to go, as long as the final image does not exceed the 256 color limit, since the amount of detail can be perfectly preserved that way, especially with small image sizes.

[@GeoNeilUK]

Pixel art and retro computers always had indexed pallettes. The original Amiga had a maximum of 32 colours selectable from a pallette of 4096 and 8 bit machines would have fixed pallettes of 4 or 8 colours.

[@pfcrow]

@@GeoNeilUK The Atari 8-bits had a 256 color pallette. Normally you could only use four colors for graphics, plus four others for the sprites, but you could use per-scan-line interrupts to change the selections on each line, or count cycles as it draws across the line to change the colors mid-line. The former trick was relatively simple and more common.

[@SandroSmith]

TIFF also can have multiple images stored inside. Just like pages in PDF

[@TheExileFox]

TGA too

[@Wolfnimations]

EXR as well

[@Shadoufang]

@@redneckcommie6368 Yeah that's the point! They contain multiple films in that format 😂

[@Shadoufang]

I forgot about this one!

[@MrHerbalite]

It seems to me, that discussion is mainly about images on the internet. TIFF, TGA are mostly not supported by any browser. Also most users cannot be bothered to install plug-ins. Another reason not to use TIFF is because it has no default setting on size in even some popular image processing software. So when designing a web page some image format's are not very suitable for the job. Otherwise TIFF and others are avaliable option.

[@ManthaarJanyaro]

There are also image formats with vector data, which stores images mathematically, like SVG, AI, and EMF...

[@thepenguin9]

There are, but the vast majority of images will be in raster format. Those who need vector will know which format they need, as typically the level of experience required for vector means you'll already know what format you need to save in

[@fishbone0]

@@thepenguin9 that's not really true. A lot of images that should have been vectors is done as raster. Making vector graphics is not really harder to make either.

[@thepenguin9]

@@fishbone0 if you're working in raster, it's not easy to convert to vector For example, if you're drawing on a digital canvas that let's you edit each individual pixel, you can't just simply save it to svg and have it be infinitely scalable A lot of logos and similar should be done in vector I agree. But if you used raster to make it you're gonna have to redo the entire thing to be vector. It's why most companies do use svg's or similar and then export at the needed resolution. But there is a marked difference as to how to do vector, you don't need to know bezier to draw in raster

[@JuanPabloRojasW]

Burt those file format as vector based formats. not raster based formats, meaning that if the file is inserted in a program and enlarged, since everything runs in mathematical calculations, the object does not get distorted or "exploded" when enlarged.

[@teeing9355]

EPS?

[@videolabguy]

Great video! Thank you for the excellent layman's level descriptions. Back in the mid to late 1980s, when I built my first video frame grabber, I used TIF format because it was easiest to implement in assembly language on assembly language on my Z80 S-100 computer. I could save 18 65KB monochrome images on one 8 inch floppy! This was when there were NO images possible on 99% of the computer terminals in general use. I actually contacted the Aldus corporation, by land line telephone!, spoke with the original authors of TIF, and the fellow there actually talked me through all 18 BYTES(!) of the header format. I also chose TIF because the JPG working group wanted actual money for a license. The nerve! Besides, JPG was extremely complicated to me back then. Essentially alien technology for all intents and purpose. Kind of still is, I just don't have to code it myself any more. TIF worked perfectly for my 256 x 256 x 256 (65K x 256 brightness levels monochrome). The story of my first video frame grabber is fantastic. I need to write an updated article about THAT. Those were what we old coots, codgers and geezers called, "the good old days".

[@InssiAjaton]

Screen captures from my digital storage oscilloscope can be either .jpg or .png (for practical purposes). I had used the jpg choice until mostly by accident I tried the png and was immediately "sold" for that format. The scope traces and annotations essentially jumped up, crisp and clear. i understand the reason was that there really were no photo-like gradual color changes on the scope screen to encode. The result was no bigger files, but noticeably faster rendition.

[@RaymondBarbour]

You didn't mention that you shouldn't use JPEG for line and text pictures like logos and screenshots at it's optimised for photographs not large areas of the same colour. Using JPEG for these images will result in horrible artefacts and PNG files will be smaller too as it handles these types of images well.

[@TheExileFox]

this is true but it the compression ratio gonna make or break the image regardless

[@johnbash-on-ger]

He should have talked about that in the video.

[@QnjtGWonQNqVsbYyzjx4]

For monochrome black and white text, might as well as use the indexed mode. It will be much smaller than JPEG anyway.

[@CaptainKremmen]

Logos and large areas of the same colour: Just use GIF.

[@MarkWhich]

It's worse choice for any image that needs to be edited.

[@ruudygh]

Another important feature of Tiff is that it supports multiple layers.

[@MattiBlume]

And multiple pages.

[@ZSchrink]

My introduction to .tiff was a super old (90s era) flat bed scanner. I just always assumed it was so old that it didn't really matter anymore. Knowing it saved all of the edits with it makes a lot of sense! Thanks for teaching me something today!

[@green-lean-espeon]

Indexed mode is actually REALLY GOOD for pixel art. I saw a pixel art that uses indexed mode with only 16 palettes and a bit depth of 4 and it was literally the exact same image as the original file before it was indexed.

[@JuanPabloRojasW]

Hi ThioJoe, 13:20 regarding the TIFF file format, it is super useful for print and production, since it supports: Layers, vectors for silhouetting, CMYK color space, and it is a loseless format. also useful for the end delivery to the client or the press printing company to what is known as "Camera Ready" format. any press printing company would ask for a TIFF file in CMYK, at 300 DPI (you left that topic out of the video: resolution DPI= Dots Per Inch) 72DPI is screen / video resolution, 150 DPI is home printer resolution, 300 DPI (and up) is for press printing resolution, and for canvas printing (which sometimes goes up to 1200 DPI) The hardware that process this images to the plotter is called a RIP or a "Raster Image Processor" Overall Great explanation of the differences and the color depth. Thanks for sharing this video.

[@laurendoe168]

When it comes to DPI for screen/video resolution - this is HIGHLY dependent upon screen size. A 3840x2160 image has different DPI on a 15" monitor as opposed to a 40" monitor.

[@MichaelMoore99]

Can confirm the TIFF thing. Source: worked at a print shop for 5 years.

[@TheEudaemonicPlague]

The last time any of my home printers printed at 150 DPI or lower, was in the 90s on a dot matrix printer, or a cheap thermal printer. I still have a B&W laser printer that only does 300 DPI, but I don't even have the hardware to connect it to a modern computer. What you're saying was certainly true twenty years ago, but I have to question its applicability to current standards.

[@steffl27]

Actually the measurement DPI only exists for printers working with dots. For monitors PPI (pixels per inch is correct. Also the common rule of thumb from the 90s with the 72ppi for screens no longer holds true. Especially for mobile devices the PPI is usually well above 100. But also for regular PC monitors I think the lower end would be around 90ppi.

[@laurendoe168]

@@steffl27 I just worked it out for my 4k 41" monitor. The screen is 35.7" x 20.1" and displays 3840 x 2169 pixels. This works out to 107 pixels per inch, so yeah 90 ppi is close. Smaller 4k screens would have a higher ppi, and larger 4k screens would have lower.

[@Petch85]

Things you could have mentioned. 1. jpg is super good for photos when you do not what to edit them later. 2. png is better if you have pixel art, blocks of the same color, graphs, text and so on. You can get smaller files with much better quality. 3. png is super when 3D rendering animations (there are other formats that are better, but compared to jpeg), when you have rendered all your frames you can then combine them to a video file, and used video codecs for compressing. That way you only loss data at the final compression step. 4. png quality steps and file size are very non linear and depends a lot on the image. Sometime you get 10% file size at set 2 and 9% at step 9. Other times you get 70% at step 2 and 10% at step 9. For one file this do not matter that much, but for many files it might be relevant to choose a compromise between file size and CPU time. 5. the jpg algorithm is quite beautiful thus if you are interested look up some videos about it on youtube.

[@xxxLesy]

Paletted PNG 8 can be handy when dealing with simple (non-gradiented) logos. And even more so with favicons (website icons).

[@HerbaMachina]

JPEG recompresses everytime you copy it leading to image corruption and compression artifacts, it's a terrible storage medium. PNG is the superior image format period.

[@KloudAlpha]

did you even watch the video?? the mentioned #1, #2 and #4 on your list

[@SuprousOxide]

@@HerbaMachina Not every time you copy. Just every time you reencode by it saving it from some form of editing software. As long as you go back to a source that wasn't lossily compressed every time you edit the image, you're fine.

[@talkashie]

I used indexed color mode on PNG a lot. It's a really nice feature for digital drawings that only have a set amount of colors anyways.

[@RobinsonTechnologies]

Good rundown. One interesting thing is that .png is roughly equivalent in size and function to a zipped bmp. The reason is because PNG uses a lossless compression algorithm known as DEFLATE, which is also what the ZIP file format uses.

[@ForeverZer0]

Not all DEFLATE is equal though, it is more of a general specification, but the implementation is what matters. Gzip and Zip are DEFLATE implementations, but so is LMZA (i.e. 7zip). These are vastly different in their end results, and. Zlib (what PNG uses) is yet another. These formats all use the same compression algo, but different encoders, so the results can vary greatly. That said, your initial statement is still true, I am not disputing it, am just offering some extra context to what DEFLATE is and the difference between encoders/compression. You are correct, just not for the exact reason you described. Yes, this is pedantic, I apologize :D

[@RobinsonTechnologies]

Hey, good points about DEFLATE implementations. Just a quick fix - LZMA used by 7zip isn't DEFLATE, it's a different beast. Yeah, PNG and ZIP both use zlib's DEFLATE, but the compression can vary 'cause of the data and settings. But overall, you're right, all DEFLATE ain't the same!

[@bennyboy5949]

I still have bitter memories from my childhood about JPEG. I used to make doodles in MS Paint all the time, and they saved as JPEG by default. I always got so upset that my drawings always got blurry and gross after I saved them. I had no idea what a file extension even was, so I never understood why this happened until years after I had already given up on scribbling. I still to this day hold a grudge against whatever engineer at Microsoft decided to make JPEG the default image format for Paint.

[@TheExileFox]

that is funny because for a very long time BMP was the default. (which is pretty much the raw data without compression, so files get huge quickly)

[@World_of_OSes]

In Windows XP and earlier Paint saves as a bitmap by default. In Windows Vista Paint saves as a JPEG by default. In Windows 7 and later Paint saves as a PNG by default.

[@bennyboy5949]

@@World_of_OSes Wow, I really got unlucky growing up with a vista computer. I’m glad they learned their mistake in later versions but I’m still mad that they did it in the first place.

[@I.____.....__...__]

And then there's Twitter saving screenshots of walls of text as JPG. 🤦

[@gblargg]

Ahoy's Four Byte Burger video shows the lengths you can go to restore a pixel image degraded by things like JPEG and printing to paper. Reminded me of your tale. BTW there are tools that can remove the JPEG noise from your image since it wouldn't have been saved in many colors. Possibly just saving it as a palette image with only as many colors as you used originally.

[@guspolly]

TIFF sees a lot of use in the GIS field for georeferenced imagery - it can store the projection, coordinates, and scale of the image in its metadata

[@ailivac]

Also supports more bit depth options and arbitrary numbers of channels - not just grayscale and RGB or even CMYK. So it can work for things like hyperspectral sensors that record more bands.

[@jonr6680]

The thing that blew my mind is that an image data file of say elevation that looks like a map, also contain the data i.e. the heights are represented by the colours. The image IS the data. I guess this has applications in many interpretive images not just optical, such as medical... also radar, sonar, lidar etc.

[@encycl07pedia-]

I used TIFFs a ton for converting my physical books to epubs. It's important to note that you can include text comments in JPGs.

[@gregsmarth3581]

@@jonr6680 Oh Baby! That's it. That's it!

[@pavelperina7629]

That's the problem. TIFF is not image, but container of images. Then images can have way too many formats and compression so all data are sort of application specific. It can store thumbnail, overview image, than images with higher resolution as tiles, but program that will try to read whole 300000x300000 pixels image stored as 300x300 tiles will likely crash due to lack of memory. I know in biology OME-TIFF is used which stores some XML files with images that describe how to interpret them cause it can be a Z-stack (3D) data with many channels and time series or combination. In Geology there are likely many other data depending fro example GPS coordinates and data about camera and gimbal position for aerial photos, information about captured wavelength for various channel, there might be height maps stored as TIFFs or some derived data (map overlay derived from vector data, rainfall map, rate of surface cooling,...)

[@marioysikax]

APNG is so much better from standard GIF files, so even saving similarly 256 color palette animation (GIF doesn't support more), it's going to be much lower filesize, but then you also have option for full color. Altough both are still lossless aka big filesizes, so that's why most websites including Twitter just convert the files to MP4 regardless for lossy compression. With images, JPG is really really really old format, it's like MP3 and nobody should be using either anymore (use AAC or Opus!), but we do because compatibility. Apple is already forcing HEIF on iPhones as photo format and AVIF is open competitor. JPG you save filesize yes, but with newer stuff you save even more filesize while losing less quality. With filesizes, there's tool called Pingo which can crunch filesize of all of these filetypes down even further in seconds. Amazing tool and creator deservers more tips. Also anyone doing digital art, just use PNG. Especially JPG is made with photographs in mind, meaning that even though compression looks OK on lifelike images, if there's any bright colors or contrasty edges, it will look so much worse, on top of this if you post the work on sites, the websites sometimes JPG compress the image regardless, resulting double the compression.

[@jahbini]

Simple, direct, no BS. Excellent info. Great job.

[@kunka592]

I also would have added to the summary: if you're saving screenshots with text and easily-compressible solid colors, PNG is preferable since it will be a small file size and lossless.

[@Liggliluff]

And to even save on storage, you'd have to compress the jpg so much that the grainyness will show

[@gblargg]

Nothing worse than a great greentext story ruined by JPEG artifacts around the text.

[@khandimahn9687]

A couple things to keep in mind - for printing, JPG and TIF can save images in CMYK format. This can make a huge difference, especially in showing on a screen a better representation of what a print will look like. Also, in certain circumstances, PNG can actually be smaller than JPG. If an image has areas of solid, unchanging color, it compresses very well.

[@jj4l]

Png files can have color profile metadata

[@UnknownGamer5K]

Thanks for the information! It's really kind of you spreading useful information among your community

[@samiraperi467]

Fun fact about PNG palettes: "Palette-based images, also known as colormapped or index-color images, use the PLTE chunk and are supported in four pixel depths: 1, 2, 4, and 8 bits, corresponding to a maximum of 2, 4, 16, or 256 palette entries."

[@CTSFanSam]

Yep, pulled a page from the GIF file format. The old VGA days, of 256 color screens used a palette to drive the RGB guns.

[@Sembazuru]

@@CTSFanSam Not surprising that PNG pulled a page (well several) from the GIF file format. When PNG was developed, one of the driving forces for developing it was to get around licensing issues with the compression used in GIF. That's also why the way PNG does animations is very similar to the way GIF does animations. Though, as I recall, animated PNG wasn't in the original spec. The working group was developing MNG as a substitute for animated GIFs. I lost track of their efforts, so I don't know if MNG was totally abandoned, or was rolled into PNG.

[@RenderingUser]

When I do pixel art, I always do indexed colors Really reduces file size by a crap ton

[@billy65bob]

​@@Sembazuru PNG never supported animation officially. There is the MNG format, it was the official sister format that supported animation, but it was quite a complicated format so it never gained traction. And then there was Mozilla's thing, APNG, which for a very long time had no adoption outside of firefox, and arguably still has very poor tooling. It's a very simple format in comparison, as It basically just writes extra IDAT chunks for each additional frame. The only users of APNG I can think of are steam and discord; it's used for the 'stickers' feature in their chats.

[@johnbash-on-ger]

Why didn't they add a future-proofing 16 bit pixel depth option?

[@itskdog]

Tip for the future, try and avoid putting and titles near the bottom of the video frame, as thats where KZbin puts the captions unless you use caption-editing software to specify a manual placement like on TV. It means people have to pause the video and turn off the captions to be able to see the text, which adds an inconvenience for those whobuse them.

[@stephensnell5707]

You prune,the worda at the bottom are a 100% fantastic idea

[@therealfrantux]

You can't accommodate everyone's needs or taste, the captions/titles he wrote are supposed to go where he put them. If you have to use captions (which I do sometimes) you are just gonna have to deal with it (I do when I watch futurama and I want to see their intro joke, and the captions just mess with that line).

[@itskdog]

@@therealfrantux On KZbin, they just go bottom middle if you don't use expensive professional software to specify the position. I was just providing feedback as Joe is trying to be accessible by having proper subtitles, but it could be easily missed that there's an overlap with the video edits. Every creative wants to improve their craft, and I was providing feedback if he wanted to take it on board.

[@xaryop7950]

@@itskdog you can just drag it with your mouse on web? Are you talking about the ios app?

[@itskdog]

@@xaryop7950 not everyone uses a PC to watch KZbin???

[@agaluszka]

Happy to see video where host knows what he is taking about and inserts his heart to make viewers understand staff easier! Thanks

[@BryaStar]

thank you for proper subtitles!! this helps me immensely with being able to properly follow along with the video!

[@ChippWalters]

One thing you didn't mention is that PNG files store gamma information whereas Tiff does not. And, for some this is important as they are different gammas on different operating systems. So that means that a PNG file may look different on a Mac versus Windows. While these differences may be subtle they can cause a concern when trying to match colors from one OS to another.

[@mind_of_a_darkhorse]

Did not know that! Thanks, Chipp! It is not something you usually think about!

[@videolabguy]

Great point! Gamma errors can eat you alive if you are unaware of them. Due to the non linearity, it is impossible for the layman to make out why their image processing is acting so odd.

[@MegaAlterSchwede]

But wouldn't it be even better to include an ICC profile?

[@thomasmaughan4798]

The gamma difference between Mac and PC used to be rather substantial; the result was photos made on Mac show dark on PC, and photos made on PC are washed out on a Mac. Or was it the other way round? Now, both tend to use SRGB colorspace for simple things like JPEGs.

[@morxemplum]

I wish you could talk a bit about JPEG XL, which is supposed to combine the best of both worlds with JPEG and PNG.

[@johnbash-on-ger]

😲👍👍👍

[@borislavdj]

Indexed PNGs are perfect for logos and images in email signatures cause they are significantly smaller and reduce the email sizes. A large number of emails over a long period of time make a huge difference.

[@potawatomi100]

Outstanding video and expert delivery.

[@micnubinub]

Don't forget to mention the differences with handling text or vector images

[@Sembazuru]

The indexed format of PNG can be useful for getting a smaller file size with non-photo pictures (specifically pictures that don't have gradients beyond anti-aliasing). Also, in many programs you can specify the size of the pallet. For example, if you want to save a QR code or a logo that uses a few numbers of flat colors you can reduce the size of the pallet allowing a smaller index number for each pixel. This was more important in the past with slower internet transfer speeds and/or metered internet connections.

[@encycl07pedia-]

palette*

[@Sembazuru]

@@encycl07pedia- Damn homonym...

[@hatsandboots]

Thanks a bunch. Clear explanations, with style!

[@ZenoTasedro]

Great video! I've wanted to understand these formats better for a while and this was a solid rundown

[@GeekIWG]

As someone who has designed logos for companies, it's just the worst when someone sends a low-res jpeg of their logo to a printing company to put on a 6-foot sign, even though they had a copy of the vector versions.

[@jhamaker]

I'm amazed at how many companies only have a low resolution jpg for their logo and don't have the original fonts. I have done some logo restorations and it's always nice to see the reactions when I am able to recreate a logo as a high quality vector. Especially when it goes from something that is only web icon worthy to something that looks good on a banner.

[@GeekIWG]

@@jhamaker Indeed! That's always so satisfying

[@barongerhardt]

@@jhamaker It wasn't that long ago that the master logo was a high res, high contrast print and/or film. A lot of stuff got messed up/lost as companies pulled back from using printers and doing a lot in house. Then with the modern internet era, a lot is done only at a screen res quality. Maybe good enough for some business cards or letterhead. Having the files ready for a 2m sign is rare treat.

[@maverickbna]

I didn’t know that PNG compression was lossless! Cool. :)

[@KryzysX]

Goddamn you it's known like this since it ever existed 🐸

[@maverickbna]

@@KryzysX I never looked into the internals of the compression algorithm that PNG uses when I learned about it. I've used PNG for a *very* long time, just never paid attention to anything outside the transparency and animation features.

[@davidbwa]

Thanks. I have used all of these formats but now I know more about the differences between them.

[@prospero11]

Good job! I learned a few things, which surprised me as Ive been studying and using these formats for a while... maybe I re-learned. But, putting it together in a well written script makes it easy to understand and remember. thanks!

[@boblangill6209]

If your picture edits involve the use of layers, they can be preserved if you save in .tiff format.

[@Whisper-120]

Definitely worth a round 2, 3, and 4 to cover other image formats and variants/updates of formats like JP2, QOI, SVG, HEIC, and AVIF just to name a few. Would definitely be a show of seeing how each one compares to others. (Like jp2 has up to 38 bits per component of color depth!)

[@PantherBlitz]

+1 for HEIC. The latest cameras are supporting this along with RAW and JPG.

[@morxemplum]

Don't forget JPEG XL!

[@Sembazuru]

What about ILBMs stored in IFF? 🤪 (I haven't seen that format in years. Specifically ever since I stopped using Amiga.) 🤠

[@mabs-O_o]

I'd also add gif (not always for animation) and what "raw" image formats mean.

[@SpaceCaseZ06]

Will need to make an updated version of this video when he understands the subject matter better. Lots of aspects where there are over-generalizations he doesn't go back to correct. Areas where the context makes the statement incorrect or contradictory. Lossy but undetectable is incompatible/contradictory to low quality where it doesn't look too bad Just seems he spent more time in video production than on research and education or even scripting

[@genaro56736]

Hey man, I´m 61, English in not my native language but I have to say this is by far the BEST video explaining formats I have ever seeing, your English and wording is great, this video helped me a lot. Thanks!!!

[@SocietyNeedsImprovement]

This video is so packed with information. I cant imagine how long it must have taken to research. That's assuming that the creator didn't know all of this stuff, which I'm guessing that they didn't. Great job!

[@sharkinahat]

Fun fact: you can rename your image.jpg to image.png and it will still work as an image (most of the time). Programs use the header and/or magic number to decode the image, the extension just tells windows what program to use to open the file.

[@mapron1]

Yeah, and for some (not all!) photo editing software you can even rename your mp4 or mkv file to png and program will open first frame of the video. Kinda cool too.

[@IXPStaticI]

I've observed in the past that for images with simple colors and shapes, like logos and stuff, PNG also tends to fare better with file size than jpg.

[@capnkirk5528]

This is a really well done and useful explanation. Definitely worth watching.

[@anilswipe3661]

Good one buddy. That was very informative. Good work. Keep it up.

[@mckendrick7672]

You should have also explained JPEG XL, it's by far the best of the new formats. Google axed it, but Apple now supports it in Safari so may not be dead yet.

[@kelly4187]

If only apple supports it, then it is effectively dead. Only the sheep who like glued ribbon cables and substandard yet highly hyped internals would then care, meanwhile the rest of the world carries on with better formats.

[@filiplukic3097]

care to tell us more why it's so good?

[@mgord9518]

​@@filiplukic3097Way better lossless (30-60%) compression compared to PNG, way better lossy compression compared to JPEG. JPEG XL compresses much better at realistic lossly compression settings (95-100%) compared to other modern alternatives like WebP or AVIF. Oh, and it has an option to losslessly recompress original JPEG images with a 15-30% savings in file size, so you can easily use it for archiving all of your old JPEGs bit-for-bit, which other modern file formats can't do without either losing quality or increasing file size.

[@Pengochan]

Sadly you skipped vector based formats, like svg, postscript or wmf/emf. These are really useful for storing pictures consisting of simple graphical elements, i.e. lines, circles. This is ideal for displaying plots of all kinds of data. The files are typically quite small, and the images can be scaled to any size. As for the png compression levels: They correspond to zlib compression. This type of compression is particularly good for data with large chunks of repeated values and should do particularly well with e.g. comicbook styles that use few colors and large areas of the same color. jpeg OTOH is a wavelet based compression that should work well with photographs where you have smooth transitions of colors/shades.

[@Tubeytime]

This is insanely informative, the bit-depth explanation was particularly enlightening

[@shaurysrivastav2007]

This is so helpful. Thanks you just solved one of major problem I was facing while training a model.

[@cybershocked]

If someone edits and saves in JPEG it will get compressed each time. The level may initially not discard anything important visually, but over time it will degrade and more so at higher compression levels. Hence if you look at many regularly shared images, such as memes their quality is utterly terrible due to compressing and discarding a bit more many times over. In my opinion, any image you are going to edit you should work with in PNG, and convert a copy of into JPG only for the final file, when that format is appropriate for say size reasons. Anything to be shared with the plan of you, or someone else later editing should be in a lossless format.

[@kelly4187]

Quite frankly, in the modern world where size is cheap, I can’t see a reason for the average person to ever use jpeg. Once you start needing to consider file size then it is useful, but with fast internet connections and processing becoming commonplace, I default to png and never bother with jpeg.

[@cameronl1859]

You should of course never use lossy compression on a file not ready for production/release. It doesn't matter what type of file. PNG would not be a good choice for an intermediary stage for an image. Why not just use the proprietary format of whatever software you're using?

[@quads4407]

That PNG compression thing could be useful to reduce the size of pixel art images because they have a lot of pixels of the same color but idk

[@Wecoc1]

I'm a pixel artist and I use 8-bit PNG very often. Many sprites have around 10 to 20 colours so that 256-pixel palette limit isn't a problem most of the time. You still want it always lossless, though, for obvious reasons.

[@Liggliluff]

pixelart saved in jpg is a curse

[@ajn465]

Really excellent and clear overview! Well done, Joe!

[@GVAjay-wp4tj]

Very nicely explained. Thank you young man.

[@klausically]

as a digital artist, the amount of times ive accidentally saved something with transparent parts as a jpg instead of a png and had to go back and remove it lmao

[@Jet-Pack]

The png format is great for logos and text and even the indexed version can be great for that kind of content. JPG is usually best for compressing photos, it's not good for sharp and distinct shapes that have hard edges.

[@danwake4431]

I just want to say i appreciate your editing in a way not many people think about. A lot of creators will edit out every pause in speaking, every moment a speaker pauses to take a breath, etc. Creates a 20 minute long video of nonstop talking without apparently taking a breath and it's exhausting after a while. I catch myself holding my breath subconsciously waiting for the person in the video to finally breathe. after a few minutes I can't do it anymore lol. But you leave those parts in the video so it sounds more natural and I have no trouble watching your videos all the way through.

[@IOSARBX]

ThioJoe, awesome video keep up the amazing work

[@vintagecherries]

I use photoshop because I'm a clothing & graphic designer in a chatting software and PNG has a better quality in pictures. And it's more useful than JPG. As you said, the transparency in PNG is very useful. It's the better option in quality.

[@FireStormHR]

Very informative video! The only thing I was hoping to get explained but was missing, is why the png and jpg extensions can be freely swapped on a file, without any conversion. I mean you can rename the file a different extension and it still works

[@MervynPartin]

Very informative. Best information that I've seen on the formats.

[@MadocComadrin]

Bit depth can also come into play if you're using an image for things other than viewing. For example, if you want to generate a map for a video game, you could use each color channel to store information about a point on the map (e.g. height). You might want more than 8-bit depth for that, depending on your use case.

[@FM-kl7oc]

My friend works in the public sector and told me that they only use PNG -- and they avoid JPEG to eliminate any possibility of future or retroactive license and/or patent issues with JPEG. Wikipedia covers the JPEG patent controversy, but I haven't read it myself.

[@neutronpcxt372]

It was mainly an issue with arithmetic entropy coding in later JPEG standard revisions. Not an issue with baseline JPEG.

[@ZipplyZane]

@@neutronpcxt372 So that's why most JPEG software I've seen doesn't support arithmetic entropy encoding. It's an option in this one piece of software I use. But if I use it, every other software (including Windows Explorer) treats it like a broken image file.

[@MithicSpirit]

Would've been nice if you also explained JPEG XL. It seems to combine the best of both PNG and JPEG.

[@mackjay1777]

Thanks, great info as always~!!

[@robins_rodeo]

Thanks. Best explanation that I’ve seen on this topic.

[@GlitchyBastard]

I've basically stopped using png since I discovered that WebP has a lossless encode mode, converted all my png files to lossless webp using XnView, saved about 40% of my drive space.

[@prizegotti]

WebP lacks support, incompatible with so many language platforms. The name gives it away, that outside of the Web, the WebP format is useless.

[@ninetysixvoid]

​@@prizegottiall my programs support webp

[@ninetysixvoid]

same I compress my images to webp to save space

[@neutronpcxt372]

@@prizegotti What are you on about? Basically every platform supports WebP today. You could make this argument about JXL, but not WebP today.

[@GlitchyBastard]

@@prizegotti LMAO you live in the 90s?

[@4WheelerinMiami]

Excellent info. Can you do a video on the different video formats?

[@devroombagchus7460]

Thanks! Very informative. What I was really interested in is why I am sometimes very limited in editing images in a certain format, using Lightroom, Luminar, etc.

[@jameshawkins6201]

I use .tiff because I do archive a bunch. One clarification, .png is not the only one that can use transparency. Tiffs can as well. The advantage of .jpg is that many of the "Walgreen" type developing equipment are set up for it. I use RAW when editing and save the RAW and a Tiff along with a jpg. So 1 picture eventually does take up a lot of spade 😁 Photoshop has dozens of format options. I would love to hear about their applications as well.

[@m2pt5]

PNG is generally better than JPG for art, since it doesn't alter the image at all.

[@SuprousOxide]

If posting the image to the web, jpg is probably fine, but don't want to convert to jpg until the final step, so you're not losing quality with each copy

[@quixote5844]

Clearly, you have a vary sophisticated understanding of this stuff and the ability to translate from nerd language into that which us mere mortals speak., leaving out unnecessary details. No wonder it took you so long to make. Unlike many KZbin experts, you actually deliver what you promise. Thanks for making the effort.

[@yuvalne]

honestly, my favourite format nowadays is jpeg-xl (aka .jxl). it's basically the jpeg of the future, having the best qualities of both jpeg and png and even many of the qualities of tiff.

[@random_person618]

What about the .BMP image file format? Isn't it also lossless and takes even more space?

[@gabfid3]

Yes so png is preferable

[@TheExileFox]

BMP is almost the raw pixel data (not exactly but pretty close to) which makes a normal photo become giant. (think of a couple of gigabytes if the high quality jpg is 5MB for some approximation)

[@gabfid3]

@TheExileFox Approx 3 MB per Mpx

[@Juzimaster]

Really informative video. You also could make similar video about audio file formats.

[@EmceeJoseph]

That preview of "PNG Indexed" is using a clever technique called dithering which uses different mixes of dots of two different shades to blend between them on gradients since it doesn't have the intermediate colours.

[@FredPilcher]

Very well explained. Thanks. 🙂

[@Lampe2020]

I think the PNG indexed format is more optimized for logos and icons than for photos as icons most of the time have few colours so you can save space with only saving the colour once instead of in each pixel.

[@JacobP81]

10:58 Actually the index color setting of PNG is great for a logo if it only has a few colors.

[@Alexifeu]

I always ask myself about different file formats it's a really interesting thing to know that and to know what they were originally intended to do and how they were made and stuf. I informed myself about many different file formats like mp3 and stuff.

[@donstetson8535]

Long ago I worked on a product that could scan a multi-page paper document into a single TIFF. Proprietary tags associated with each image allowed various annotations to be applied and stored without 'burning' them into the base image. I lugged that TIFF spec around for years.

[@65CJ5]

I use PNG for almost everything when I can. The only issue I've run into with PNG is when printing. TIF files can have layers (at least in Photoshop).

[@KennethKolano]

You may have wanted to mention the PNG optimization tools, such as PNGGauntlet and pinga. These can typically get 10% or more additional compression from most PNG files directly saved elsewhere. Mileage may vary for internet sourced files.

[@vast634]

I used a PNG optimizer back in the days to get png smaller for mobile apps. There was sometimes a 50% saving in size, compared to saving it in the graphics editor.

[@dalehenderson8991]

Thanks. Very informative.

[@stardomee]

in my previous job in the scanning department for an insurance company we were using the tiff format for B&W scanned images, esp. for diagrams

[@alexis0a]

I'm a web developer and I use webp most of the time, so great format, and thank you for this video, it helps me so much to know more!

[@neutronpcxt372]

Eh, lossy WebP isn't all that good. Lossless WebP is where it is at though if you don't need High Bit Depth(HBD) operation.

[@ZipplyZane]

@@neutronpcxt372 In my experience, it depends. JPEG is better at higher quality levels, but (lossy) WebP has less obvious artifacts at lower quality levels. (JPEG starts looking very blocky.) The main issue seems to be chroma subsampling. WebP requires that the color resolution be 1/4 of the luma/brightness resolution. JPEG does this by default, but will let you change it. The result I notice is that the colors are always blurry even at quality levels above 95. But not with JPEG.

[@mcjiprock]

TIFF would most likely be extremely useful for research, microscopes telescopes, and other facilities that would have usecases for identifying more details in their images.

[@nathanrobloxyt]

Hey ThioJoe! Just wanted to mention that WebP supports transparency too. Lossless WebP images also support transparency with a relatively low “cost” in terms of bytes added to the image. WebP also has a lossy compression option. WebP with lossy compression results in file sizes 3 times smaller than comparable PNGs.

[@georgerubypoppy1063]

Very informative, thank you.

[@JosephNFS]

I was always so wondering the image formats. Thanks for the video.

[@maggyfrog]

so tiff is the matroska of the image formats?

[@krish2nasa]

Informative. Thank you very much.

[@petezzzz]

Awesome info thanks! 👍🙏

[@guitaekm]

I think different about png and jpeg -- in my opinion, if you don't have thousands of images, you should always use png. Jpeg's compression is noticable when you have sharp edges and it has something to do with the compression. Your images didn't have sharp edges but that's a rare case. Every time, there is something written, you have sharp edges

[@KittenKatja]

I had such a conversation a few months ago. The person arguing with me was very adamant on webp and jpeg being better than png in every aspect, not just file size. They also said webp has more features than just a background layer, but wouldn't go any deeper than that.

[@davidarnott9740]

An excellent overview of file types. Thank you. I was surprised that you did not mention .bmp files. Would be useful to have a similar breakdown.

[@wclifton968gameplaystutorials]

You should have included the TGA (aka TARGA) and Microsoft DirectDrawSurface (DDS) formats both of which have different features compared PNG and JPG although I especially like DDS due to the DXT5 and DXT1 compression formats which can help you save video memory in real time although both formats are not very well supported, for example TGA is not supported in Microsoft Paint alongside certain DDS compression formats while Krita does not support the DDS format at all alongside that neither format can be viewed within a web browser...

[@thedrunkenrebel]

There was long time ago a debate about if pdf is better than xps, which settled on unironically being equally good or bad. In the real world it doesn't matter which format is best, but which is used. If your company uses a weird niche format like targas, you will use it too and will face potential backlash from trying alternatives because people got used to doing stuff in a certain way.

[@Ralofguy]

I mean in a video discussing image file formats that are most commonly used whether it's pictures you took with your phone or scribbles you drawn in Paint, discussing niche formats like TGA which comes from late 80s and DDS which is mostly used by game engines as a way to compress and store textures is a bit pointless. But if you're gonna talk DDS, might as well mention BC7 compression, and while it's only for applications using DirectX 11 and above is quite nice considering how close it is to looking uncompressed without taking that much disk space and not butchering black colors like BC1 (DXT1) does.

[@CarlosXPhone]

I have loved PNG over JPEG, because there's more pixel for image. The higher the resolution you hold for your PNG, the file gets bigger. However, if you compress it, you're going to keep the details regardless. 😊