One of the fundamentals of being a graphic designer in the digital age is understanding different file formats for your images. Knowing how to save your images requires consideration of what your end product will be and its application. You use different file formats for print projects than you do for web design projects. Using the wrong format could result in your design not looking how you intended, or it might not display at all. This is disastrous for a designer or a design firm in business-wise, because it can end up in a loss of money, or degradation of your reputation.
Print File Formats
For print, you can use .psd, .jpeg, or .tiff files. One thing to note, you can use all of these file types, but some are better than others. A few years ago, you couldn’t use a .psd file in your print design, but now, with Indesign created as a competitor to Quark, Indesign allows you to place a native psd file directly in your design work. They are used for print specifically, but only available for use in InDesign and Quark 8. Otherwise, you should use a tiff or high-resolution jpeg file.
A jpeg can be used for print or web design projects, but where you use them depends on their resolution. 72dpi is used in web design, because the file size is relatively small. It can be used in print design, but the resolution must be 300dpi or above. An important note regarding resolution is that no matter whether you are using a tiff, jpeg or psd file, you should always start out with high-resolution images, and keep those versions of your files. If you need to create a version of your image that will work on the web, then you can save a copy at a lower resolution.
You can go down in resolution from a high resolution file, but you can’t go to a higher resolution from a low resolution file, because you will lose a great deal of quality and detail. A great way to think of it is this: in a high resolution file, you may have 20 pixels transitioning from one color to another, but in a low resolution file, that same color transition may be 2-3 pixels, and Photoshop has no way to create the necessary pixels to make that transition when resizing from a low resolution file to a high resolution file.
Tiff (Tagged Image File Format) files are used for print as well. They are much larger in file size than jpeg files, but can still be smaller than native psd files, simply because psd files may contain dozens of layers, which increases file size. Tiff files are flat images, but they contain a lot of information and detail. They can be compressed as well. They are most commonly used for print applications and desktop publishing. They are not normally used for the web, because of their size, and most browsers have adopted the jpeg file support. Some browsers don’t support tiff files at all.
EPS (Encapsulated Postscript) files can be used for print as well. They usually contain vector graphics or text and are supported by many programs. For printing, you should make sure that you are using a postscript printer for the best results. You may have issues if you try to print on a printer without postscript capabilities. There are options when you save your document in Photoshop that may help, such as including vector graphics, or enabling color management, but this all depends on your application.
Web File Formats
Jpeg, as mentioned earlier, is used for web and print. The best method to save your images for the web is to go to File>Save For Web and Devices. A large screen will come up with a large preview of your image, and you can even file the file size in the bottom left corner. It will change when you select different web formats and settings.
You have three preset options for jpeg- small, medium and large. Each one has a value ranging from 10-100, but you can manually set it to 100 if you would like. 70-80 is usually a good choice if you want to keep a nice level of quality while shaving down your file size. If you are looking for really fast loading images at the sacrifice of quality, then you can set it to 30. I usually don’t go any lower than 30 for any images.
Gif (Graphics Interchange Format) is used exclusively for the web and has many different uses. Many web designers use these for simple graphics such as dividers and spacers, because they are extremely small in size. They load quickly, but work best in single color or simple applications. You don’t get a lot of detail from gif files, so it is good to use them sparingly. Another use for gif files is that they are used for quick animations.
Animated gif files have been used for banner ads and flashy ads to get your attention. With the increasing speed of internet providers, they are being replaced more and more by flash animations. Another reason many people use gif files is because they support transparency, which means that you could place logos or shapes over a background giving web designers some flexibility with layout designs. The downside is its color limitation, only offering up to 256 colors, depending on the options that you choose in Photoshop.
PNG (Portable Network Graphic) is a file that is used for the web. The great part about PNG files is that they support transparency, and offers more color depth. You will see PNG-8, PNG-24, and PNG-32 file formats in your Save for web options, and it is important to know the difference. PNG-8 does support transparency of its background, but it is dithered, and it supports alpha transparency. Alpha transparency means that you can see through the image itself and see what is behind it. You will see a boundary around your image which doesn’t transition as smoothly as PNG 24.
This is ok for shapes and icons, but if you want to blend an image, you may run into trouble in most cases. PNG-24 supports transparency, but it also increases the file size. An optimized jpeg is generally smaller than a PNG file, because it displays up to 16 million colors. I only use PNG-24 when I want transparency of a mid-sized graphic. There is a PNG-32, but I rarely use this format, because it results in large file sizes, which aren’t necessary in most applications. It supports both alpha and index transparency, which means the image can be transparent, and the background can be transparent as well.
It is important to know the different file formats that are available to you, and when to use them. They can save you a lot of time and effort when dealing with print or web graphics, and knowing when and where to use them will help your projects look how they were intended to look. Using the right formats can also make your websites load faster, and look good, too.