Preparing an image for display on a Web page can be just as important as creating it. That razor-sharp, 6-megapixel image you carefully composed through the viewfinder of your digital camera may end up cropped, sliced, and transformed into a miniature 128-x-128-pixel graphic perched in a corner of your Web page. Visitors to your site are likely to be more concerned with how quickly the image downloads and how clearly they can view its content than its glorious digital genesis. Although Photoshop has some marvelous tools for optimizing an image for the Web, you can (and should) prepare your images ahead of time.
Understanding Resolution
When it comes to resolution, size matters. Resolution is always expressed in units per length:
- Dots per inch (dpi) for printed output
- Samples per inch (spi) for scanned input
- Pixels per inch (ppi) for images viewed on a computer display
So what do you need to know about resolution if you’re planning on putting images on the Web? Here are two golden rules to follow:
- Start out by creating the image at the resolution you’ll use to display it. Images can lose detail when you change the resolution settings after editing.
- Choose the resolution based on what will look good on a 17-inch screen with resolution settings of 800 x 600. This is the standard display that most Web sites use. You don’t need a high resolution if you’re going to display the image on a Web site. Different applications call for different resolutions.
Picking a resolution (and sticking with it)
Changing resolution is often bad because you’ll always lose some image detail when you convert from one resolution to another while resizing images. Therefore, it’s a good idea to create a graphic destined for the Web at the resolution that you’ll use to display it. If possible, do not create the image at a different size and change the resolution later. So, when choosing the resolution and size of your images, keep in mind the final destination of the image — that is, Web or print — and how large you want it to appear on the screen or printed page.
Smaller monitors display images at 72 ppi. Larger monitors use 96 ppi or 120 ppi. You can use these figures to visualize the size your images will appear on the displays of other users’ computers. For example, a graphic that measures 150 pixels x 150 pixels appears to be about 1.25 x 1.25 inches on a monitor with 120 ppi resolution (rather tiny), but a little more than 2 x 2 inches (relatively large) on a smaller monitor with 72 ppi resolution. Resolution values always translate into sizes. For example, a Photoshop image measuring 600 x 600 pixels created at 600 dpi will print as a 1-x-1-inch square on a 600 dpi printer because each pixel is translated into one printer dot, or as a 2-x-2-inch square on a 300 dpi printer (unless you tell the printer to scale the image to a different size) because each pixel will translate into two printer dots.
Dealing with differences in monitors
You can’t control what size monitor and which resolution settings viewers use when they look at your images online, but if you’ve read the previous section, you probably have had the point driven home that you can control your images’ resolution. And at least that’s somewhere to start. A Photoshop image measuring 600 x 600 pixels created at 600 dpi will appear as a 6.25-x-6.25-inch square on a monitor with 96 ppi resolution or as a 5-x-5-inch square on a monitor with 120 ppi resolution. The resolution issue of monitors can be confusing because the pixels per inch being displayed varies depending on the resolution setting you’ve used. For example, consider a 19-inch monitor that has a viewable width of 14.6 inches. You can set it to 800 x 600, 1024 x 768, or, like me, 1920 x 1440 pixels. The following mini-table shows the pixels per inch displayed:
-Resolution 800 x 600 --> Viewable Width 14.6 --> Pixels Per Inch 54
-Resolution 1024 x 768 --> Viewable Width 14.6 --> Pixels Per Inch 70
-Resolution 1920 x 1440 --> Viewable Width 14.6 --> Pixels Per Inch 133
Obviously, the monitor doesn’t have a higher physical resolution at a higher screen resolution setting. It just uses fewer of its dots to represent a screen pixel. When you get to a roughly 1:1 ratio, you’ve reached the maximum displayable resolution of the monitor. For example, the top horizontal resolution of my 19-inch monitor is 2048 pixels, or 140 ppi. The resolution settings you make in Windows are designed to approximate the physical pixels per inch displayed so that objects appear at roughly the proper size on the screen. For example, my 19-inch screen that can display 133 ppi at 1920 x 1440 resolution is set to 120 ppi, so an object that measures 120 pixels wide appears to be 90 percent of 1 inch wide (120/133), which is close enough. If I used 1024 x 768 on that same monitor, I’d set Windows to 72 ppi so that a 72-pixel-wide object would be almost exactly 1 inch wide on the screen.
Understanding Resolution
When it comes to resolution, size matters. Resolution is always expressed in units per length:
- Dots per inch (dpi) for printed output
- Samples per inch (spi) for scanned input
- Pixels per inch (ppi) for images viewed on a computer display
So what do you need to know about resolution if you’re planning on putting images on the Web? Here are two golden rules to follow:
- Start out by creating the image at the resolution you’ll use to display it. Images can lose detail when you change the resolution settings after editing.
- Choose the resolution based on what will look good on a 17-inch screen with resolution settings of 800 x 600. This is the standard display that most Web sites use. You don’t need a high resolution if you’re going to display the image on a Web site. Different applications call for different resolutions.
Picking a resolution (and sticking with it)
Changing resolution is often bad because you’ll always lose some image detail when you convert from one resolution to another while resizing images. Therefore, it’s a good idea to create a graphic destined for the Web at the resolution that you’ll use to display it. If possible, do not create the image at a different size and change the resolution later. So, when choosing the resolution and size of your images, keep in mind the final destination of the image — that is, Web or print — and how large you want it to appear on the screen or printed page.
Smaller monitors display images at 72 ppi. Larger monitors use 96 ppi or 120 ppi. You can use these figures to visualize the size your images will appear on the displays of other users’ computers. For example, a graphic that measures 150 pixels x 150 pixels appears to be about 1.25 x 1.25 inches on a monitor with 120 ppi resolution (rather tiny), but a little more than 2 x 2 inches (relatively large) on a smaller monitor with 72 ppi resolution. Resolution values always translate into sizes. For example, a Photoshop image measuring 600 x 600 pixels created at 600 dpi will print as a 1-x-1-inch square on a 600 dpi printer because each pixel is translated into one printer dot, or as a 2-x-2-inch square on a 300 dpi printer (unless you tell the printer to scale the image to a different size) because each pixel will translate into two printer dots.
Dealing with differences in monitors
You can’t control what size monitor and which resolution settings viewers use when they look at your images online, but if you’ve read the previous section, you probably have had the point driven home that you can control your images’ resolution. And at least that’s somewhere to start. A Photoshop image measuring 600 x 600 pixels created at 600 dpi will appear as a 6.25-x-6.25-inch square on a monitor with 96 ppi resolution or as a 5-x-5-inch square on a monitor with 120 ppi resolution. The resolution issue of monitors can be confusing because the pixels per inch being displayed varies depending on the resolution setting you’ve used. For example, consider a 19-inch monitor that has a viewable width of 14.6 inches. You can set it to 800 x 600, 1024 x 768, or, like me, 1920 x 1440 pixels. The following mini-table shows the pixels per inch displayed:
-Resolution 800 x 600 --> Viewable Width 14.6 --> Pixels Per Inch 54
-Resolution 1024 x 768 --> Viewable Width 14.6 --> Pixels Per Inch 70
-Resolution 1920 x 1440 --> Viewable Width 14.6 --> Pixels Per Inch 133
Obviously, the monitor doesn’t have a higher physical resolution at a higher screen resolution setting. It just uses fewer of its dots to represent a screen pixel. When you get to a roughly 1:1 ratio, you’ve reached the maximum displayable resolution of the monitor. For example, the top horizontal resolution of my 19-inch monitor is 2048 pixels, or 140 ppi. The resolution settings you make in Windows are designed to approximate the physical pixels per inch displayed so that objects appear at roughly the proper size on the screen. For example, my 19-inch screen that can display 133 ppi at 1920 x 1440 resolution is set to 120 ppi, so an object that measures 120 pixels wide appears to be 90 percent of 1 inch wide (120/133), which is close enough. If I used 1024 x 768 on that same monitor, I’d set Windows to 72 ppi so that a 72-pixel-wide object would be almost exactly 1 inch wide on the screen.
Photoshop and theWeb
![Photoshop and theWeb]()
Reviewed by Pepen2710
on
5:24:00 AM
Rating:
No comments:
Post a Comment