I have an image I’ve created (just a screen shot). It is the standard 72 pixels/inch. I want the image to be smaller, but I don’t want to lose any of the resolution. I resized the image to 120 pixels/inch and saved it as a GIF. Reduced the colors, did the dithering, etc. It’s very sharp and clear. I look at print preview and indeed it is smaller.
I put it on a web page, and it is, again, 72 pixels per inch.
Why? Why, why, why, why? And in case I didn’t ask before, WHY?
I’ve tried this every way I can think of. Why won’t it work?
'Cause web browsers display at 72 dpi regardless of the print dpi. Sad to say, there ain’t no way around that.
Personally, I’d take the original image and resize it to the dimensions wanted and save it. OTOH, if the image you have looks good to you in whatever your image editing program is, and it’s the screen size you want it at, you may want to take another screenshot of it, crop out the rest of the screen and save just the image.
Not the most logical course of action, I’ll grant you, but I see no reason it wouldn’t work. (BTW, if you’re using Photoshop, view it using the “show print size” option.)
You said the problem happened when you put it on the web, so I’m guessing that you know HTML. When you link an image you can also say how large, in pixels, you’d like the object to be in the code, too. I don’t know if you’ve tried it, but the code looks like this: <IMG SRC=“berg.jpg” WIDTH=“200” HEIGHT=“200”</A> It won’t look as perfect as it would were the image the correct size to begin with, but the results are pretty good.
There’s no reason to be sad. Resolution is a difficult thing to understand. What you’re adjusting when you change the resolution is the PRINT resolution. My advice to you is this: when viewing pictures on screen, completely forget about resolution. Concern yourself only with actual pixel dimensions. Your screen can only display 72 dpi (well, if you’re working at a higher res, it’ll do 96 or so…but that’s irrelevant). If your image is 800x600 pixels, it will appear to be roughly 11x8 on screen. (800/72=inches).
If you’re printing something at 300 dpi, the calculation is the same. to print a 4x6 photo at 300dpi, you need a picture that is 1200x1800 pixels big. That same photo, when displayed on the web, will simply be HUGE, since the resolution of the monitor is at 72 dpi. Instead of displaying the picture at 300dpi (it can’t) and 4x6 in size, it displays it at 72 dpi, but as a 25x16(in) picture. Got it?
So, if you’re putting things on the web, remember that most people are viewing the web with a screen size of 1024x768 pixels, or 800x600 pixels. Some view at 1280x1024, some higher, but most are in the 1024x768 range or so. Therefore, use those sizes as guidelines for how big you want it to look online. If you want it to fill about half the screen, make it about 400x300 pixels big. Don’t worry about resolution unless you’re going to be printing.
Since others have addressed the resolution issue, here’s another idea: what software are you using to edit your image? If, by any chance, you have access to Adobe Photoshop, use the Filter > Sharpen tool after you’ve resized your image. It helps bring back some of the clarity you lose when you make an image smaller.