A Quick Guide to Formatting Images on your Squarespace site

Even though I design in Squarespace a lot, I am always looking up image sizes.   As interior designers, we are uploading images a lot to load up on sites so it’s important to get these sizes right to so that our sites can look their best.  

Here is all you need to know about formatting your images so you get an expected result.  

1. Image Size:   When you upload an image to Squarespace (SS) they automatically create seven sizes.   These are 100px, 200px, 300px, 500px, 750px, 1000px, 1500px, 2500px. I always try to stick with these units when creating images specifically for SS.  They are easy to remember, and usually, I get the result that I want.   

2. File types:  Create your images in .jpg, .gif, and .png.   SS can’t read other file formats.   If you have images in another format, you can try to convert them using Photoshop, Canva or a file conversion app.   Note that converting can affect the quality, so you need to test it out until you get the result that suits you.   

3. File names: always try to name your files with something that is SEO-friendly i.e. use keywords.   Try to keep the file name a reasonable length.  Always (!!!) name your file.  You can rename it right in Squarespace. Separate words with hyphens, so Google is happy 😀!

4. Compress your files, so they are the smallest possible without using quality.   You can do this in Canva (choose the compress feature when you are downloading).   Or you can use a website like TinyPng.   There are many sites on the internet.  Squarespace recommends a file size of 500kb or less to make your site load quickly.   It will accept files up to 20 MB, but this will really slow down your website.   

5. There is an image resolution limit of 60MP.  You can work out the resolution by multiplying the width and the height of an image and then dividing it by one million.  I.e. [width x height (in MP)] /1 000 000= resolution or you can use this calculator .

6. Colour mode & profile : save your images in RGB (for web) not CMYK (for print) with an sRGB profile.  If you are using something like Canva, you have probably already created the image for web.   However, if you are using Illustrator, ensure that you are saving the image in the correct format.   

These are best practices for using images on your SS site:  

1. Check the file size for all the images on the whole page.    For each page ensure that you know what the file size is.  If you are not sure, click on Preview>Tools>Inspector and it will tell you.   Image file size refers to the amount of memory or storage space an image file takes up on a device. It is often measured in kilobytes (KB), megabytes (MB), or gigabytes (GB). The larger the file size, the more space it takes up and the longer it takes to transfer or load. The file size of an image can be reduced by compressing it or using a lower resolution, which can also result in lower image quality.1 MB is equal to 1024 KB. 1 GB is equal to 1024 MB. In a Squarespace page make sure that your total file size is under 5MB. 

2. Orientation: though Squarespace has a few editing tools, make sure that your image is in the correct orientation, i.e. landscape or portrait before you upload.   You can use Preview or Canva to do this if needed.  

3. With logos, add in the logo at a similar size to the size you wish it to display.   It should be a max width of 1280 and height of 300px

4. When creating your favicon, create it either 100px x 100px or 300px x 300px .  It displays at 16px x 16px.  

5. Gifs:  you can use GIfs and upload them as an image.  However, it is preferable to upload them in the size you want them to display as the file size will be large.

6. If you want a transparent background on an image, save it with no background in a .png format   .

7. Try not to use text in an image- it may not look great especially for headings.

8. Always use ALT text- this is great for SEO, so describe your image and try to use keywords in the text.

If you want to see information about a file follow these instructions:   

Mac

To examine an image's information:

1. Select the image file on your computer.

2. Press Command + I.

3. In the window that opens, click More Info.

Windows

To examine an image's information:

1. Select the image file on your computer.

2. Press Alt + Enter.

3. In the window that opens, click Details.

I hope this helps you optimise your Interior Design Squarespace site. See you in the next post!

---

Hi 👋🏽 I’m Joanne!

I’m an interior designer, educator and business coach. After studying Economics and Education at uni, the design world beckoned, drawing me to Christie’s in London, where I completed post-grad studies in art & design and then to Hong Kong, where I founded Eclectic Cool, a design firm and design store. . Eclectic Cool represented international brands such as Gubi, &tradition, HAY, Armadillo Rugs & Dinosaur Designs to name a few. My work and store have been featured in Monocle, Conde Nast Traveller, Elle Decor, Expat Living, Cathay Pacific inflight magazines, South China Morning Post and the ABC (Australia) network and more. I live on the south coast of Australia on a country property between the beautiful Australian bush and the Pacific Ocean with my husband and cavoodle. I’m the mum of three adult children.