JPEG, Save For Web or Save As, Don’t Be Fooled
Use The Right Tool For The Right Purpose
One of the most misunderstood methods for displaying images on the World Wide Web, which is accessed through the Internet, is the proper method for saving images for websites, or on web pages in general. The same applies for emailing photos too, if only used for viewing in an email.
Most photographers feel that selecting the option “Save As…” in the Adobe® Photoshop menu, provides a much better quality image in the JPEG format vs. “Save for Web & Devices.” There is some truth in this, but only if you understand that it’s about using the right tool for the job and in the case of displaying images on the web, Save for Web & Devices is the best option. It’s in Adobe’s menu title, Save for Web…they are the experts of their own software product. Let’s look at why it’s the best option?
You can find the JPEG save options in the Adobe Photoshop pull down menu. Here the two options are highlighted for you.
First, it’s important to note, saving an image in either menu option indicated above results in the final photo file compressed using software algorithms—this is a form of lossy compression. These algorithms interpolate data and we all know, interpolation always results in some degradation. However, thank goodness to the professional engineers of Adobe, degradation is always reduced to a minimum using the standards of the JPEG format—yes, JPEG not JPG. JPG, or .jpg, is just a file extension, nothing more.
JPEG stands for Joint Photographic Experts Group, they invented the JPEG technology, not Adobe, not Microsoft, not Canon, not Nikon, not the Internet folks ICANN (Internet Corporation for Assigned Names and Numbers) or the color profile folks at ICC (International Color Consortium), or anyone else for that matter. In fact, the JPEG standard comes in more than one JPEG file format. It comes in JPEG/Exif commonly found in digital cameras plus most photographic capture devices. Though the JPEG format most people have never heard of is the JPEG/JFIF, which is the JPEG standard used more for “storing and transmitting photographic images on the World Wide Web.”
Exif data contains more than just camera settings, including serial numbers of your equipment. For security reasons, I've removed my lens serial number.
The Exif (Exchangeable image file format) contains data that includes date and time, camera settings, a thumbnail for camera LCD screen previews, descriptions, copyright information and even geolocaton data. With today’s world of privacy concerns, it’s important to note, there is tons of information anyone can gather from the Exif data, including the serial number of your equipment. This might be a security risk to some people and all that data also adds to the file size of the image. The JFIF (JPEG File Interchange Format) is an older standard that added component sample registration, resolution and aspect ratio, plus color space. There are however limitations with color space, such as not including the ability to “accurately transport color-managed images across the Internet.”
As you can tell, there are some highly technical differences between the two formats and some software companies and camera manufactures use a combination of both. This technical is something I’m not qualified to even attempt to explain, so I’ll just focus more on why Save for Web & Devices is a better option when saving your images for web or email use—again, on email use, only for viewing in emails. Save as…is a better option if you want someone to utilize your final file for publication or where a much larger file size, in pixel dimension, such as for printing, editing or reproduction, is the primary use—but only if using email to send the file across the Internet, otherwise there are better file delivery options such as TIFF (tagged image file format) via FTP (file transfer protocol) into a web server.
But all the technical talk aside; let’s look at why Save for Web & Devices (SWD) is better than Save As… (SA). One reason is the final file size of the image is always smaller at the same compression levels. There are many reasons file sizes are smaller, but the major reason is that using SWD saves the image in a 216 browser-safe color pallet for the red, green and blue channels vs. the SA method, which uses a 256 color pallet. Think of 216 times 216 times 216, which equals to 10,077,696 potential shades of color vs. 256 times 256 times 256, which equals to 16,777,216 potential shades of color. This is a total savings of 6,699,520 potential shades of color divided equally for the red, green and blue color channels. That’s almost a 40-percent reduction in color information alone—that’s a lot of data!
The options I choose are highlighted when "Save for Web & Devices" is selected in the pull down menu. You can use 40 and above as your quality safely, as it's best to keep your file size below 100K. Newer versions of Photoshop will also allow you to convert to sRGB, the common color profile used by all web browsers. This is important if you capture your images in other color profiles.
Of course, you’re probably asking yourself, why would I want to reduce the color information, or the ability to represent the true color in the original photo by 40-percent? The answer is simple. The browser-safe pallet of colors used by most web browsers is based on 216 web safe shades of red, green and blue. Chances are, if you use the SA method, your browser will discard or not display accurately, the extra color information—after you’ve downloaded that data.
The reason this browser-safe, or web-safe pallet exists is because Apple Mac computers display the remaining 40 shades of each color different than most personal computers that are non-Mac. Mac is a master at color management with their Color Sync technology and arguably the best system for representing color accurately on a monitor than other Windows or personal computer based systems. Notice I didn’t say PC, as PC stands for personal computer and a Mac system is also a personal computer. This is not a MAC vs. PC argument that can last for many days, this is about color management and Apple stays more on top of accurate color representation through their devices than other operating systems.
This web-safe color pallet is based on old technology that goes back to the days of the main browsers being Mosiac, Internet Explorer and Netscape for accessing the Internet. Much like the sRGB color profile, used in color management, the system is antiquated, but stays a default standard because the greatest common denominator of computer users are not Mac, though Apple is gaining ground. In fact, under Adobe’s Dreamweaver help section, “Testing, however, reveals that there are only 212 web-safe colors rather than a full 216, because Internet Explorer on Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).”
Add to the mix that more people are using their mobile devices for surfing the web today than ever before, it’s considered more important to use the 216 browser-safe color pallet. On the same Adobe Dreamweaver help page, it states, “One reason to use the web-safe color palette is if you are developing for alternative web devices such as PDA and cell phone displays.” Adobe Dreamweaver web design software for professional designers and webmasters is like what Adobe Photoshop is to photographers—the standard.
This image of Cecilia, captured during my recent Moab photography workshop, was saved using the "Save for Web & Devices" option in Adobe Photoshop at 70-percent compression. The file size is almost 61K and if you download the image, there is no Exif data.
As you can see, it’s certainly colorfully confusing, so I’ll just move on to another reason to use the SWD JPEG method. Exif data is stripped in SWD but not in SA. While some photography websites rely on Exif data to display the metadata, or technical information on how a photographer captured an image, it’s additional data that most people never see and the majority of websites don’t display—basically, metadata included with your photo only increases the final file size.
The key to uploading photos to websites is the same for downloading, keep the file size small, no one likes to wait for uploads or downloads—and it takes more bandwidth for both. Keeping image file sizes small and simple is vital when building great websites. Who has time to wait? It’s been proven over the years that slow websites usually cause web surfers to move on to another search engine result. Nobody likes slow websites, especially if viewed on mobile devices. Slow downloading websites can cost you customers and if you own your own website, chances are you pay for your bandwidth usage which increases with larger file size downloads. Do the math, would you rather your users download a 50K file or a 500K file for the same image?
Finally, one of my favorite reasons for using SWD is because I don’t want anyone to download my photos and print them without my permission. If I display photos that use a web-safe color pallet, the perpetrator only gets about 60-percent of the real image. The quality of a print is degraded when almost 6.7 million potential shades of color are missing. While my photos are subject to theft as are any other photographers, the chances of them being used for printed publication is greatly reduced. With constant copyright violations happening on an hourly basis worldwide for photographers with photos on the Internet, I look at SWD as a deterrent for most copyright infringement possibilities.
The more intricrate the detail in a photo, the larger the file size during compression. This photo is still less than 90K as a JPEG.
As mentioned in the beginning of this article, there is some truth to the fact Save As… is better than Save for Web & Devices when it comes to the JPEG format, however, it’s about using the right tool for the right job. If I’m going to email original images for publication to an editor that can only accept them via email, then I will use Save As…, but if it’s for my family to see via email or my website for personal viewing only, I will use Save for Web & Devices.
As always, I close by saying, please don’t forget about the great men and women in our armed forces. If you see a Veteran, whether it’s active-duty, Guard, Reserve, retired, or inactive, please thank them for their service. For it’s them, their families and friends that make great sacrifices for giving us our freedom to choose, even if it’s how we save our JPEG files. God Bless them! Rolando