Imaging resizing for web

1. The Finder shows you the compressed size on disk. When you open the image, it is decompressed, and Photoshop shows you the uncompressed file size.

2. PPI (not DPI) stands for Pixels Per Inch, and is metadata used to calculate print size. 

Pixel dimensions divided by PPI value = Print size in inches.

For on screen viewing, PPI is irrelevant. The image will display according to its pixel dimensions, regardless of the PPI value.

3. Squarespace probably has some recommendations about pixel dimensions.

Do not use full resolution images from your camera, reduce the pixel dimensions to for instance 1500 to 2000 pixels on the long side. You can change the pixel dimensions when using Export and Save for Web.

4. RGB is a color mode. CMYK and Greyscale are examples of other color modes.

sRGB is a color space, also referred to as a color profile. It is considered the safest color space for web images.

Always embed the profile. When using Export or Save for Web, make sure to check both Convert to sRGB and Embed profile.

Ppi (pixels per inch, often incorrectly called dpi) is a print parameter that is absolutely irrelevant for web/screen. Doesn't matter one way or the other. An image can be 10000 ppi or 1 ppi, and they will display absolutely identically on a web page, and on screen in general.

On screen/ web, all that matters is the pixel size, so many pixels wide by so many pixels high. Each image pixel will then align to one screen pixel. The "resolution" is in fact the screen resolution of the display you're actually viewing on.

Traditionally, 1000 to 1500 pixels long side has been considered a comfortable web size. Retina displays is a complication, because everything will be smaller on a high resolution display. So to be able to use the same images on all types of display, the generally accepted workaround is that the web browser scales up to 200% when it detects a high-resolution (retina) display. This way one image pixel is represented by four screen pixels. Effectively, your retina screen is turned into a standard one. As I said, it's a workaround.

---

File size on disk is also not what it appears to be. The jpeg file format specification uses very aggressive data compression to reduce storage space on disk. When the file is reopened, it is decompressed back to its original size.

Again, all that matters is the pixel dimensions.

Jpeg compression is extremely effective, and it can reduce storage space down to 2-5% of original size with little immediate quality loss. But there will be some. Jpeg compression is irreversible and cumulative. Every time you resave a jpeg, it deteriorates a bit. And because of compression artifacts, the size actually tends to increase a bit with every new save.