How to resize and Optimize images for Squarespace
If you want to showcase your images in all their glory on your Squarespace website, it’s so important to resize and optimize them. There are a few things you need to do to prepare the images before you upload them.
If you do this preparation in advance, it will be much easier and better for the speed and care of your website, Google will love your SEO and it will keep customers on your website.
Oh by the way SEO stands for search engine optimization. This term is used when we are talking about the best way to help Google find you.
So the best thing to start with is getting into the habit of remembering the ideal image size. This way you can have all your files ready to go before you upload them or even better have them packaged up ready for your designer, who will be more than impressed with your skills! Keep reading to find out what I’m blathering on about.
Although these steps may seem like small details, like I mentioned before doing this preparation overall can avoid website speed issues, be good for your SEO and save a whole load of time down the track. Because time is money, honey!
This post will take you through the ideal steps to prepare your images to resize and upload to your Squarespace website. So let’s get cracking!
File format
The most common file formats you will be using are gif, png, jpg files.
Filename
Now let us focus on the image filename. Filling your filename with a whole bunch of random characters and numbers that no one can understand is a no, no. Only hyphen and underscore are accepted.
Do not upload a file with the name x_123-UdjadnseraA.jpg. To you, it may seem natural because that was the name set from your camera. But Google is not familiar with it so that it won't be good for your SEO. Plus how will you ever find that file name again!
A better example is “Brochure design for Off and On by Simply Whyte Design.”
Keep the following points in mind while renaming the file;
The name describes the image. So, you can easily recognize it and remember what this image was for.
The file name is a chance to promote SEO. You can add keywords to the name to make sure that Google recognizes it but make sure it’s relevant to the image.
File size
If you are planning to upload an 8MG image to your website, think again. That’s not going to do anything for your website speed but don’t worry you can still achieve the look of a high-quality image with a compressed file.
But basically, gigantic images slow down your website.
The Text will appear fast while visitors have to wait for the images to show up. I am sure you don't want them to load your page and wait for 30 seconds for an image. What a drag!
For Squarespace, the ideal image size is 500 kb. If you are a little bit over it’s fine but this is the recommended file size.
If you are using Mac, to check the image size open the image in the preview. Click on Tools, then select show the inspector. It will display the details of the image. I’ll explain further on in the blog post how to change the image size but get familiar with checking the image details.
Image size
Along with the file size, image size is also important. In Squarespace, the preferred image size is 1500 by 2500 pixels.
When I upload a standard image, I personally like 1000 by 1500 pixels, and for banner image 2000 by 2500 pixels.
Squarespace will take your image and reformat it for you so that it’s ready for all screen sizes.
Don’t use anything too small as they may need to stretch or resize the image to fit the website. If you provide a small image size, it can easily become blurry and ruin the picture. So, larger image size is best practice. The image is likely to get pixelated if it is less than 1500 pixels wide.
Image resolution
If you will only use the image for your website, then a resolution of 72, 144, 150 dpi should be fine. Although this is not the same requirement for quality printing. When you are looking to use images for print, the resolution should be 300 dpi.
Aspect ratio
If you are going to be uploading multiple images on your website. It’s a good idea to make sure that all the images have the same aspect ratio. This keeps things consistent.
This means all the pictures should have the same width and height. A common way is to use aspect ratio 1:1, which is a square image. Other common aspect ratios are 3:4 for a vertical picture or 3:2 for a horizontal picture.
If you are having trouble perceiving them, let us imagine a picture of 3cm by 2cm. This is an aspect ratio of 3:2, similarly, you can imagine other aspect ratios to understand how it works.
Now while preparing the images, you can change all of them by the same amount. Once you are done making all the images of the same aspect ratio, you can upload them to Squarespace and they will display beautifully.
How to change your image size for Squarespace?
If you are in Mac PC, open the image in the preview.
Next, click on tools, you will see there is an option called 'adjust the image' click it.
A window will open, where you can manually select the image dimensions. Change the width to 1500, the ratio will automatically change the height in the right proportions. So, the image is not distorted, scaling is done with the correct ratio.
On the window, there is also an option for changing the resolution.
Now, look at the bottom of the window. You will find the image size after altering it.
You will also find the file size. If it is 500kb or less, then it is fine. But if the file size is more than that, you have to compress the image.
This is not the only way to change the image size. On the internet, you will find tonnes of apps to change the image size. One example of such software is Picmonkey. Or if you're handy with Adobe tools you can resize with Photoshop.
How to compress your images for Squarespace?
After you are done fixing the aspect ratio of the images, go for the file size. If it is less than or equal to 500kb, then it is good. Otherwise, you have to compress it before uploading it to Squarespace.
Head on over to tinypng.com
Now upload your image file on the site. You will notice the file starts compressing automatically. Wahoo!
Wait until the compression is over. Once complete, it will show you the compressed image file size.
Now click on the image and download it in your storage. This time the file should be under 500kb.
On this website, you can upload 20 pictures together. So, you can compress the files pretty fast here. If you have more than 20 pictures just open up another tab on your browser and upload 20 more there.
Next, it is best to create a new folder to keep the compressed files. These files will contain the same name as the parent file. But they will have smaller sizes, so you can use them in Squarespace.
Now you are ready to upload your images to Squarespace, high five!
If you prepare all the images like this in advance, it will save you a lot of trouble later on, it keeps things organized and in a workflow, Google will love you and your website will thank you for it.
Let’s work together
Got an amazing business idea you need help bringing to life? Time to refresh your existing brand? Ready to get serious and connect with your customers with a stunning Squarespace site?
PIN ME!
