Understanding Image Resolution: DPI in Print Vs. Web (Part 1)
Getting the right image-file size can be a headache for anyone. Uploading images sometimes seems impossible because of website requirements (too large, too small, wrong file type- you name it!). And it’s not unusual to take a beautiful image from your screen and find it completely pixelled in print .
Optimizing your images' original file for print or web use in advance is the best way to guarantee the results you are looking for. If you’re looking to print, then resolution is a big deal. Scratch that, image resolution is a HUGE deal for both print and web mediums. There are ideal resolution values for every printing size. Printing a poster out of an ID size picture might not turn into great image quality. In fact, in most cases it will not. Sometimes people think, "oh well on the web there’s not such need for optimization; if the image is big it it'll work..." right? Wrong! Image size plays a big role on page loading time and something as simple as naming your image properly could increase visitors. Larger images may look better, but also kill your load times and increase bounce rates.Understanding the The Basics
Before you get started, there are some terms that you should get familiar with:Dots Per Inch (DPI): Each dot is a sample of your image. The amount of dots per inch determine the overall quality of your image. The more dots, the more detail. Standard and Professional Printers produce images with tiny dots that mix four colors: Cyan, Magenta, Yellow and Key black also known as CMYK or the subtractive color system. There is space between those tiny dots (less space - crisper image) and the DPI refers to their density.
Pixels and Pixels Per Inch (PPI): Wikipedia describes them as "the smallest controllable element of a picture represented on the screen". Each pixel is a sample of your image, made up of tiny “sub-pixels” that combine light elements that the naked eye blends into one. In addition, pixels help create images using a 3 or 4 color system. RGB (Red Green and Blue) will display better on screens, whereas CMYK will provide the best results in digital and/or offset printing.
Resolution: This is your image quality. If your resolution is high, your image becomes clear and sharpened to the eyes. Your image resolution requirements change from web to print. 72dpi would be completely acceptable for a website, but if you’re going to print it will not look its best. Depending on your printing size you could start at any point between 150dpi and 300dpi. (300 dpi is usually the default for most high-quality printed products).File Formats
You have probably found .jpeg, .png and .gif files on different websites. These names indicate the format of the file you are dealing with. Here’s what you should know:-
JPEG stands for Joint Photographic Expert Group. This format is the most commonly used on the web because it’s ideal for colors and brightness. Photographs are usually saved in this format.
-
PNG stands for Portable Network Graphics. It’s mainly used to preserve transparencies on images. Therefore they become easier to include on graphics, especially if you’re creating buttons or icons.
-
GIF stands for Graphics Interchange Format. It supports animations and is very useful for large blocks of color.