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.
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.
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.
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.
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.
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!!!
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.
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".
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.
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.
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.
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.
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.
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.
@@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.
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.
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.
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.
@@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.
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 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.
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,...)
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.
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.
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!
Tip for the future, try and avoid putting and titles near the bottom of the video frame, as thats where TH-cam 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.
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).
@@therealfrantux On TH-cam, 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.
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.
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.
Great video ThioJoe! If you're being annoyed with the webp format, you can just simply rename file and change it's extension to .png and it will be automatically compatible with any software.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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
@@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.
A humble contribution: Some software programs will not read a .jpg image, unless the extension appears in all-caps, .JPG. I think this is also true of for jpeg/JPEG. IN any event, if your app is not responding to the lower case extension, rename them to have an upper-case extension. I saw this, in particular, in adding image-laced data bubbles to Google Earth.
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.
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.
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.
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 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.
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. 😊
The thing that you could also mention about WEBP is that it's based on Google's video format WEBM. It's like a single frame WEBM video. Also, there's a video codec based on an image codec - MJPEG, which is just a video stream that isbasically video represented as a string of JPEG images. I don't know if there's interframe encoding in MJEPG or if it is just each frame being a JPEG image. Also, indexed pallette is the original way of storing images on computers going back to the 1990s and 1980s. True Colour modes are newer and are dominant becuase we don't have displays that themselves have a limited pallette.
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.
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.
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.
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.
Excellent, informative video. As far as what you left out, I believe there are two historically significant points you missed. 1) Why PNG even exists. The earlier common format besides JPEG was GIF. Back in the day, that was a patented format, which legally people needed a license to use, but in practice very few people did. (I imagine some companies and organizations did, though.) It normally stored images in an 8-bit indexed format, so as the "PNG Working Group" (it's developers) built their open spec, they needed to support the 8-bit indexed methodology of its forebearer. Then they went beyond GIFs capability by offering the 8 or 16 bits per color-channel format and the transparency channel. BTW, the GIF patent has expired, not that anyone cares any more. 2) The format used in fax (facsimile) machines is one of the must-support TIFF formats, 1 bit per pixel, or black, white only. Beyond history, an excellent use-case for PNG is business graphics -- pie charts, graphs calendars, etc. (If you have had to keep yourself awake at work while a manager gives a slide show presentation, you know what I mean.) A high majority of these use 16 or less colors total. PNG supports a 4-bit indexed color image (i.e. up to 16 custom colors) almost perfect for handling these sorts of business graphics . These 4-bpp lossless PNG images compress extremely well, more so than JPEG in many cases. And with almost every transition in business graphics being a high contrast one, the jiggly edges inherent in magnified JPEG images become obvious even without magnification. Total win for PNG.
@@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.
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.
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 am a optics engineer and work with machine imaging. The .tiff extension is usually what we use to keep the data of all spectrum of a photo. With the right viewer or plataforma to work with it is just perfect.
Funny, I actually use the indexed color mode for the PNG's in my game since they're 'painterly' and thus only use limited colors, giving them a great usecase for this. Fun fact: You can also discard the entire Alpha channel. I literally have 512x512 textures that are barely 20 to 60 kilobytes in size. For context: that means that the largest format (60kbs) could easly fit about 23 times on a standard 3"inch 1,44mb floppy disk. So yeah, unlike some game companies I try to keep the size of my game down. (I even use Midi files for the music)
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.
With PNG you can actually save it in indexed mode with a custom palate. iirc in GiMp you can actually tell it to create one from the image's colours when converting to indexed mode, so it doesn't have to be lossy.
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
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!
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?
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.
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)
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.
There was a very informative debate on another channel about whether it's pronounced "Gif" or "Jif". The two takaways were: 1. Graphics designers _nowdays_ call it "Jif" whereas developers & techies in general have always called it "Gif, and almost exclusively still do. 2. Internally Compuserve called it "Gif" with only the alledged designer calling it "Jif", a fact which was only revealed years after the service's hayday. And on a persinal level when I encounter people calling it "Jif" I assume that they're either artists / non-technical types, very PC or both. And so far I've found this has held up very well.
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.
14:20 We do not only produce images using cameras. For example, medical X-ray scanners, especially mammography devices. In addition to producing 24-bit depth in a single channel per pixel, it calculates the density value of each pixel and stores it in the DICOM format. The DICOM format is not very efficient except for diagnostic programs and monitors, but the TIFF format can store data such as the density value that is produced extra, in addition to easily displaying the image. It is a solution that can be used for archives and can be used again for diagnostic purposes by generating a DICOM file from the extra data it stores.
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.
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)
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.
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.
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.
Jpeg also has lossless compression; compression is a choice not a default. Also, you're only referring to RBG images, bit depth increases with CMKY images for print media. Newer versions of PhotoShop supports up to 16 bits per channel in jpg's.
![How are Images Compressed? [46MB ↘↘ 4.07MB] JPEG In Depth](/img/n.gif)
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
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
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.
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.
TIFF also can have multiple images stored inside. Just like pages in PDF
TGA too
EXR as well
@@redneckcommie6368 Yeah that's the point! They contain multiple films in that format 😂
I forgot about this one!
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.
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!!!
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.
this is true but it the compression ratio gonna make or break the image regardless
He should have talked about that in the video.
For monochrome black and white text, might as well as use the indexed mode. It will be much smaller than JPEG anyway.
Logos and large areas of the same colour: Just use GIF.
It's worse choice for any image that needs to be edited.
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".
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?
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.
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.
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.
Can confirm the TIFF thing.
Source: worked at a print shop for 5 years.
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.
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.
@@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.
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.
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.
Paletted PNG 8 can be handy when dealing with simple (non-gradiented) logos. And even more so with favicons (website icons).
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.
did you even watch the video?? the mentioned #1, #2 and #4 on your list
@@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.
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 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.
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,...)
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.
Another important feature of Tiff is that it supports multiple layers.
And multiple pages.
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.
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.
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!
Tip for the future, try and avoid putting and titles near the bottom of the video frame, as thats where TH-cam 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.
You prune,the worda at the bottom are a 100% fantastic idea
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).
@@therealfrantux On TH-cam, 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.
@@itskdog you can just drag it with your mouse on web? Are you talking about the ios app?
@@xaryop7950 not everyone uses a PC to watch TH-cam???
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.
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?
Great video ThioJoe! If you're being annoyed with the webp format, you can just simply rename file and change it's extension to .png and it will be automatically compatible with any software.
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.
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.
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.
I wish you could talk a bit about JPEG XL, which is supposed to combine the best of both worlds with JPEG and PNG.
😲👍👍👍
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.
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...
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.
Would've been nice if you also explained JPEG XL. It seems to combine the best of both PNG and JPEG.
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
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
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.
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.
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.
Simple, direct, no BS. Excellent info. Great job.
Don't forget to mention the differences with handling text or vector images
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.
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.
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.
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.
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.
thank you for proper subtitles!! this helps me immensely with being able to properly follow along with the video!
If your picture edits involve the use of layers, they can be preserved if you save in .tiff format.
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
I didn’t know that PNG compression was lossless! Cool. :)
Goddamn you it's known like this since it ever existed 🐸
@@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.
Thanks. I have used all of these formats but now I know more about the differences between them.
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.
A humble contribution: Some software programs will not read a .jpg image, unless the extension appears in all-caps, .JPG. I think this is also true of for jpeg/JPEG. IN any event, if your app is not responding to the lower case extension, rename them to have an upper-case extension. I saw this, in particular, in adding image-laced data bubbles to Google Earth.
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.
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.
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
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.
pixelart saved in jpg is a curse
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 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.
Happy to see video where host knows what he is taking about and inserts his heart to make viewers understand staff easier! Thanks
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. 😊
The thing that you could also mention about WEBP is that it's based on Google's video format WEBM. It's like a single frame WEBM video. Also, there's a video codec based on an image codec - MJPEG, which is just a video stream that isbasically video represented as a string of JPEG images. I don't know if there's interframe encoding in MJEPG or if it is just each frame being a JPEG image.
Also, indexed pallette is the original way of storing images on computers going back to the 1990s and 1980s. True Colour modes are newer and are dominant becuase we don't have displays that themselves have a limited pallette.
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.
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.
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.
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.
ThioJoe, awesome video keep up the amazing work
10:58 Actually the index color setting of PNG is great for a logo if it only has a few colors.
Excellent, informative video. As far as what you left out, I believe there are two historically significant points you missed.
1) Why PNG even exists. The earlier common format besides JPEG was GIF. Back in the day, that was a patented format, which legally people needed a license to use, but in practice very few people did. (I imagine some companies and organizations did, though.) It normally stored images in an 8-bit indexed format, so as the "PNG Working Group" (it's developers) built their open spec, they needed to support the 8-bit indexed methodology of its forebearer. Then they went beyond GIFs capability by offering the 8 or 16 bits per color-channel format and the transparency channel. BTW, the GIF patent has expired, not that anyone cares any more.
2) The format used in fax (facsimile) machines is one of the must-support TIFF formats, 1 bit per pixel, or black, white only.
Beyond history, an excellent use-case for PNG is business graphics -- pie charts, graphs calendars, etc. (If you have had to keep yourself awake at work while a manager gives a slide show presentation, you know what I mean.) A high majority of these use 16 or less colors total. PNG supports a 4-bit indexed color image (i.e. up to 16 custom colors) almost perfect for handling these sorts of business graphics . These 4-bpp lossless PNG images compress extremely well, more so than JPEG in many cases. And with almost every transition in business graphics being a high contrast one, the jiggly edges inherent in magnified JPEG images become obvious even without magnification. Total win for PNG.
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.
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.
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 am a optics engineer and work with machine imaging. The .tiff extension is usually what we use to keep the data of all spectrum of a photo. With the right viewer or plataforma to work with it is just perfect.
Funny, I actually use the indexed color mode for the PNG's in my game since they're 'painterly' and thus only use limited colors, giving them a great usecase for this. Fun fact: You can also discard the entire Alpha channel. I literally have 512x512 textures that are barely 20 to 60 kilobytes in size. For context: that means that the largest format (60kbs) could easly fit about 23 times on a standard 3"inch 1,44mb floppy disk. So yeah, unlike some game companies I try to keep the size of my game down. (I even use Midi files for the music)
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.
Really informative video. You also could make similar video about audio file formats.
With PNG you can actually save it in indexed mode with a custom palate. iirc in GiMp you can actually tell it to create one from the image's colours when converting to indexed mode, so it doesn't have to be lossy.
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
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!
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?
You can download a WebP image and change the file extension to .jpg before or after you save it and it will work perfectly fine as a .jpg file.
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.
0:18 It's GIF. Not "JIFF"
"Y'all wrong, it's pronounced Yiff"
- Stretchy, I think?
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)
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.
There was a very informative debate on another channel about whether it's pronounced "Gif" or "Jif". The two takaways were:
1. Graphics designers _nowdays_ call it "Jif" whereas developers & techies in general have always called it "Gif, and almost exclusively still do.
2. Internally Compuserve called it "Gif" with only the alledged designer calling it "Jif", a fact which was only revealed years after the service's hayday.
And on a persinal level when I encounter people calling it "Jif" I assume that they're either artists / non-technical types, very PC or both. And so far I've found this has held up very well.
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.
14:20 We do not only produce images using cameras. For example, medical X-ray scanners, especially mammography devices. In addition to producing 24-bit depth in a single channel per pixel, it calculates the density value of each pixel and stores it in the DICOM format. The DICOM format is not very efficient except for diagnostic programs and monitors, but the TIFF format can store data such as the density value that is produced extra, in addition to easily displaying the image. It is a solution that can be used for archives and can be used again for diagnostic purposes by generating a DICOM file from the extra data it stores.
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
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
What about the .BMP image file format? Isn't it also lossless and takes even more space?
Yes so png is preferable
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)
@TheExileFox Approx 3 MB per Mpx
Very nicely explained. Thank you young man.
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.
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 know of one animated PNG: the loading circle in the About Firefox window and the settings page when searching for an update.
ITS NOT JIF ITS GIF
It would have been helpful to have an explanation of the practical uses and importance of transparency in image files: where, when and why ...
Mf said Jif instead of gif
Because it is called "jif", the creator said.
@@fsForward i will pronounce it "yiff" before i do "jif"
@@fsForward"Because inventing a thing doesn't give you dominion over how language works."
same, ʒaɪf
@@fsForward ah yes, Jraphics Interchange Format
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.
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.
Jpeg also has lossless compression; compression is a choice not a default. Also, you're only referring to RBG images, bit depth increases with CMKY images for print media. Newer versions of PhotoShop supports up to 16 bits per channel in jpg's.