Are You Using the WRONG Image Format?

This video took a lot longer to make than I anticipated so please like for the algorithm :_ThioJoeThonkang: 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...

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.

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.

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.

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

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.

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

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.

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.

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!

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

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.