For years I've been trying to understand images for websites. Something didn't make sense. Found it while I was writing this blog for you. It's not dpi it's pixels! The old way of thinking about photos for the internet was dpi – 72 dpi. It was based upon the requirements for printing (back in the day, think Macs and Imagewriter printers circa 1980s).
72 dpi use to be standard for www, 300 dpi for photos and 600 for fine art printing.
Fast forward to now - just think pixels not dots – same critter cuter name. Pixels are what video monitors display. Take the recommended resolution of your computer screen (mine's 1366) and divide it by the acutal width in inches of your screen (mine's 13.5). Thus my computer is actually viewing 101 pixels per inch.
FIRST size your photos by pixels – in Photoshop or an online editor Pixlr.com (free and fun). Photos from my Iphone are 3264 x 2448 (8 MP) 22.9MB HUGE
Monitors these days view about 100 pixels per inch. 100 pixels per inch is an easy number to remember and makes sizing simple.So for websites we FIRST size photos by pixels 450 x 600 pixels would be a 4.5 x 6 inch photo at 100 dpi. However uncompressed this file was still 791 kb. Too big for websites to quickly and easily load – especially if you have very many of them.
THEN we compress that photo to lower the file size – Pixlr does it automatically by saving. In Photoshop if you "Save for the web" it will do the same thing.
We compress that pixel size photo so that the kb is smaller. When compressed this file became 94kb in PS and 120kb in an online photo editor. Which tells me Pixlr automatically compresses for web.The pixel size will still be 4.5 x 6 inch, the difference in quality isn't noticeable.
You will notice WordPress uses pixels when they talk about images. In your dashboard go to Settings, Media and you will see that the Thumbnail size is 150 px by 150 px, the Medium size is 300 px by 300 px, and the large is 1024 px by 1024 px. (No your pictures will not all have to be square... that is just maximum.)