The most popular answer to the question "what resolution should my images be on the web?" is usually 72dpi. Let's take a look at this myth.
First, let's take a look at an image in a few different resolutions.
One thing you may notice right away is that all three images are the exact same size, yet their DPI's differ greatly. (download them and check the DPI if you would like)
Let’s start with DPI and remember what it is exactly. DPI stand for “dots per inch.” This term carries over from Printers who would actually be printing x-number of dots per linear inch on a substrate. (paper) But, our monitors don’t know what an ‘inch’ even is. Try this, hold a ruler up to your screen and make a one-inch line in a paint/photo program. Now go change your monitors screen resolution. (right click on desktop, Properties, Setting Tab, Screen Resolution) Now measure the line, it’s definitely not the same. This is because your monitor/computer is only concerned with how many PIXELS are in the image. Notice the above three images again. All of them are 300x200 PIXELS…all the same size on the screen.
*PIXELS= Size on monitor only*
So what about the file size? All three images are 65KB. So another truth is brought out that the higher the DPI of an image doesn’t necessarily mean it’s a bigger file. So, next time someone says “I need a bigger file than 180DPI to print, I need a 300DPI” you know to ask what SIZE (inches) they need for a print because the DPI is relative in size, it only counts in Quality. (this doesn’t mean DPI doesn’t matter, of course a 20x24 print at 300 looks better than a 20x24 at 72 dpi.)
*DPI= Quality of an image (on screen or printer)*
So what is the different between these images? Print size. Each image will print on a printer (which doesn’t care about pixels, only INCHES) at a different size, which is labeled on each image.
* INCHES= Size on print only*
So, the net logical question would be what size should my images be uploaded as? Well, 5-10 years ago everything was pretty standard at 800x600, but I hope many are out of that dinosaur age and is at least using 1024x768. (I personally use 1280x1024 or even 1600x1280 to work, and no, my fonts are not too small to read because you can always make system fonts and icons bigger!) If you do not want your images to bleed off of the 800x600’s screen, make your images 760x420 constrained. (760x420 is usually a standard web developing idea as well
) But remember, the people using 1280x1024 (and higher) are going to see a much smaller images. So, you have to compromise between what you think everyone is using. Actually it may be a good idea for a poll to be made for we can get a feel for everyone’s monitor resolutions.
--Saving in Photoshop—
I don’t know if anyone has noticed, but I can always save a Jpg much smaller than a Gif file. I think Gif has seen better days. I think their last good use is to make animation files. I always find that a Jpg quality setting between 6-8 usually produces a good looking image. And, out of habit I always type in 72 in the DPI box
DPI= Quality of an image (on screen or printer)
PIXELS= Size on monitor only
INCHES= Size on print only
p.s. I may have made a mistake or two in my calculations, if so, please point them out for we can learn it better. thanks!