The release of Sony’s PlayStation 3 in late 2006 marks the second chapter of the so-called console war between Sony and Microsoft. Released a year later compared to Microsoft’s Xbox 360, the battle between the PS3 and the 360 also provides the ground for another low-key battle between HD DVD supported by the 360 and Blu-ray discs supported by PS3. This format war, eventually won by Blu-ray, didn’t attract as much attention as the one between the 360 and PS3 but for those in the know, formats actually have incredible importance.
Formats, whether we’re talking about physical (HD DVD and Blu-ray from the example above) or digital (MP3 and FLAC, for example) formats, are important because they dictate the quality of what’s contained within. For this piece, we’re going to be talking specifically about image formats. For the general public, this might be irrelevant but for those working in the field of web development, knowing which image format to use is incredibly important as they can have a considerable effect on the performance of a website depending on how many images are displayed on a single webpage.
Diving into the different image formats
A couple that I’m pretty sure we’re all familiar with are JPG/JPEG and GIF. They’re two of the most popular image formats but they’re far from being the only game in town. Just as how the popularity of MP3 by the likes of the more technologically advanced AAC, it remains to be seen just how long the above formats are going to stay popular or whether there will be any new formats that are going to top them in terms of size and/or quality.
That last part there is important as the main consideration for website images is a compromise between speed and quality. You want an image that’s going to load quickly when viewed on a mobile phone with spotty connection but that very same image has to look just as good when viewed on a high-resolution monitor. Depending on your priorities, you might want to swing for speed over quality or vice-versa but the ideal is still to find the perfect balance between the two and knowing the right image format to use would definitely help.
JPEG or JPG
Short for Joint Photography Experts Group, JPEG is one of the most common formats used for storing, sending and displaying images on the World Wide Web. This format supports lossy compression and is just as old as yours truly, having been established in the early 90s and is typically used for digital photography. Uncompressed, JPEG has a depth of 24-bit, providing a higher color resolution than what is visible to the human eye. This is why most JPEG images you see on the web are typically compressed as there’s quite a bit we won’t notice anyway.
The problem with JPEG is that while it’s incredibly useful for the purpose of digital photography, capable of shrinking the size of an image by a factor of 10 with negligible reduction in quality, JPEG doesn’t fare as well when it comes to illustration and/or artworks. For images with a considerable amount of sharp edges, which is pretty common in fonts and other illustrated shapes, even small compression would produce a number of unsightly artifacts. In cases like these, you might want to keep reading for an alternative.
GIF
We know now GIFs for those cute animations and memes hosted on websites like Giphy but when it was created in the 80s, GIF was also used for regular images. The reason for this shift is simple, GIF only supports 256 colors which were fine when people were still operating computers with DOS and mobile phones are limited to episodes of Star Trek. As technology progresses however, the public began demanding a more colorful world and GIF was eventually replaced by PNG, which will be detailed later on.
What kept GIF alive however is the fact that it supports simple animations as long as quality isn’t a concern. Since memes are all about the laugh and not about say, the detail of the wrinkle in Steve Buscemi’s face in that famous “How do you do, fellow kids?” meme, GIF is still widely used today because of its simplicity and the fact that it’s supported by almost every platform in use today. If you’re trying to insert something funny in your post without having to worry about performance, this is the one you’d want to use.
PNG
Portable Network Graphics or PNG is a lossless image format that was meant to be the newer, younger model to replace GIF for reasons that had been explained in the section for GIF. PNG act as a complement to JPEG as as a lossless image format, PNG is able to compress an image without discarding any information contained within the image. The result is that the size of the image is on the heavy side but PNG is capable of downsizing an illustration or artwork without causing unsightly artifacts.
WebP
Think of WebP as the Blu-ray of image format in the early 2000s, promising improvement across the board while trying to convince other companies to support the format. Started by Google, WebP uses a more sophisticated algorithm that enables the format to achieve smaller sizes with comparable quality compared to JPEG while still supporting lossless compression and animation. It sounds great but there hasn’t been much traction behind the format until recently when Firefox announced support for WebP earlier this year. It still remains to be seen whether this image will receive widespread adoption in the future but given the usefulness of the format, you might want to keep following the news in regards to WebP.