Open Photoshop, and you see a setting for "Resolution: 72 Pixels/Inch". Change it to 300. The image size doesn't change on your screen. Why?
PPI (Pixels Per Inch) - For Screens
This controls how dense the pixels are on a display. But here is the secret: Web browsers ignore this number.
A 1000x1000 pixel image looks exactly the same size on a website whether it is tagged as "1 PPI" or "1000 PPI". The browser just displays the 1000 pixels.
DPI (Dots Per Inch) - For Printers
This matters only when you hit Command+P. It tells the printer "Pack these pixels tightly."
- 72 DPI print: The image will be printed huge, but blocky.
- 300 DPI print: The image will be printed smaller, but sharp.
The Takeaway
If you are designing for the web, ignore DPI. Focus on total pixel dimensions (e.g., 1920x1080). If you are designing for print, set it to 300 DPI first, then design.