When you create an image in photoshop or some other image editing program, how you save it can effect the quality of the final product. Depending on what kind of image you have and what you want to do with it, different image formats also called image file extensions can serve different purposes and it is important to understand these when you save the file. Here we are going to look at when to use and not use common file formats.
| What's The Image For?
|| Recommended File Type
|Web Buttons and Logos
||Allows for compression, alpha transparency, true color and is great with straight lines and text
||High detail with small compression. Great with gradual color changes in regular photos
||No compression for highest image quality
||Standard file type for respective programs (Photoshop, GIMP, Corel). Maintains extra data like layers and effects
|Images in Documents
||Maximum compatibility in sharing with extra security and saving features
|Simple Web Animations
||Small and simple web animations
.JPEG File Extension
images are the standard for pictures both on the web and in print. They can be scaled by file size as with their lossy compression
encoding system, meaning the images can be compressed extremely small but some of the information in the image will be lost. JPEG images can be made extremely large, up to 65,000+ square pixels and can allow for 16 million colors simultaneously. This makes them ideal for detailed bitmap images.
JPEG uses a lossy compression
method which means images lose data as they are shrunk but can be compressed extremely small. For this reason, JPEGS are excellent for web images. What would normally be a very large image can be significantly shrunk while losing predictable amounts of detail.
Here is an example of an original image that has been compressed to 10% of its original size. Even with this fairly extreme shrinkage it still maintains a high level of detail.
While JPEGs are great for these types of pictures, they have a tendency to create unnecessary noise on simple images. Here we see a close up of the above table saved as a JPEG and PNG respectively. The area around the text in the JPEG version has extra colorized pixels where the PNG image is flat. Also, because their compression allows for the loss of some data, JPEGs can be significantly worse for printing. As you edit and work with a JPEG it will suffer some degradation in quality every time you resave it. This is why you should always keep a masters copy of your JPEGs in a lossless compression format such as TIFF and PNG. These formats use a lossless compression algorithm which will keep them full of all that good data no matter what you do to it.
.PNG File Extension
is a file extension
type that was created to replace GIFs. It has many powerful features while also having lossless compression
. PNG images have alpha transparency
which means not only can they have transparent backgrounds (unlike jpegs), they can also have different density and colors in their transparency over an image. This makes them ideal for web overlays, buttons and graphics. They also load using an algorithm that looks more organic then traditional loading. GIF and JPEG images load vertically, from the top down while PNG images load as a the full image but less focused and gets gradually more detailed until it has completely loaded. This can help give the illusion of faster load times and looks much better for graphic based websites. PNG images are also much smaller than GIF images and thus will load much quicker.
The only real downside of PNG files is that because they use lossless compression they are often much bigger files than a well compressed JPEG for photos. For simple images such as text and uniform color, PNGs are normally smaller than their jpeg counterparts but for complex images such as photos jpegs can almost always be much smaller. The upside of their lossless compression is that PNG files are also a good format for saving original documents.
.TIFF File Extension
files are the largest and most powerful files for image processing. Like PNG, TIFF uses a lossless compression method and is ideal for printing as there is no compression of any kind. TIFF images can also contain information that other image types can't. For instance, TIFF files saved on Photoshop or other image editors can retain aspects like glow, transparency and layers making them a viable option for passing between different image editors.
Because of their size, TIFF files are not suited for the web but are ideal for printing. TIFF files will not create any distortions or artifacts like a JPEG and will be completely uncompressed every time. Because they are both lossless TIFF and PNG are very similar in the way the operate and there is some debate over which is better to use. There is no doubt that for the web PNG is far superior but many prefer TIFF for printing because of what some have noted as faster rendering times on saved images.
.PSD/.XCF/.CDR File Extension
PSD or Photoshop Document, CDR for Corel Draw and XCF for GIMP's native file format are the standard formats for these three photo editing programs. While they sometimes work across multiple programs, these extensions are used as the primary information transfer for their respective image editing programs. These files include the image that is being edited as well as a number of program specific settings that can be saved and reopened to allow for easier editing. This can include effects, layers, history and numerous other program specific information. These are normally lossless uncompressed files that work to save editing information across multiple systems or saves.
When you have a final product it is best to export these files into a more widely recognized format such as TIFF, PNG or JPEG.
.PDF File Extension
documents are best for images within a document. PDFs are extremely mobile and are the standard for sharing documents between computers. They have a number of features that no other file type has such as password protection, letter recognition and various other unique services outside the scope of other formats. While this is not the preferred format for editing, quality or printing, it is the best for including text and images in an easily shared document.
.GIF File Extension
used to be the standard format for images on the web, it has since been replaced by PNG in almost every circumstance. They have a very limited color spectrum, allowing only 256 colors per image and larger files sizes than PNG. Its only advantage is that it can do simple animations.
Our logo with a simple animation