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/
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.
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).
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.
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.
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.
@@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.
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.
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 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.
@@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.
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)
@@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?
@@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.
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
@@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.
@@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
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.
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!!!
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.
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.
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.
@@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.
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.
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.
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.
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.
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.
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
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!
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.
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.
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,...)
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.
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.
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".
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 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.
@@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.
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.
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.
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.
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!
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.
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.
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.
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.
@@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.
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 TH-cam experts, you actually deliver what you promise. Thanks for making the effort.
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.
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.
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.
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!)
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
I work with WebP more than PNG or JPEG. The images usually compress far better, have less artefacts compared to JPEG and yet can display nice crisp text pretty much on par with PNG. Since it supports both lossless and lossy as well as transparency and animation, it covers most (but not all) bases. Most graphics programs can open WebP just fine, even though it's primarily meant for web use (duh). The one format I'd never use is plain JPEG.
I think it's also good to mention that high resolution images that get downscaled to your native will hide the compression of jpgs. Like in why your background looked okay after 0% quality. Smaller images tend to look worse with high compression. Additionally, the content of the image will change the compression ratio of a PNG (and JPG). An all green PNG on high compression will save a ton of space.
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.
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.
@@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.
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.
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.
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.
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.
@@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.
Tiff does something interesting. Say, you take your check to the bank, deposit it, and the atm scans the front and the back. It can store both pictures in the same file (so, one or two files). And later you can pull the two images apart, if you want to do that later, if both were stored in one file.
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.
I remember first encountering the .tiff format when verifying some documents I'd filed w my State's SoS Dept way back in 2012. At that time, nothing would open .tiff that wasn't some expensive editing software... It was rage inducing! Why would the State choose this obscure bs for documents?! Eventually I found a solution & went about my life. BUT! Now, 11yrs later, I finally have the answer for why my State chose .tiff! They couldn't just say what @ThioJoe just did back then...? All that rage & so many years... Why God...?! Why?!!! *begins to sob quietly, convulsively
Also, apparently TIFF can store lots of different bit depths, it can store 8bit, 16bit, 32bit, 16bit float (can have decimals), 32bit float, boolean (1 bit) and maybe a few others. This is widely used for geographic data like elevation. It also supports signed numbers (can have negative values)
A cool feature of the tiff format is that it allows you to include alpha channels. I've used this extensively in video. Your video editing software treats alpha channels as transparency (256 levels of transparency, really, including soft gradients). So I work in photoshop with an alpha channel and include it in the tiff.
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.
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
WebP is now supported on Windows. You can view it natively with the stock photo viewer and I've been compressing my PNGs (screenshots especially) with WebP.
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. 😊
For my thesis almost 20 years ago, I "invented" an image compression that was based on geometry. So kind of like trying to extract the edges of an image, but instead I went with the "edges of the edges" (2nd derivative so to speak), and store them as splines with a color gradient. As this was the time of DirectX 9, GPGPU was in its infancy, but I (ab)used it to fill in the gaps during reconstruction, which still took QUITE some time. And still left an image that looked more like a cartoon-ized version. Solution: Also store a difference image and compress it with an adapted (written from scratch) jpeg-like algo and apply during reconstruction. The whole thing was VERY sensitive to the kind of image (drawing vs. photo especially), but in most cases I was able to reach file sizes of 20-50% jpeg quality with no visually apparent differences to a 90%+ jpeg. And it had, in a way, a nice inbuilt mechanism for good quality scaling, since a lot of the information was stored as curves instead of discrete pixels! Since all of this was done "by hand", with no ready-made libraries (except DX and the UI parts of the concept program of course), this really was an interesting deep-dive into all aspects of computing and maths. From simple color space conversion, over DCT, splines and convolutions, to programming such an early GPU with pixel shaders in ways it was never intended to. While my professors said that this was definitely at least master's degree worthy, probably PhD stuff with the according extended textwork, I did all of this mostly for fun and got a bachelor's out of it. Ah well. At least it was fun. I love image processing! Thanks for what was for me, a bit of a throwback!
Fun video. GIF would have been a good one to cover: My own web site is FILLED with them, mostly because even the oldest machines can decode them pretty quickly. They are also very useful on low-color images, such as schematics, drawings, etc. In some rare cases, they can even be smaller than JPEGs of the same quality and color depth.
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!
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...
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.
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.
jpg for images without transparency, png for images with transparency. less disk space used that way. while disk space isn't an issue in modern times, it makes copying files to backups or sending images on apps like discord quicker.
Here's a few common use cases for unusual color depth modes: Pixel art is frequently indexed to 3 or 4 bits per pixel (8 or 16 possible colors). It lends a simple stylistic look to the image that is reminiscent of GBA sprites. GIMP makes it easy to manage your indexed colors, and pixel artists frequently keepa copy of the pallet in one of the corners of the image. 32 bit grayscale is one of the best formats for depth maps. 64 bit grayscale is not supported by OpenGL, and even 16 bit grayscale results in fairly noticable steps when the depth map is converted to a mesh.
I always save to PNG when possible. Pisses me off that the "most compatible" setting on iPhone is using JEPG especially when I use OneDrive as my backup platform. However, this video was SUPER helpful on clearing up JFJFJ, because when I notice an image is saved like that some programs have issues and I have to manually change the extension to JPG/JPEG.
To add to what others have said - the 256k PNG is mainly used in places where small file size is important, such as websites, to allow faster transmission and rendering times in browsers. This would be where files may only have as few as two or four colours, like logos and website design elements where CSS can't be used. A 256k with transparency will be drastically smaller in size when compared to its "full colour" version. There is also GIF, which has been around since the dawn of time. It can also be used for basic animation (no sound) but has a maximum of 256k colours. I believe PNG was developed as a (much more advanced) replacement for the GIF format - GIF also needed a patent license to use in certain circumstances, which PNG doesn't. As a photographer, I store finalised versions of my images in 16bit (or 8, depending on the photo) TiFF format as it gives the best quality, basically as an archive of that photo. I don't rely on having access to Photoshop in the future, so I don't rely on storing photos in its native PSD format. It also means that most image manipulation and viewing software can display TIFF images by default, whereas most can't view PSD without having to add (sometimes paid for) plugins or CODECS.
Elaborating on previous mentioned, for technical documents done in MSWord, pasted in PNG files display Excel graphs and line drawings, like done in Adobe Illustrator, without pixel aliasing around the edges.
To add onto "the brain interprets brightness differently than color" idea, that pretty much should have to be true because the eye has separate cells (and therefore connected to different neurons) for brightness, the rods.
Great video with good explanations as always! WebP format seems to be a means to keep people from easily downloading the image. I always keep snipping tool handy to convert it a png so at least I can have that.
Corrections/clarifications: 1) JPEG2000 does support alpha and additional color channels. 2) JPEG can store images losslessly using DPCM compression vs DCT. 3) Animated PNG can also use the MNG extension and format. 4) TIFF is not really an image format, it is an image container format with a default set of image formats it can store. It is extensible for custom image data. 5) Indexed color modes are useful for low-color-info images, like text, diagrams, or UI elements. Typically, though, indexed color images are upconverted to full-color (24/32-bit RGB/A) when loaded for display/presentation. Choosing which format to use depends on your needs and what kind of images you are generating/storing. JPEG2000 is pretty good for most things, except things with hard edges or small details, like text, diagrams, or basic UI elements. If you have very specialized image needs, TIFF with the specific format for your image data will be your likely go-to. WebP is alright for some web-only stuff, but I tend to avoid it because JPEG2000/PNG is good enough for those purposes and more standard. Lastly if your application can't handle lossy formats, use PNG or TIFF (or lossless JPEG mode, if supported). Animation formats are highly dependent on supported players, so use whatever works for you. Animated GIFs are still very common.
@@monhi64 YTou could argue that, to be sure. However, I felt the above information did expand and clarify what was in the video, which is why I posted it. :)
5:53 Left side is very slightly deeper green, to me. I haven't saved a file as JPEG in ages. I always use PNG because all of my art is pixel-based. I have a bit of a jones against lossy compression in general, so my previous choosy choice was GIF. Most of my art has a limited palette -- maybe a maximum of 196 colors (64 base hues x 3 tints/shades, plus white, black, and a couple of pure or hued greys, if there are several characters in the artwork). So, 8-bit indexed-color PNG is perfect for me. Small files, no loss, what's not to love?
I might be remembering this wrong, but I think that tiff was created by Adobe and the reason its color channels are unrestricted is because it was designed for working with film photography, either by scanning the negatives or scanning the developed pictures themselves. The next generation of that, designed for digital cameras instead of film, is DNG (digital negative) which is a universal RAW format, and by that I mean Adobe created a free-to-download-and-use converter to convert any camera's RAW files to DNG because Lightroom could only support so many RAW types from so many cameras. I admit that I might have some of that wrong, but that's how things were explained to me when I started taking an interest in photography.
WebP files are easy to convert using a free image program called XN Convert. I have that loaded as the default app for WebP images. All I have to do is double click the WebP image, and click convert, and it will convert and save the image as a PNG (or JPG) and delete the WebP image. Easy! I also have HEIC files (used by apple devices) set up with XN convert the same way.
For people wondering, "JFIF" means "the bytes of the stream of data that make up the image." So it's like what you'd use if you didn't have it actually in a file. A jpeg file would be header information, metadata, and JFIF data. If you have a "TIFF file with jpeg data inside" what it's storing is the JFIF. Sort of like how the name and date of a text file isn't part of the text itself. JPEG is for photographs (i.e., smooth colors). PNG just stores whatever image you give it. JPEG a cartoon and you're going to have trouble.
If you bring a high quality .jpg file into PowerPoint, Microsoft automatically downsamples the image with sometimes undesired effects, whereas, PowerPoint leaves .png files alone. So if you value image quality and you have to use PowerPoint, .png is the way to go! Great video!
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.
WebP can easily be converted, download the image, load into Paint, and then save it in your chosen file format type. You get a warning about losing transparency, but that is it.
Only use JPG if you must as the last step in your work. If you are working with an image and you use JPG it will degrade every time you have reloaded it and then saved it. Just a thought...
one thing about TIFF is that they sometimes contain multiple images in one file (especially when scanning multiple documents, and the scanner creates a TIFF file. the problem with this is that not many image viewers/editors support multi-image TIFFs. i think Windows' Photo Viewer does, but NOT Paint or most other Microsoft apps. most of the PROFESSIONAL photo editors DO, however.
One thing when it comes to bit depth, is that some screens operate with an RGB565 pattern (5 Red bits, 6 Green, and 5 Blue), instead of the standard RGB888. These are usually some smaller TFT screens for use with microcontrollers, where they are limited to 16 bits in some cases.
I would recommend using Irfanview wherever possible; not only is it usually faster & allows easier & more editing options than most programs it can do batch conversions or edits on thousands of files if needed, & very quickly if you have a decent PC. Also if I'm going to use brightness, sharpness, auto-correct, smoothing, or the like I do those edits first & then compress the image. You'll get a much better looking picture even zoomed in, & can still get great compression (Jpg) I used a program that came with my camera that can compare the original image to the compressed one & doing it this way; @ a 70% compression ratio only 2 to 3% of the total photo has a visual discrepancy to the original- most of that size loss is data you will never notice even looking side by side with the original.
that indexed png you mentioned reminds me a lot of how old computers like Commodore Amiga actually worked (or any computer able to display colors from the 70s to mid 90s). also, if i'm not mistaken, GIFs use a limited and indexed number of colors (which does not surprise me since it is a format that was used way back those computers in early 90s). about the compression, i've always tought it like this: jpeg compression is like mp3, you remove stuff in order to make the file smaller, png compression is like zip, the file is there exactly like the original, but complex mathematical operations are done in order to reorganize the bit sequences and save space, and there is a limit to how much further you can go with the compression. thinking about it, maybe png compression can be tought as a 100% fragmented (old style) hard disk that gets defragmented, and when it reaches 0% it will have a lot more space in it.
If you want a format that has better color retention than any of these, use EXR or floating-point TIFF. EXR supports HDR color. If you want a lossy format that works quickly with GPUs, choose ASTC, BCn or one of the other texture compression formats.
There's one more thing... the type of used in the raster file. Not all applications support all compression algorithms... Tiff is very good. It's almost like a PDF for rasters.
People don’t realise a tiff file isn’t necessarily an image. Tagged Image File Format can actually contain a multi page or multi image document. Lots of graphic editing programs don’t tell you this when opening a tiff file and simply show you the first page/image in the file. Windows Image viewer does correctly show you all pages in a tiff file and let you page down/up through them.
Im actually impressed by dds compression, it can have similar image quality at the same size as jpg, but is quite easy to implement with not much code.
Occasionally, I would have to send waveforms from a storage oscilloscope to an electronic engineer for product eval/improvement. This was many moons ago! Initially, the o'scope saved the files in .tiff format. When I emailed these attached .tiff files to the engineer, he replied that he couldn't open them. (???) Without a manual for the o'scope, I'd download the .tiff files onto a thumb drive, transfer them to my PC & convert the .tiff files to .jpg and resend them to the engineer. I finally looked up the user manual online and figured out how to change the default format to save the waveforms in .jpg format (a cumbersome process on the o'scope)....but, it was quicker.
![How are Images Compressed? [46MB ↘↘ 4.07MB] JPEG In Depth](http://i.ytimg.com/vi/Kv1Hiv3ox8I/mqdefault.jpg)
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/
Love you bro
Of course 🙂
damn that's a sick emoji
Thats ok
good thing you made this video because no many people know about these formats
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.
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).
I use JPEG only for photos. For other stuff its crap
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.
@@neutronpcxt372 yeah true
@@SUPER7Xno, with the fourier transform
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.
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.
@@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.
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.
yeah, when using something with many pixels of the same color next to each other, png is king
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.
@@anteshell what is your definition of "lossy"?
@@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.
@@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.
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)
..and 8bit PNG for web graphics up to 256 colors that don't need an alpha channel. Much smaller file size.
And don't send JPG, PNG or GIF to your print provider. We don't like it.
@@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?
@@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.
Thanks for saving 16 minutes
There are also image formats with vector data, which stores images mathematically, like SVG, AI, and EMF...
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
@@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.
@@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
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.
EPS?
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!!!
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.
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.
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)
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.
@@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.
And then there's Twitter saving screenshots of walls of text as JPG. 🤦
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.
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.
Another important feature of Tiff is that it supports multiple layers.
And multiple pages.
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.
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.
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.
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
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!
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
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.
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.
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.
@@jonr6680 Oh Baby! That's it. That's it!
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,...)
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.
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.
And to even save on storage, you'd have to compress the jpg so much that the grainyness will show
Nothing worse than a great greentext story ruined by JPEG artifacts around the text.
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".
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."
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.
@@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.
When I do pixel art, I always do indexed colors
Really reduces file size by a crap ton
@@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.
Why didn't they add a future-proofing 16 bit pixel depth option?
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.
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.
Did not know that! Thanks, Chipp! It is not something you usually think about!
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.
But wouldn't it be even better to include an ICC profile?
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.
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!
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.
palette*
@@encycl07pedia- Damn homonym...
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.
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.
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.
@@jhamaker Indeed! That's always so satisfying
@@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.
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 TH-cam experts, you actually deliver what you promise. Thanks for making the effort.
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.
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.
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.
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!)
+1 for HEIC. The latest cameras are supporting this along with RAW and JPG.
Don't forget JPEG XL!
What about ILBMs stored in IFF? 🤪 (I haven't seen that format in years. Specifically ever since I stopped using Amiga.) 🤠
I'd also add gif (not always for animation) and what "raw" image formats mean.
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
I work with WebP more than PNG or JPEG. The images usually compress far better, have less artefacts compared to JPEG and yet can display nice crisp text pretty much on par with PNG. Since it supports both lossless and lossy as well as transparency and animation, it covers most (but not all) bases. Most graphics programs can open WebP just fine, even though it's primarily meant for web use (duh). The one format I'd never use is plain JPEG.
I think it's also good to mention that high resolution images that get downscaled to your native will hide the compression of jpgs. Like in why your background looked okay after 0% quality. Smaller images tend to look worse with high compression. Additionally, the content of the image will change the compression ratio of a PNG (and JPG). An all green PNG on high compression will save a ton of space.
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.
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.
care to tell us more why it's so good?
@@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.
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.
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.
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.
Simple, direct, no BS. Excellent info. Great job.
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.
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!
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.
@@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.
Tiff does something interesting. Say, you take your check to the bank, deposit it, and the atm scans the front and the back. It can store both pictures in the same file (so, one or two files). And later you can pull the two images apart, if you want to do that later, if both were stored in one file.
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.
I remember first encountering the .tiff format when verifying some documents I'd filed w my State's SoS Dept way back in 2012. At that time, nothing would open .tiff that wasn't some expensive editing software... It was rage inducing! Why would the State choose this obscure bs for documents?! Eventually I found a solution & went about my life. BUT! Now, 11yrs later, I finally have the answer for why my State chose .tiff! They couldn't just say what @ThioJoe just did back then...? All that rage & so many years... Why God...?! Why?!!! *begins to sob quietly, convulsively
10:58 Actually the index color setting of PNG is great for a logo if it only has a few colors.
Also, apparently TIFF can store lots of different bit depths, it can store 8bit, 16bit, 32bit, 16bit float (can have decimals), 32bit float, boolean (1 bit) and maybe a few others. This is widely used for geographic data like elevation. It also supports signed numbers (can have negative values)
A cool feature of the tiff format is that it allows you to include alpha channels. I've used this extensively in video. Your video editing software treats alpha channels as transparency (256 levels of transparency, really, including soft gradients). So I work in photoshop with an alpha channel and include it in the tiff.
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.
When I was a really young kid, I made my very first custom sprite sheet in Microsoft paint, and after hours of toiling I saved it as a JPEG 💀
PNG is generally better than JPG for art, since it doesn't alter the image at all.
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
WebP is now supported on Windows. You can view it natively with the stock photo viewer and I've been compressing my PNGs (screenshots especially) with WebP.
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. 😊
very interesting to learn about different formats. and that our eyes see more shades of green than from other colors.
I like using indexed colour because I dig that 90s dithering aesthetic
For my thesis almost 20 years ago, I "invented" an image compression that was based on geometry. So kind of like trying to extract the edges of an image, but instead I went with the "edges of the edges" (2nd derivative so to speak), and store them as splines with a color gradient. As this was the time of DirectX 9, GPGPU was in its infancy, but I (ab)used it to fill in the gaps during reconstruction, which still took QUITE some time. And still left an image that looked more like a cartoon-ized version.
Solution: Also store a difference image and compress it with an adapted (written from scratch) jpeg-like algo and apply during reconstruction.
The whole thing was VERY sensitive to the kind of image (drawing vs. photo especially), but in most cases I was able to reach file sizes of 20-50% jpeg quality with no visually apparent differences to a 90%+ jpeg. And it had, in a way, a nice inbuilt mechanism for good quality scaling, since a lot of the information was stored as curves instead of discrete pixels!
Since all of this was done "by hand", with no ready-made libraries (except DX and the UI parts of the concept program of course), this really was an interesting deep-dive into all aspects of computing and maths. From simple color space conversion, over DCT, splines and convolutions, to programming such an early GPU with pixel shaders in ways it was never intended to.
While my professors said that this was definitely at least master's degree worthy, probably PhD stuff with the according extended textwork, I did all of this mostly for fun and got a bachelor's out of it. Ah well. At least it was fun. I love image processing!
Thanks for what was for me, a bit of a throwback!
Really informative video. You also could make similar video about audio file formats.
It would have been helpful to have an explanation of the practical uses and importance of transparency in image files: where, when and why ...
Fun video. GIF would have been a good one to cover: My own web site is FILLED with them, mostly because even the oldest machines can decode them pretty quickly.
They are also very useful on low-color images, such as schematics, drawings, etc. In some rare cases, they can even be smaller than JPEGs of the same quality and color depth.
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!
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...
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.
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.
If you want to save a .webp image for use locally, at the "Save image as" stage, just change the suffix to .jpg. Simple as that.
You also can download the image as .webp and change the extension to .png directly. When the warning comes up, just click Yes.
jpg for images without transparency, png for images with transparency. less disk space used that way.
while disk space isn't an issue in modern times, it makes copying files to backups or sending images on apps like discord quicker.
Png if you are going to edit the image later for templates and other creative work process . JPEG2 is good but not well supported by mobile devices
PNG does not necessarily "save" disk space. The higher the resolution the bigger the file. You can compress it, and NOT lose information or detail.
@@CarlosXPhone you missed my point. i use jpg for images without transparency to save disk space.
@@InternetSlavicMan i see
Here's a few common use cases for unusual color depth modes:
Pixel art is frequently indexed to 3 or 4 bits per pixel (8 or 16 possible colors). It lends a simple stylistic look to the image that is reminiscent of GBA sprites. GIMP makes it easy to manage your indexed colors, and pixel artists frequently keepa copy of the pallet in one of the corners of the image.
32 bit grayscale is one of the best formats for depth maps. 64 bit grayscale is not supported by OpenGL, and even 16 bit grayscale results in fairly noticable steps when the depth map is converted to a mesh.
I always save to PNG when possible. Pisses me off that the "most compatible" setting on iPhone is using JEPG especially when I use OneDrive as my backup platform.
However, this video was SUPER helpful on clearing up JFJFJ, because when I notice an image is saved like that some programs have issues and I have to manually change the extension to JPG/JPEG.
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
To add to what others have said - the 256k PNG is mainly used in places where small file size is important, such as websites, to allow faster transmission and rendering times in browsers. This would be where files may only have as few as two or four colours, like logos and website design elements where CSS can't be used. A 256k with transparency will be drastically smaller in size when compared to its "full colour" version.
There is also GIF, which has been around since the dawn of time. It can also be used for basic animation (no sound) but has a maximum of 256k colours. I believe PNG was developed as a (much more advanced) replacement for the GIF format - GIF also needed a patent license to use in certain circumstances, which PNG doesn't.
As a photographer, I store finalised versions of my images in 16bit (or 8, depending on the photo) TiFF format as it gives the best quality, basically as an archive of that photo. I don't rely on having access to Photoshop in the future, so I don't rely on storing photos in its native PSD format. It also means that most image manipulation and viewing software can display TIFF images by default, whereas most can't view PSD without having to add (sometimes paid for) plugins or CODECS.
0:18 It's GIF. Not "JIFF"
"Y'all wrong, it's pronounced Yiff"
- Stretchy, I think?
Happy to see video where host knows what he is taking about and inserts his heart to make viewers understand staff easier! Thanks
TIFF can also store layers, which is really helpful for some purposes.
Elaborating on previous mentioned, for technical documents done in MSWord, pasted in PNG files display Excel graphs and line drawings, like done in Adobe Illustrator, without pixel aliasing around the edges.
To add onto "the brain interprets brightness differently than color" idea, that pretty much should have to be true because the eye has separate cells (and therefore connected to different neurons) for brightness, the rods.
Great video with good explanations as always!
WebP format seems to be a means to keep people from easily downloading the image. I always keep snipping tool handy to convert it a png so at least I can have that.
The indexed mode is going to be useful for screenshots of old-school games
Corrections/clarifications:
1) JPEG2000 does support alpha and additional color channels.
2) JPEG can store images losslessly using DPCM compression vs DCT.
3) Animated PNG can also use the MNG extension and format.
4) TIFF is not really an image format, it is an image container format with a default set of image formats it can store. It is extensible for custom image data.
5) Indexed color modes are useful for low-color-info images, like text, diagrams, or UI elements. Typically, though, indexed color images are upconverted to full-color (24/32-bit RGB/A) when loaded for display/presentation.
Choosing which format to use depends on your needs and what kind of images you are generating/storing. JPEG2000 is pretty good for most things, except things with hard edges or small details, like text, diagrams, or basic UI elements. If you have very specialized image needs, TIFF with the specific format for your image data will be your likely go-to. WebP is alright for some web-only stuff, but I tend to avoid it because JPEG2000/PNG is good enough for those purposes and more standard. Lastly if your application can't handle lossy formats, use PNG or TIFF (or lossless JPEG mode, if supported).
Animation formats are highly dependent on supported players, so use whatever works for you. Animated GIFs are still very common.
I would argue that he said that about tiff, he even called it a container and that you can set it to save like other formats
@@monhi64 YTou could argue that, to be sure. However, I felt the above information did expand and clarify what was in the video, which is why I posted it. :)
5:53 Left side is very slightly deeper green, to me. I haven't saved a file as JPEG in ages. I always use PNG because all of my art is pixel-based. I have a bit of a jones against lossy compression in general, so my previous choosy choice was GIF. Most of my art has a limited palette -- maybe a maximum of 196 colors (64 base hues x 3 tints/shades, plus white, black, and a couple of pure or hued greys, if there are several characters in the artwork). So, 8-bit indexed-color PNG is perfect for me. Small files, no loss, what's not to love?
I might be remembering this wrong, but I think that tiff was created by Adobe and the reason its color channels are unrestricted is because it was designed for working with film photography, either by scanning the negatives or scanning the developed pictures themselves. The next generation of that, designed for digital cameras instead of film, is DNG (digital negative) which is a universal RAW format, and by that I mean Adobe created a free-to-download-and-use converter to convert any camera's RAW files to DNG because Lightroom could only support so many RAW types from so many cameras. I admit that I might have some of that wrong, but that's how things were explained to me when I started taking an interest in photography.
WebP files are easy to convert using a free image program called XN Convert. I have that loaded as the default app for WebP images. All I have to do is double click the WebP image, and click convert, and it will convert and save the image as a PNG (or JPG) and delete the WebP image. Easy! I also have HEIC files (used by apple devices) set up with XN convert the same way.
Also I used .TIFF to share photoshop document compatibility while I use Krita. When .tiff allow to save layers and information. ^^
For people wondering, "JFIF" means "the bytes of the stream of data that make up the image." So it's like what you'd use if you didn't have it actually in a file. A jpeg file would be header information, metadata, and JFIF data. If you have a "TIFF file with jpeg data inside" what it's storing is the JFIF. Sort of like how the name and date of a text file isn't part of the text itself.
JPEG is for photographs (i.e., smooth colors). PNG just stores whatever image you give it. JPEG a cartoon and you're going to have trouble.
If you bring a high quality .jpg file into PowerPoint, Microsoft automatically downsamples the image with sometimes undesired effects, whereas, PowerPoint leaves .png files alone. So if you value image quality and you have to use PowerPoint, .png is the way to go! Great video!
Real ones know the difference between .jpg and .jpeg
Nope
It's just old OS shenanigans
Real ones know about .jxl
There actually is a difference. One has the letter "e", the other one doesn't.
Real ones also know how .gif is pronounced.
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.
Very nicely explained. Thank you young man.
WebP can easily be converted, download the image, load into Paint, and then save it in your chosen file format type. You get a warning about losing transparency, but that is it.
thank you for proper subtitles!! this helps me immensely with being able to properly follow along with the video!
Weird, before putting them side-by-side i thought the right was darker.
Only use JPG if you must as the last step in your work. If you are working with an image and you use JPG it will degrade every time you have reloaded it and then saved it. Just a thought...
Outstanding video and expert delivery.
one thing about TIFF is that they sometimes contain multiple images in one file (especially when scanning multiple documents, and the scanner creates a TIFF file.
the problem with this is that not many image viewers/editors support multi-image TIFFs. i think Windows' Photo Viewer does, but NOT Paint or most other Microsoft apps. most of the PROFESSIONAL photo editors DO, however.
One thing when it comes to bit depth, is that some screens operate with an RGB565 pattern (5 Red bits, 6 Green, and 5 Blue), instead of the standard RGB888. These are usually some smaller TFT screens for use with microcontrollers, where they are limited to 16 bits in some cases.
I would recommend using Irfanview wherever possible; not only is it usually faster & allows easier & more editing options than most programs it can do batch conversions or edits on thousands of files if needed, & very quickly if you have a decent PC. Also if I'm going to use brightness, sharpness, auto-correct, smoothing, or the like I do those edits first & then compress the image. You'll get a much better looking picture even zoomed in, & can still get great compression (Jpg) I used a program that came with my camera that can compare the original image to the compressed one & doing it this way; @ a 70% compression ratio only 2 to 3% of the total photo has a visual discrepancy to the original- most of that size loss is data you will never notice even looking side by side with the original.
that indexed png you mentioned reminds me a lot of how old computers like Commodore Amiga actually worked (or any computer able to display colors from the 70s to mid 90s).
also, if i'm not mistaken, GIFs use a limited and indexed number of colors (which does not surprise me since it is a format that was used way back those computers in early 90s).
about the compression, i've always tought it like this: jpeg compression is like mp3, you remove stuff in order to make the file smaller, png compression is like zip, the file is there exactly like the original, but complex mathematical operations are done in order to reorganize the bit sequences and save space, and there is a limit to how much further you can go with the compression.
thinking about it, maybe png compression can be tought as a 100% fragmented (old style) hard disk that gets defragmented, and when it reaches 0% it will have a lot more space in it.
If you want a format that has better color retention than any of these, use EXR or floating-point TIFF. EXR supports HDR color.
If you want a lossy format that works quickly with GPUs, choose ASTC, BCn or one of the other texture compression formats.
There's one more thing... the type of used in the raster file.
Not all applications support all compression algorithms...
Tiff is very good. It's almost like a PDF for rasters.
GIF is short for Graphics Interchange Format, not Jraphics Interface Format.
I expected you to cover the issues of text within different image formats.
People don’t realise a tiff file isn’t necessarily an image. Tagged Image File Format can actually contain a multi page or multi image document. Lots of graphic editing programs don’t tell you this when opening a tiff file and simply show you the first page/image in the file. Windows Image viewer does correctly show you all pages in a tiff file and let you page down/up through them.
Im actually impressed by dds compression, it can have similar image quality at the same size as jpg, but is quite easy to implement with not much code.
I love APNG over GIF. I’m sad it’s not more common! Practically a video with transparency!
This is a really well done and useful explanation. Definitely worth watching.
When I heard him say "gif", instant subscribe! (I was already going to but that was the hook)
Occasionally, I would have to send waveforms from a storage oscilloscope to an electronic engineer for product eval/improvement. This was many moons ago! Initially, the o'scope saved the files in .tiff format. When I emailed these attached .tiff files to the engineer, he replied that he couldn't open them. (???) Without a manual for the o'scope, I'd download the .tiff files onto a thumb drive, transfer them to my PC & convert the .tiff files to .jpg and resend them to the engineer. I finally looked up the user manual online and figured out how to change the default format to save the waveforms in .jpg format (a cumbersome process on the o'scope)....but, it was quicker.
15:45 the indexed is obviously for simply low colored stuff. like emojis for example.