Images For the Web: Sorting Out File Format Frustration

Images For the Web: Sorting Out File Format Frustration

There's no question than that the web has revolutionized photo sharing. Yet not everyone is happy about how their images look when posted online. The best place to start unravelling this frustration and confusion is to look at the available file format choices for saving images.

As with most things, your choice of file formats is a matter of tradeoffs. If there were an easy answer, this would be a rather short article. But while there is no clear winner in all cases, understanding the tradeoffs involved in any given choice should help you to choose wisely and be more satisfied with the results.

There has always been a degree of confusion about image formats for the internet. But in the early days of the web, the debate was between JPG and GIF. The Portable Network Graphic (PNG) format wasn't even invented until the late 1990's, and browser support didn't fully penetrate the market until five to ten years later. Even then, many image producers steered clear of PNG over concerns that at least some users might still be using older computers and web browsers that didn't understand the new format. The logic of such a choice came down to a form of "better safe than sorry," that it was better to stick with tried and true formats that everyone could see than to shoot for better quality than not everyone could see. A web browser than didn't support PNG wouldn't render it badly; it would be limited to displaying a blank rectangle at best.

This issue underscores the dangers of choosing the wrong format. But not all dangers are so obvious. An image saved in a less than optimal format may look OK but may be considerably larger in bytes and thus slower to download. Users don't like waiting. Or you may have to sacrifice quality if you optimize for size. Yes, everything is a tradeoff.

Let's look at the various format choices available.

The earliest image formats were simple bitmaps. Nothing was compressed, and data for each pixel was recorded individually. Such BMP files were easy to display, requiring minimal processing power on the user's computer. But BMP files were huge, and downloading anything bigger than a thumbnail was slow, especially in an era when most users were stuck with dial-up modem speeds. The search for a better imager format was on.

Run Length Encoding (RLE) attempted to address the problem by replacing consecutive pixels of the same color with a single data point and the number of times it should be repeated. A hundred consecutive pure blue pixels took up far less space in the file (and thus in the download stream) when represented by a single blue pixel and the number 100. RLE encoding worked best for simple web graphic that had uniform background or foreground colors. It worked poorly if at all for photos that tended to have at least some variation in otherwise apparently continuous toned regions.

Those who have been around long enough to remember CompuServe. Sorry for reminding you. But CompuServe was the company that, back in 1987, brought you the Graphic Interchange Format (GIF), and so they're relevant to our story here. The GIF format allows each pixel to represent any of 256 colors from a palette. You can choose to use basically any RGB color you want for each of those 256 colors, but you can't use even one more color, anywhere, in the same image. As such, it lends itself best to graphical elements in a website design. Every now and then, I still come across photographs presented as GIF's despite how ugly then appear with such a limited color palette. GIF files do tend to be among the smallest formats for saving images, but they achieve such high compression at a cost. Please, don't post photos as GIF's.

Oh, and CompuServe GIF format is also responsible for a great many of those annoying animated graphics scattered all over the web. Sorry for reminding you of this, too. And "GIF" is pronounced "Jiff," as in the peanut butter brand, with a soft "G" sound, at least according to its inventors. Today, I often hear the hard "G" version too, but maybe everyone is just protesting CompuServe. More on that below.

Now we get to the first of the formats that were designed specifically for photos. As websites continued to proliferate, and as connection bandwidths slowly increased to allow for richer media content, some means of displaying real photographs was needed. Beginning in 1992, the Joint Photographic Experts Group, a committee with members from multiple standards bodies, developed the format that bears its name. A JPEG file makes use of a mathematical technique known as a discrete cosine transform (DCT). JPEG is a lossy form of compression that can achieve ever smaller file sizes by sacrificing ever finer details. The specification does allow for lossless compression too, although this capability isn't widely implemented. An uncompressed JPEG isn't much smaller than a full BMP, and even modest degrees of compression shrink things considerably with little loss of quality. On the flip side, if you compress an image enough, the JPEG artifacts will be quite visible. Don't do that.

Debuting in 1996, the newcomer in web graphics is the PNG file format. The original reason for inventing PNG was that Unisys, the company that had inherited the patents for the lossless Lempel Ziv Welch (LZW) compression used in the GIF format. CompuServe had allowed everyone to use it, but Unisys tried to use the patent as a way to make money, to the annoyance of most everyone who cared about graphics on the web. PNG officially stands for "Portable Network Graphics," but I understand it was also a bit of an inside joke with the hidden meaning of "PING is Not GIF." The peak of the anti-GIF campaign probably came in 1999, when a group calling itself the League for Programming Freedom started a "Burn All GIFs" campaign. Put simply, folks were none to happy with Unisys. Thankfully, the LZW patent expired in 2003, so GIF's are once again legal to use without paying a fee. Gosh.

Since PNG started out as an underdog replacement to GIF, it stands to reason it works well for the same type of palette-based graphics that GIF was meant for. But PNG also supports non-palette RGB images such as the typical photograph, meaning that the same format can be used for both types. The problem with doing so though is that, with only a small degree of lossy compression, JPEG files are pretty much guaranteed to be smaller than equivalent PNG files, and with little to no noticeable degradation. Some images that have a great deal of fine detail, or indeed any image you really care about will look at least a little bit better in PNG (theoretically), but don't expect most people to notice. Especially when viewed at typical screen dimensions, going with minimally compressed JPEG's will almost certainly be your better choice.

So why do people post images in PNG format? Well, many reasons, some better than others. Believing that PNG is both "new" and "better than GIF," some will conclude that it must also be better than JPEG. Other folks will save to PNG because their software (like Photoshop) seem to prefer PNG in their user interface menu design. And yes, yet other folks may knowingly be posting images as PNG because they want them to look their very best no matter what the cost in download speed. And heck, everyone has broadband connections these days anyway, right? Well, no, but increasing numbers clearly do have cable modems or other broadband access. I have, for a couple decades now. But I still find excessively large image downloads a pain while travelling with spottier internet connections, or for that matter, around town when I'm paying for cell service on my Android phone.

There are other considerations such as support for transparency (PNG has it, while JPEG doesn't) that occasionally have to be factored in, and there's no way for me to cover all the nuances of differences, but this should help clear up some of the format confusion. For most photos and similar images, stick with JPEG, and if you want those JPEG images to look their best, go easy on the compression, typically no more than 25 percent, but use your own best judgement. Web browser support for PNG files is nearly universal today, but that doesn't mean you have to use PNG universally, for all web graphics.

Let's block ads! (Why?)

Earthbound Light Photography Tips https://ift.tt/2L0ERWX

Sourced by Time Trap Photography sharing the best photography tips, news and tricks throughout the industry. Time Trap Photography is dedicated to freezing those special moments in life that can be revisited and admired for generations to come. - Shannon Bourque
Please visit our main site for booking availability and rates.