Image Format Guide (12023-07-02)

brook > dive > images

Graphics Interchange Format

GIF is an outdated format that only supports a palette of up to 256 colors (out of a possible 16,777,216). Unless you need to display a simple animation, GIF should be avoided in favor of either PNG or web video.

With regards to the pronunciation: Generous giraffe geologists gently gyrate genius German generals. Next, we're going to talk about juh-fegs, which is obviously pronounced that way because of what it stands for. How to Pronounce GIF Do You Pronounce it GIF or GIF?

Joint Photographic [Expert] Group

JPG is a lossy format best used for photographs and other complex images with many different colors. Depending on the export quality level and complexity of the image, compression artifacts may be visible.

As an example, compare PNG and JPG screenshots of my old website. In contrast, a photograph takes up 20% of the space its PNG source file does without any visual difference.

JPG vs PNG for screenshots (83 KiB) On the JPG half, note the decreased color fidelity of the browser's icons, visible compression on the website navigation, and fuzzy body text. Granted, it was exported at 70% quality to intentionally evoke these effects, but even with that, the filesize was still larger than an optimized PNG; 123 KiB to the PNG version's 66.

JPG vs PNG for photos (9.3 KiB) This is the only photo I have saved in a lossless format, demonstrating JPG vs PNG compression of complex images. The PNG version is 718 KiB. The JPG was saved at 99% quality and is 142 KiB. There is no noticeable difference between the two, even up close, due to the diversity of real living color.

Portable Network Graphics

PNG is lossless and supports 24-bit color with transparency. It is best for icons, simple graphics, non-game screenshots, pixel art, vector art with solid colors, and reducing the file size of non-animated GIFs.

Try and Err

If you don't know which to use, just experiment with all formats. Check the various quality options, and see if you can get your image to look the same but with a smaller filesize. My standard methods for optimization are, for complex images: save (from PNG) as 97% quality JPG; for simple images: save as GIF to reduce color palette, optimize with PNGGauntlet; for lineart and sketches: use PhotoScape's Threshold tool to create a 1BPP PNG.

Additional Resources

Photoscape PNGGauntlet JPGExtra Trout's GIF Optimizer GIF2APNG APNG Optimizer Compress Or Die Become a Compression Sorceror

---