Does PPI Matter for Web Images on Squarespace?
Table of Contents
A lot of people are confused between image size, PPI, DPI, and resolution for images they use on Squarespace. Does PPI matter for web use? Let's find out!
Does DPI matter for web use?
In short, no it doesn't. To answer why we simply have to look at what DPI stands for. DPI is an acronym for "dots per inch" which is a unit of measure for printers. So if someone was printing a photo, using a printer that can put more dots inside of an inch, would give you more quality. Since computers don't use dots to display images (they use pixels which is different), DPI doesn't matter.
Does PPI matter for web use?
So here's where it gets slightly complicated. When you ask people what size image to use on Squarespace, you'll probably get responses like "1500 px maximum width, and 72 PPI or 300 PPI". This is not correct for a few reasons and I'll try to explain why and then give you a visual demonstration.
First off, PPI stands for "pixels per inch" so having more pixels per inch will generally result in a higher quality image. When you set a PPI of 300, if your image started off with a lower than 300 PPI, your image gets "upsampled". Getting upsampled isn't a good thing though, it's like taking a small image and stretching it out. Photoshop will try to fill in the new pixels with data but it makes a "best guess" of what should go there; so the image quality suffers.
Now let's say you save an image as both 72 PPI and as 300 PPI, what basically happens is that Photoshop will basically multiply the image resolution by roughly 4.17. So your original 72 PPI image might be 1000 px by 1000 px whereas your 300 PPI image will be roughly 4170 px by 4170 px. So where did those extra 3170 pixels in each direction come from? Well, Photoshop made a best guess and put in the color it thought would work best. So out of the total 17,388,900 pixels in your image, about 10,048,900 pixels (almost 60%) of the image is "made up" data, which will definitely affect image size.
What size should I use for Squarespace images?
I usually say that an image used on Squarespace should be about 1500px. Since 1080p is a very common screen resolution, I would recommend a width of 1920px if your image is going to be a full screen or full-width banner.
If the image is going to be used in a row with 2-3 other images, where each image takes up about 33% of the screen width, I would even go down to 800px or so to cut down the file size. The idea is to use the smallest image you can get away with. The only time I would upload larger images even when it's in a row with other images is when you're using images that people can click to open full screen (lightbox).
If you're using Photoshop, save your image at both 100% quality, as well as 60% quality. Then put them both side by side and see if you can visually see a difference, if you can't, then use the 60% quality image as it will be much smaller. If you can see a big difference, try saving the image at 70% quality, and slowly increase quality until you can't notice a big difference.
I try to keep all my images well below 500kb if possible. Most images are even under 100kb.
If you did all that, your image should be a very good file size and load quickly. If you want to take it one step further, you can run it through a free tool like TinyPNG as well to make it even smaller without affecting quality.
Should I use PNG or JPG images on Squarespace?
There are 3 main differences between PNG and JPG.
PNG supports transparency (so you can have a logo with no white background for example).
JPG files are usually much smaller than PNG files.
PNG files have better colors (but most people won't be able to tell the difference).
When it comes to Squarespace, I recommend you use PNG when you need transparency (your logo in the header, icons on the website where the background isn't white, etc.), and for everything else, use JPG.
