File Formats & Resolution & Resizing (by Shane McGeehan: The Photography Notebook)
Here are some more excerpts from my Photography Notebook. Due to our raging discussion at one of the meeting about image formats and resizing files, this might come in handy. It should be helpful to understand why we work with PSD or TIF files, then convert to JPG for the internet (facebook, email, websites).
File Formats - There are many formats that an image file can be converted to. Each format has their pros and cons and are designed to work best in certain situations. Some are great for compression, others for quality, website use, icons, those stupid 1990's animated graphics, and much more.
Lossless - The image is uncompressed (or only compressed very minimally) to preserve full quality. These files take up a lot more memory, but keep our image pretty much exactly how it is, with no color shifts or nasty artifacts. Here are a few popular examples.
- RAW - RAW camera data - Completely unprocessed image data from the camera sensor. Used to keep the most wide range of color quality but need to be processed and saved to another file format before printing. They also save metadata within the file showing us all of the camera settings, time, and other details. All cameras have their own formats: NEF = Nikon / CRW = Canon / DNG = Adobe
- PSD - Adobe Photoshop main format - Used to keep all layers, masks, text and other elements separate and uncompressed for further editing in Photoshop.
- PSB - Adobe Photoshop large file format - Used in the same way as a psd, however it can hold a much larger file in both resolution and memory. (psd files are limited to 2GB I believe)
- TIF - Tagged image file format - Used widely by photographers as a lossless way to save an image file due to its compatibility with many programs and systems. The files can also hold layers, masks and other photoshop elements similar to a PSD file.
- PNG - Portable network graphics format - Mainly used on the internet for non-print image files. The format also supports an alpha channel allowing graphics to have transparency.
Lossy - The image is compressed to a smaller size, but also looses quality. Special algorithms remove color and detail that the eye may not notice in order to shrink the files memory size. Some formats offer different compression levels so we can choose quality over size or vice versa.
- JPG - Joint photographic experts group format - The most commonly used format, both for detailed photography and small web graphics. The algorithm used can compress a file on an adjustable level for higher quality or smaller file size. At higher quality, the files have little noticeable loss and are nearly a tenth of the size.
- JPG2000 - Joint photographic experts group 2000 format - Can be lossless or lossy. Used for compressing files with minimal quality loss. Currently the format is not supported by many programs or browsers, so it is not used on the internet for viewing. Good for storage however.
- GIF - Graphics interchange format - Widely used for internet graphics but terrible for photography due to its 256 color palette limit. It does however support simple animations.
Resolution - An images size depends ONLY on its pixel count. However pixels are relative, and so an image is also given a resolution that tells us how many pixels fit in a defined area, typically an inch. In photography, there are two very different and very important resolutions to understand: PPI and DPI.
Pixels Per Inch (ppi) - PPI is for files, defining their size and quality. A certain PPI should be set depending on what we plan to do with our file.
- Screen Resolution (72ppi) - When creating an image file for use on the internet or some other computer display device we will want to set the image at 72ppi. Generally displays can only show 72 to 100 pixels per inch, and so making our images ppi larger than this would be pointless, and just take up more memory.
- Print Resolution (300ppi) - When creating an image to print out such as a photograph we will want to set the ppi around 300 for the best quality. Going lower than 300 is fine if needed, however the lower we go the more quality and detail is lost. Secondly, it would seem like going higher than 300 would give us a better print, but this is not true.
Dots Per Inch (dpi) - DPI is for printers, defining how many little dots of colored ink will make up an inch of our file. The better the printer the higher DPI it will allow. (Example: The Epson 7880, a 24” professional printer, can go to 2880dpi however prints still look nice at the 720dpi setting)
Resizing An Image For The Internet - Here I will just go off a bit about resizing methods using Photoshop as a standard. First of all make sure you NEVER save over your original or you will probably burst out crying. I typically use a Photoshop Action i created to resize my images, but here is another quick visual method that works very well:
- To begin, open a photograph in Photoshop. Typically our original image is very large in size and probably at a resolution of 300ppi or around there. Now to resize visually, simply zoom out until the image is the size on your screen that you want it to be for others viewing on the web. Now look at the bottom corner of the image window to see what zoom % you are currently at. As an example lets say it says "15%" - remember this number.
- Next, use the Image Size window [Edit > Image Size]. Make sure the “Resample Image” option is selected: This will squish our image and make it smaller. Also make sure the "Constrain Proportions" option is selected so that as we resize our image it will stay in proportion.
- In the 'Resolution' section change that to 72 pixels/inch. (Remember that resolution is only a way of describing the image, and really doesnt have to do with changing its actual size. The 72ppi is the standard screen resolution. Going higher will be pointless for our resizing goals, and going lower is not recommended, as most screens show 72 to 100 pixels per inch)
- Next, in the top section that says "Pixel Dimensions", change the drop down box so that it says "Percent". Now take that percentage number from step one (our example was 15%) and enter that in as the 'Width' (the 'Height' should change also). Below that you can see in inches what the image will appear as. Click "OK" and then view the image at 100% - It should be about the size that you wanted.
- Now we need to convert the files color profile to sRGB so that the colors look correct on the web. Click [Image > Convert To Profile] and in the "Destination Space" choose 'sRGB' (There is more craziness to this but it's too long to explain, so this should do just fine). Click "OK".
- Now, it would be smart to enter some metadata like copyrights, your website, your name and other details into the file. I am going to skip this for time's sake.
- Lastly, go to [File > Save As] and choose JPEG in the drop down menu. A window will pop up asking about quality. The slider goes from 1 (worst) to 12 (best). Choose whatever works for you. I like to choose a high to mid-high quality so that the image looks nice.
Remember this is just my method. There are a million ways to do anyhting in photoshop, and you have to read around and find what best suits your needs. I hope this was somewhat helpful to those wanting to know more about images, formats, and resizing.