If everyone just knew this, there’s be a reduction in web throughput for everyone. But, unseen, it doesn’t matter; yet I still receive 200kb png’s of grand canyon vistas and other neerdowell imagery for the format.
Question then is, what’s what in image compression? The answer has been blogged about plenty, so to paraphrase it:
End result of any display of image files is to have no perceptible degradation in quality. We wont even talk about 72 vs 144 pxpi for now. Compression techniques fall into either lossless or lossy processes. Jpeg (jpg) compression is lossy, so pixels that the algorithm “senses” aren’t perceptible ( based on compression level choice between 0-100 that you set) are lost. That gives the grainy patchy look on images that are heavily jpg compressedwhich give that lofi sensation.
Gif on the other hand is awesome for solid color graphics like this nice logo here:
Gif provides compression in rows. I’m sure there’s a technically accurate term for this, but the pixel codes are read by the gif engine line by line. Gif notes a color, and uses that code in it’s process until it runs into another color, and then it uses that color’s code until another change comes. So, for graphics like logos with lots of the same color, that’s the way to go. HOWEVER gif is further limited to only 256 colors. That’s typically not a perceptible issue unless your client is narcissistic about his “orange” being ff2d1d and gif can only work with ff1d4e. See? Anyway, there’s a lot of data savings using this method. But imagine using this process for a photograph. In a photo, nearly every pixel is unique, and Gif is lossless so that would not compress a photo very much. It’s a TMI thing for gif. Gif gets awkward. Photo’s are where jpg compression shines as long as the data loss is acceptable. Oh, and two added bonus in gif use are: Transparency and animation. Back in the early 2000’s, gif transparency was our only hope yet GIF does do transparency very well relative to png. And then there is the gif animation resurgent phenomena on the web. Plenty of gif memes out there of cats and cartoons. Nothing else does animation like gif that is native to browser. Any other animation requires a plugin (like Flash). Best use case breakdown for GIF’ing:
- limited color range
- Line drawings, simple colors/cartoons
So, about that png stuff…
Born in the 90’s, it’s a bit of a hybrid between gif and jpeg. It has an 8 bit or 24 bit option. 8 bit is akin to gif. 24 bit is akin to jpeg. Both are LOSSLESS. In testing, it’s still not the best. Or, to restate it, it doesn’t work as good as either gif or jpeg in their basic compression abilities, but again if you want lossless compression as a priority, it’d be better to png an image than jpeg it. And, it’s transparency is far superior to the gif equivalent. Basic guideline:
images such as logos that involve transparency and fading.
Complex images like photos if file size is not an issue.
I tend to go png for most cases as long as file size is reasonable.
Ultimately, this issue has been discussed and monologqued about a million times over. Best quick read on it after a 3 minute search binge is the infographic on Who is Hosting This Blog: