Since the web is constantly being streamlined for faster download times, images used in web design have been down-sampled, making them quick to download and small enough to view well on screen, but not large enough for professional printing.
So how can you figure out whether or not images from the web are high-resolution images (good for printing) or a low-resolution images (good for screen viewing)?
In order to understand why not to use images from the web, you must first understand what resolution means. Below is an explanation of resolution as posted on About.com by Sue Chastain:
Resolution is a measurement of the
output quality of an image, usually in terms of samples, pixels, dots, or lines
per inch. The terminology varies according to the intended output device. PPI
(pixels per inch) refers to screen resolution, DPI (dots per inch) refers to
print resolution, SPI (samples per inch) refers to scanning resolution, and LPI
(lines per inch) refers to halftone resolution.
How to determine the image resolution of a photograph downloaded from the Internet:
iOS operating system
(MAC)
|
1. Find
an image on-line that you want to download by searching images using a search
engine such as Google or Bing.
| ||
|
2. Right
click on the image in your website browser and select >Save As.
| ||
|
3. Save
the file to your computer in a folder that you can easily find. It might help to rename the photograph
something you will remember.
| ||
|
4. Navigate
your way through your computer to the photo you saved in step 3.
| ||
|
5. Right
click on the image file and select >Open With.
| ||
|
6. Select
the program >Preview from the drop down menu that appears.
| ||
|
The file
will automatically open into the program you selected.
| ||
|
7. Once
the file is open in Preview, select >Tools from the menu at the very top
of your computer monitor. (See Image iOS.1)
| ||
|
8. Select
>Adjust Size from the drop down menu. (See Image iOS.1)
| ||
|
A new
dialogue box will open, displaying the image width and height.
| ||
|
If the
measurements for the width and height don’t appear in inch measurement, then
select the drop down box to the right of the width and height to change the
rules to inches. (See Image iOS.2)
| ||
|
Make sure
that the “Scale Proportionally” and “Resample Image” boxes show a check mark
before continuing on to the next step. If these two boxes do not have check
marks, check the boxes to enable the “Scale Proportionally” and “Resample
Image” options.
| ||
|
9. Change
the resolution of the image to 300 pixels/inch (for our purposes, PPI and DPI are considered the same)
| ||
|
Because
the box labeled “Scale Proportionally” is selected, the width and height of
the image will change automatically based on the resolution that you
choose. Once you change the resolution
to 300 PPI, the width and height measurement that you see are the largest
size that the image will print without losing its quality. If you print the image larger than the size
indicated in this dialogue box, the image be fuzzy.
|
Windows Operating system
|
1. Find
an image on-line that you want to download
| ||||
|
2. Right
click on the image in your website browser and select >Save As
| ||||
|
3. Save
the file to your computer in a place that you can easily find it. It might help to rename the photograph
something you will remember.
| ||||
|
4. Navigate
your way through your computer to the photo you saved in step 3.
| ||||
|
5. Right
click on the image file and select >Open With
| ||||
|
6. Select
the program >Paint
| ||||
|
7. Once
the file is open in Paint, click the Paint tab located at the top of left of
the window, highlighted in blue. (See Image WindowsOS.1)
| ||||
|
8. Select
>Properties from the drop down menu. (See Image WindowsOS.2)
| ||||
|
A new
dialogue box will open displaying the image width and height and DPI (print
resolution).
If the measurements for the width and height don’t appear in
inch measurements, then click the option to change to inch measurement.(See
Image WindowsOS.3)
| ||||
|
Typically
images pulled from the Internet will have a DPI of 72 or 96, which are the
recommended size for easy downloading.
Since the image pictured is 120 DPI at a width of 3.4” and a height of
2.7”, the size of the image will be 2.5 times smaller at 300 DPI than the
size of the image at 120 DPI.
| ||||
|
9. With
some simple math we can determine the actual size of the image when changed
to 300 DPI.
| ||||
|
Divide
300 by the exiting images DPI.
(Formula: 300÷Image DPI) 300 ÷ 120=2.5 | ||||
|
Then
divide the width by answer to formula 1 above, in this instance the answer is
2.5: 3.4÷2.5=1.36
| ||||
|
Divide
the height by the answer to formula 1 above 2.4÷2.5=.96
| ||||
|
After
doing this small amount of math, I have determined that the image size of the
example image at a print resolution of 300dpi will be 1.36” x .96”. If you print the image larger than the size
calculated, the image will be fuzzy.
|
If you do happen to find an image online that is high enough resolution to print, the image may be copyright protected. There are better ways to find images to use for design. Stock photography websites (istockphoto.com, shutterstock.com, corbisimages.com, etc.) allow you to purchase a license to download and use high resolution versions of many professionally photographed images. These sites are great tools to help you avoid the pitfalls that can occur when you attempt to design using images pulled from a website.
Lesson Learned: Pulling
images from the Internet for use in print design is a mistake.
This was very informative. In fact, I bookmarked it for future reference. I like how you included the images so the reader knows exactly what to look for.
ReplyDeleteOne major technical issue, you refer to "iOS" for the mac, but iOS is the operating system on Apple's mobile devices such as the iPod/iPhone and iPad. What you are talking about is actually called "Mac OS".
ReplyDeleteThe major thing that bothered me about this was that at the very end you have the information that should really be the primary part of this: don't just pull random images off the web for use with printing. There are technical reasons and legal reasons ("the image may be copyright protected", the image is always copyright protected!) for not using a random image off the web and as designers and media professionals, it should be known that this is how things should be done. Yes, it still happens, but it shouldn't.
Another technical problem: in the Mac section you tell the reader to make sure "resample image" is checked. By doing this, the image will be falsely scaled. by not resampling, when you change the resolution the pixels will remain the same but the sizing will shift based on the number of pixels available. Resampling means that the program takes the current number of pixels and interpolates them to create new pixels if the image is scaled up.
Maybe a better angle for this tutorial would be to understand resolutions to allow people to know what resolution image they would need to purchase from Shutterstock or something. Most of those sites will give options and pricing based on the resolution of the image purchased so knowing what resolution you will need would be really helpful.
The tutorial as a whole is very well written and clear with a lot of very good information about calculating resolution and other stuff. I think it would work better to have the last paragraph up at the top and then use the rest of the article to explain how to understand the resolution and stuff.