The terms Dots Per Inch (DPI) and Pixels Per Inch (PPI) are commonly used interchangeably to describe the resolution of an image. The problem is they're not the same.

Think of DPI as a printing term - how many dots will be in each inch of an image. At 200dpi (dots per inch) an inch of image will have 200 dots. If it has more dots it will obviously be clearer than an image which has only 5 dots per inch. 

Keep in mind there is a game of diminishing returns happening here - you can't just infinitely increase the dpi and expect the result to keep improving. This is simply due to the limitations of print. Briefly, every time ink hits paper it spreads slightly (dot gain) and at some point it will spread far enough to merge with adjacent dots making the image turn to mush.  

It also needs to be remembered that offset printing requires the use of screens to produce the final product. The screen ruling used by the printer will determine the resolution you need to use. Anything above what's required to resolve the screen being used is just wasted overhead providing bloated files which may choke a RIP.

Now think of PPI as a 'screen' thing. Pixels make up your computer screen so that's how the image is displayed.

Here’s how it comes together. Your original image dimensions don't change. If you take a photo at 4000 x 3000 pixels then that's what it is. Simple.

Now, if you use 200 DPI to print that image ( a good basic print resolution), it will print 4000/200 = 20 inches wide and 15 inches high. This would give you a nice quality 16x20ish print to hang on the wall. Now if you did 72 DPI it will print at 4000/72 = 55 inches wide and 41 inches high but would be a pretty crappy result. Keep in mind that viewing distances are important too so if you're viewing that print from 10 metres (33ft) away it may look fine.

So what happens if you view these two different 'sizes' in a web browser? Nothing, both will be the same size. That’s because the browser is using the image dimensions NOT the dpi/ppi associated with the file. The browser simply sees 4000x3000 pixels and uses that to display to the user.

Don't believe me, take a look here for some example images at different resolutions which all look identical in a browser.

You might now be wondering how to make your web images smaller if the PPI/DPIU doesn't matter. Simple tip, Make them no larger than they will be displayed and use modern formats and compressions to reduce their size. As computers and Internet connections get faster saving a couple of kb is probably not going to be so important but just be assured that saving things at high dpis thinking it will improve your web images is misguided.

If you want nice prints, consult your printer for advice.

If you want to read another good explanation, look here.