Are You Using the WRONG Image Format? 

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.

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.

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)

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.

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

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

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".

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.

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.

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.

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.

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.

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.

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

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.

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!

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.

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

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.

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!!!

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.

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."

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.

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

Tip for the future, try and avoid putting and titles near the bottom of the video frame, as thats where RU-vid 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.

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.

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

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

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

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

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.

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

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.

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

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

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.

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!)

Really excellent and clear overview! Well done, Joe!

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

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.

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

Thanks a bunch. Clear explanations, with style!

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

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

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.

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

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

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.

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.

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

Outstanding video and expert delivery.

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'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.

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

Very very helpful.. good education.. thanks Joe..

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

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.

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

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

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.

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

Thanks, great info as always~!!

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.

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

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

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.

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

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

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

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

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 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.

Excellent presentation. You are a good instructor. From another instructor.

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.

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

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!

Very well explained. Thanks. 🙂

Good summary of the different file formats. By the sounds it, PNG is a good option for achieving images if you plan on manipulating it in the future (or tiff) Irfanviews an awesome graphics utility. I've been using it for years and it's so easy to manipulate images quickly (rotate, resize, crop). One of the great things about it is plugins. You're able to get plugins to handle those annoying formats (like WebP, HEIC etc),

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

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

thank you for this very important information. it help everyone very much in these very challenging time

Thanks. Very informative.

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

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

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.

Informative. Thank you very much.

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.

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

Very informative. I had n9 idea. tiff was such a powerful format. Indexed color is interesting in the sense that's how 3rd and 4th generation consoles primarily distributed colors to the on-screen elements.

Great explanations...thank you.

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

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

Very informative, thank you very much 👍

Awesome info thanks! 👍🙏

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.

so tiff is the matroska of the image formats?

Very informative, thank you.

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.

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...