25: Optimizing Visual Content for A Faster Squarespace Website
They say a picture is worth a thousand words, but what if it takes forever to load? In this episode, you'll learn the secrets to optimizing images and graphics for your website. I’ll be sharing my best tips for creating quality images for your Squarespace website, so your content looks good and loads quickly.
-
They say a picture is worth a thousand words, but what if it takes forever to load? In this episode, you'll learn the secrets to optimizing images and graphics for your website. You'll discover how to create a perfect balance between stunning visuals and lightning-fast performance based on image type and image quality.
--
Welcome to thinkinsidethesquare, a podcast full of quick tips and tricks to help you create a Squarespace website that you’re proud of. I’m your host Becca Harpain, Squarespace expert and creator of [InsideTheSquare.co](http://InsideTheSquare.co)
In this episode, I’ll be sharing my best tips for creating quality images for your Squarespace website, so your content looks good and loads quickly.
For a transcript of this episode along with the links to any resources mentioned, visit insidethesquare.co/podcast
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace inc.
---
First things first, let's talk about why images are so crucial for your website. Think of your website like a digital storefront. The images you choose are like the display windows that catch people's attention. They represent your brand and set the tone for your entire site. So, picking the right pictures is key to making a stellar first impression.
These days, visuals aren’t just photos. We’re talking about images, videos, icons, and even AI generated content.
All of these types of visual content have different sources, different rules and regulations, and different file formats.
One of the important things I’ll mention a few times in this episode is the term “open source”
Open source content generally comes with this special kind of license – Commons license, which allows them to be used and distributed freely without the need for attribution or seeking permission from the artist or photographer.
No need to credit the artist or ask for permission, which is super convenient for things like background images that you want to use on your site. Now if you can give credit to the original creator, I think you should - but you don’t legally have to.
Just make sure the content you’re using really is open source. There are many open source image & video databases out there. Pixabay and Unsplash are two of the most popular, and
Squarespace links directly to Unsplash. Unsplash is one of my favorite databases of high-quality images because they have a really robust search feature. And again - it connects with Squarespace so it’s easy to search for a background image for a page section without even having to leave the editor.
So if you don’t have a lot of photos for your website, try using some open sources ones, or an image generator. Adobe Firefly and Dall-E have both created some interesting images, but be careful about using images created by AI and make sure that you aren’t violating any laws or regulations in your area, including copywriting laws.
To avoid that, I stick to open source images on Unsplash, those I take myself or pay a professional photographer to take some for me.
I also use open source icons from Google - they have a huge collection, free for anyone to use, and you can change the style of it making it thick or thin, rounded or flat, or even use colors. It’s a really cool collection and you can check it out at [fonts.google.com/icons](http://fonts.google.com/icons) Again open source so use them for anything and everything.
Content of the images aside - lets talk about the file itself.
The types of visual files I want to cover in this episode are JPG, PNG, GIF, and MP4. I am not going to cover SVGs because Squarespace doesn’t support those for image blocks. So JPG, PNG, GIF and MP4.
MP4 files are videos, and with motion being a popular thing to add to a website these days, we’ve got to find a way to upload videos that are high quality but not gigantic files.
Videos for the background of a page are tricky. First up, they won’t play with sound, so removing the audio track from your file can save some space. Squarespace won’t show a video at a resolution higher than 1080p, so when you record or save your video file, HD is as large as it needs to be.
If you want to share a video as part of your page content, I recommend hosting your video somewhere else and sharing the link to it with a video block. All of my public videos are embedded YouTube videos, and all of my course videos are private Vimeo videos.
Here is why this works so well for making my site load fast. The only thing that loads on the page is the link to the video - not the whole thing. When someone clicks on my video to play it, it’s up to the other program to serve up the content. When you upload the entire video to Squarespace, it’s up to Squarespace to load that content, and it can take a hot minute because it’s processing everything else on the page at the same time. Now, this might change later on, but as of right now? I keep my content on YouTube and Vimeo and share the link on Squarespace so my page loads quickly.
Again the public stuff is on YouTube and my courses and paid content are private videos on Vimeo.
Now the other type of motion visual that I am absolutely loving these days is a clever use of a GIF. A GIF is short for 'Graphics Interchange Format.'
They can be simple images, or they can be animated to add some motion and life to your content. What's really cool about GIFs is they use a type of compression that reduces file size without losing too much in image quality. They're perfect for adding a bit of personality to your website with animations or looping images. And the best part? Anywhere you can add an image in Squarespace - you can use a GIF. Yup - even for blog thumbnails and product images. A gif is a much smaller file than a video, and I love seeing creative GIFs on product pages.
Large .gifs can slow down your site so I don’t recommend using them for page backgrounds or page section backgrounds - but smaller gifs for image blocks are a great way to add something extra to your site.
The next two types of images I wanted to talk about are JPG and PNG; These are the two most common but when it comes to size & page speed, they can be lightyears apart.
JPEGs stands for 'Joint Photographic Experts Group.' This format is perfect for large image files because it actually compresses your photos to make them smaller in size, which is super handy for saving space and speeding up website loading. Even with this compression, JPEGs still keep your pictures looking pretty good. So, you get smaller files without a huge drop in quality as long as they maintain 72PPI or pixels per inch.
Yup - 72. Sounds small, right!? A lot of screens can handle a larger ratio of pixels per inch, but rest assured that 72 is the standard for the web. Print is close to 300 or above, so it’s kinda wild that our resolution really doesn't need to be too large. That can definitely help cut down on file size.
The other common image type is PNG. PNG stands for 'Portable Network Graphics.' It's another common format for images, especially when you need clear, high-quality images. These files can easily be larger than JPGs because they contain layers and can even have levels of transparency. I use PNG images for all of my icons and logos to keep the quality of the image preserved and minimize the chance of pixelation.
So, my rule of thumb? If it’s going to take up more than half the screen, I’ll use a JPG file. If it’s an icon or a logo, I’ll use a PNG. Both of them only need to be 72ppi. For my icons, I usually make a PNG twice the size I’ll need it to be to make sure it stays crisp on all devices - a tiny icon on my desktop might be stretch to 1/2 screen on mobile, so it’s always good to have a slightly bigger icon than you’ll need.
For full-page width backgrounds, the file should be 3000px wide. Wider is unnecessary, and honestly, 3000px is generous. But I work with a lot of designers who have large monitors, and I want them to have a good experience looking at my site.
The visual size of the file is important - but so is the physical size! At the time of recording this, the image file size limit is 20MB but Squarespace recommends using image files of less than 500 KB. The smaller the image file size is, the faster a computer browser can load it.
So what if you have the perfect PNG or JPG but the file size is still too big? Make sure you don’t have a gigantic image - 3000px is as wide as any image needs to be. But you can also compress the file using a free program. I love [tinypng.com](http://tinypng.com) - it’s a program that can compress JPGs and PNGs and it does a really good job. Sometimes you can lose some quality - but again - a website background doesn't need to be larger than 3000px wide and it should be a JPG not a PNG.
PNG - save those for smaller visuals, like icons, logos, and anything that has a little transparency to it. If you don’t need transparency, make it a JPG. JPGs are great for page backgrounds and page section backgrounds and will be smaller than a PNG. If either file is too big for your liking, run it through a compression program like [TInyPNG.com](http://TInyPNG.com) Not affiliated with them - just a fan.
When it comes to resolution - these images don’t need to be larger than 72 pixels per inch and a full width website image doesn’t need to be larger than 3000px wide.
If you need some images for your site - look for those that are open source, covered by the Creative Commons license so they are free for you to use on your website. You can find a ton of them on [Unsplash.com](http://Unsplash.com) and you can reach the searchable database of Unsplash right in Squarespace. When you see the browse stock images, you’ll find the free images section - those are [unsplash.com](http://unsplash.com) images
For icons, check out the open-source icons available from Google at [fonts.google.com/icons](http://fonts.google.com/icons)
Again I recommend using a PNG file format for icons so they can have a transparent background and keep a high quality.
When you want to add motion, a gif is a great idea. GIFs can be used anywhere an image is used in Squarespace, and they are smaller than video files. They don’t have audio and they loop.
For video files that you want in your content, you can upload them to Squarespace or use a video block. I prefer to host my videos on youtube or Vimeo and link to them using the video block so they dont have to load with all of my other content. I use YouTube for my public-facing videos and Vimeo for my paid course videos.
If you want to use a video for a page section background in Squarespace, do everything you can to make the file smaller. Remove the audio from the file - it won’t play in a background anyway. And no need to have it be anything fancier than HD -Squarespace will reduce it to 1080p so keep your file small and save it that way.
I almost forgot - one final tip for anyone using a background video! In Squarespace, when you add a video for a page section background, you’ll see an option for a mobile fallback image. If your video file is just too big for smaller screen sizes, Squarespace wants you to upload an image it can use instead. Do you see where this is going? That image can be a GIF! make a smaller compressed looping GIF of the video and upload that as your mobile fallback. This gif doesn’t need to be bigger than 800px wide, so you should be able to make one small enough that it fits within the 200MB file size limit.
So there you have it, folks. Optimizing your images for Squarespace isn't just about making them look good. It's about ensuring they load quickly and enhance your site's overall performance. A big part of that is picking the right type of file.
Thank you so much for listening to this episode of Think Inside the Square; I hope you loved it.
I have a lot more tips and tricks to share with you about making an amazing Squarespace website that’s uniquely yours. So be sure to subscribe to this podcast wherever you happen to be listening to this episode.
Thanks again for listening. And most importantly, have fun with your Squarespace website. Bye for now.
-
Image Compressor: tinypng.com
Unsplash for OpenSource photos: unsplash.com
Google Icons: fonts.google.com/icons
Creative Commons Licence: creativecommons.org
